Three.js: 单模型、组合模型加载攻略！

2023-01-12 14:52:10

在 Three.js 中加载 3D 模型：单模型和组合模型

单模型加载

在 Three.js 中加载单个模型涉及几个步骤：

场景准备： 创建一个 Three.js 场景，该场景将包含您的模型。
模型加载： 使用 Three.js 的模型加载器（如 OBJLoader 或 GLTFLoader）加载模型。
模型添加： 将加载的模型添加到场景中，以便在场景中显示。
渲染： 调用渲染器渲染场景，以便在屏幕上显示模型。

代码示例：

// 加载模型
const loader = new OBJLoader();
loader.load('model.obj', (object) => {
  // 将模型添加到场景中
  scene.add(object);
  // 渲染场景
  renderer.render(scene, camera);
});

组合模型加载

组合模型由多个子模型组成，每个子模型都使用单独的文件加载。加载组合模型需要：

场景准备： 创建一个 Three.js 场景，该场景将包含您的组合模型。
模型加载： 使用 Three.js 的模型加载器（如 OBJLoader 或 GLTFLoader）加载每个子模型。
模型解析： 将加载的组合模型解析成各个子模型。
模型添加： 将解析后的子模型添加到场景中，以便在场景中显示。
渲染： 调用渲染器渲染场景，以便在屏幕上显示组合模型。

代码示例：

// 加载每个子模型
const loaders = [new OBJLoader(), new OBJLoader(), new OBJLoader()];
const modelPaths = ['submodel1.obj', 'submodel2.obj', 'submodel3.obj'];

Promise.all(
  modelPaths.map((path, i) => loaders[i].load(path))
).then((objects) => {
  // 组合子模型
  const combinedModel = new Group();
  objects.forEach((object) => combinedModel.add(object));

  // 将组合模型添加到场景中
  scene.add(combinedModel);
  // 渲染场景
  renderer.render(scene, camera);
});