Three.js引用模型

**三维场景中的模型引用**

在Web开发中，使用三维场景库如Three.js可以创建出非常复杂的3D图形。其中一个重要的方面就是如何引用外部的模型文件，以便能够在我们的场景中加载和显示这些模型。

本文将介绍如何使用Three.js引用外部的模型文件，包括 OBJ、STL、FBX等常见格式，以及一些示例代码和注释。

### 一. 引用模型的基本流程1. **准备模型文件**:首先，我们需要准备好我们要引用的模型文件。这些文件可以是OBJ、STL、FBX等格式。
2. **加载模型**:使用Three.js提供的loader函数，根据模型文件的类型（如OBJLoader、STLLoader等），将其转换为Three.js支持的数据结构。
3. **创建场景**:在我们的HTML页面中，创建一个Three.js场景，并设置相应的属性，如背景颜色、视角等。
4. **添加模型**:使用加载好的模型数据，创建一个Three.js的Mesh对象，并将其添加到我们的场景中。

### 二. 使用OBJLoader引用OBJ模型OBJ是三维模型的一个常见格式。下面我们将演示如何使用Three.js提供的OBJLoader来引用OBJ模型：

javascript// 引入OBJLoaderimport { OBJLoader } from 'three/examples/loaders/OBJLoader.js';

// 准备模型文件const modelUrl = 'path/to/model.obj';

// 加载模型const loader = new OBJLoader();
loader.load(modelUrl, (object) => {
 // 创建场景 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0x000000);

 // 添加模型 scene.add(object);
 // 渲染场景 const renderer = new THREE.WebGLRenderer({
 canvas: document.getElementById('canvas'),
 });
 renderer.setSize(window.innerWidth, window.innerHeight);
 function animate() {
 requestAnimationFrame(animate);
 renderer.render(scene, camera);
 }
 animate();
});

javascript// 引入STLLoaderimport { STLLoader } from 'three/examples/loaders/STLLoader.js';

// 准备模型文件const modelUrl = 'path/to/model.stl';

// 加载模型const loader = new STLLoader();
loader.load(modelUrl, (geometry) => {
 // 创建场景 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0x000000);

 // 添加模型 const material = new THREE.MeshPhongMaterial({ color:0xffffff });
 const mesh = new THREE.Mesh(geometry, material);
 scene.add(mesh);
 // 渲染场景 const renderer = new THREE.WebGLRenderer({
 canvas: document.getElementById('canvas'),
 });
 renderer.setSize(window.innerWidth, window.innerHeight);
 function animate() {
 requestAnimationFrame(animate);
 renderer.render(scene, camera);
 }
 animate();
});

javascript// 引入FBXLoaderimport { FBXLoader } from 'three/examples/loaders/FBXLoader.js';

// 准备模型文件const modelUrl = 'path/to/model.fbx';

// 加载模型const loader = new FBXLoader();
loader.load(modelUrl, (object) => {
 // 创建场景 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0x000000);

 // 添加模型 scene.add(object);
 // 渲染场景 const renderer = new THREE.WebGLRenderer({
 canvas: document.getElementById('canvas'),
 });
 renderer.setSize(window.innerWidth, window.innerHeight);
 function animate() {
 requestAnimationFrame(animate);
 renderer.render(scene, camera);
 }
 animate();
});