引言

Three.js 是一个强大的 JavaScript 库，用于在网页上创建和显示 3D 图形。这篇文章将指导你如何在 Three.js 中加载不同格式的 3D 模型。

Three.js 基础

在深入模型加载之前，让我们快速回顾一下 Three.js 的三个基本组件：

1. 场景（Scene）：一个场景包含了所有你想渲染的物体，它是所有物体的容器。

2. 相机（Camera）：相机决定了哪部分场景会被渲染。

3. 渲染器（Renderer）：渲染器用于计算并渲染最终图像。

设置一个基本的 Three.js 项目涉及到创建这三个组件，并将渲染器绑定到 HTML 的 canvas 元素上。

模型格式简介

常见的 3D 模型格式包括 .obj、.fbx 和 .gltf。.gltf（GL Transmission Format）因其紧凑、高效的特性，成为了Web上3D内容的首选格式。相比之下，.obj 是一个较老的格式，通常用于较简单的模型。

模型加载

这里我们使用gltf模型加载，核心代码如下:

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

let camera, scene, renderer;
let model;

.....

// 初始化模型
function initModel() {
  const loader = new GLTFLoader();
  loader.load('/src/assets/Soldier.glb', function (gltf) {
    model = gltf.scene;
    scene.add(model);
  }, undefined, function (error) {
    console.error('模型加载出错: ', error);
  });
}

.....

onMounted(() => {
  initModel();
});

这段代码首先导入了所需的 Three.js 和 GLTFLoader。然后展示了如何加载3D模型，然后把模型添加到场景中。

总结

加载 3D 模型是 Three.js 应用的核心部分。通过本文，你应该对如何在 Three.js 中加载不同格式的模型有了基本的了解。不要害怕尝试不同的模型和加载技术，通过实践来完善你的技能。

附加资源

• Three.js 官方文档

• Three.js 示例