Three.js加载外部模型的教程详解

在Three.js中，我们可以使用OBJLoader或者GLTFLoader等加载外部模型格式，这个过程涉及到一个异步加载的概念，需要了解模型格式和Three.js的使用。

OBJLoader

OBJLoader是Three.js中默认包含的加载OBJ格式模型的工具，我们可以通过以下代码引入：

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

接下来就可以开始使用OBJLoader来加载外部的OBJ格式模型了：

const objLoader = new OBJLoader();
objLoader.load('path/to/model.obj', function(obj){
  // obj为加载完成的模型对象
  scene.add(obj);
});

这个过程是异步的，在模型加载完成后才会执行回调函数，所以我们需要在回调函数中操作模型。回调函数中的obj是一个THREE.Group对象，其中包含了模型的所有Mesh。如果模型包含了材质和贴图，也会被一起加载进来。

GLTFLoader

GLTFLoader是Three.js中用于加载GLTF格式模型的工具，GLTF是一种基于JSON的文件格式，可以包含模型、材质以及动画等信息。GLTF格式是Three.js的建议格式。

GLTFLoader需要引入以下代码：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

接下来，可以通过以下代码来加载外部的GLTF模型：

const gltfLoader = new GLTFLoader();
gltfLoader.load('path/to/model.gltf', function(gltf){
  // gltf.scene为加载完成的模型对象
  scene.add(gltf.scene);
});

同样，这个过程也是异步的，需要在回调函数中操作模型。gltf.scene是一个THREE.Group对象，其中包含了所有Mesh以及Bone等信息。如果模型包含了贴图等其他资源，也会被一起下载和加载。

示例1：加载OBJ模型

以下是一个加载OBJ格式模型的示例代码：

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

const objLoader = new OBJLoader();

objLoader.load('path/to/model.obj', function(obj){
  // 添加模型到场景
  scene.add(obj);

  // 设置模型位置
  obj.position.set(x, y, z);

  // 设置模型缩放
  obj.scale.set(sx, sy, sz);

  // 设置模型旋转
  obj.rotateX(Math.PI / 2);
});

这个示例代码中使用了OBJLoader来加载模型，加载成功后将模型添加到了场景中，在回调函数中可以对模型进行其他操作，比如设置位置、缩放和旋转等。

示例2：加载GLTF模型

以下是一个加载GLTF格式模型的示例代码：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const gltfLoader = new GLTFLoader();

gltfLoader.load('path/to/model.gltf', function(gltf){
  // 添加模型到场景
  scene.add(gltf.scene);

  // 设置模型位置
  gltf.scene.position.set(x, y, z);

  // 设置模型缩放
  gltf.scene.scale.set(sx, sy, sz);

  // 设置模型旋转
  gltf.scene.rotateX(Math.PI / 2);
});

这个示例代码中使用了GLTFLoader来加载模型，加载成功后将模型添加到了场景中，在回调函数中可以对模型进行其他操作，比如设置位置、缩放和旋转等。

通过这两个示例，可以了解到如何使用OBJLoader和GLTFLoader来加载外部模型，以及模型加载完成后如何对其进行操作。需要注意的是，模型文件的路径需要正确设置，模型格式也需要与对应的Loader匹配。