內容概述
Three.js 支持加載多種 3D 文件格式（如 GLTF、OBJ、FBX），這讓開發者可以直接使用專業建模軟件（如 Blender、Maya）創建的復雜模型。本專題將重點介紹 GLTF 格式的加載，并調整模型的位置和材質。
學習目標
- 理解常見 3D 文件格式及其特點。
- 掌握使用
GLTFLoader加載外部模型。 - 學會調整加載模型的屬性（如位置、大小、材質）。
完整代碼實現
我們將加載一個 GLTF 格式的狐貍模型（來自 Three.js 官方示例），并讓它在場景中旋轉。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Three.js - 加載外部模型</title><style>body { margin: 0; overflow: hidden; }canvas { display: block; }</style>
</head>
<body><!-- 引入 Three.js 和 GLTFLoader --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script><script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script><script>// 1. 初始化場景、相機和渲染器const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 2, 5);camera.lookAt(0, 0, 0);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 2. 添加光源const ambientLight = new THREE.AmbientLight![P1006 [NOIP 2008 提高組] 傳紙條 題解](http://pic.xiahunao.cn/P1006 [NOIP 2008 提高組] 傳紙條 題解)
