Three.js入门-模型加载

Three.js 支持多种 3D 模型格式，每种格式有其独特的优势和适用场景。根据项目的需求，选择合适的格式可以提高开发效率和用户体验。下面将详细介绍几种常见的模型格式及其特点，并补充每种格式的典型使用场景。

支持的模型类型及特点

Three.js 支持多种 3D 模型格式，以下是常见的几种类型及其特点：

1. GLTF/GLB (推荐使用)

简介：

GLTF（GL Transmission Format）是一个基于 JSON 的开放格式，而 GLB 则是其二进制版本。它被设计为传输 3D 模型和场景的标准格式，包含模型的几何信息、材质、纹理、动画等。GLTF/GLB 被广泛应用于游戏、虚拟现实、增强现实等领域，尤其适合 Web 环境。

优点：

• 高效的加载和渲染性能：GLTF 采用了优化的文件结构，支持并行加载，提高了加载速度。GLB 格式将所有资源（如纹理、网格数据等）打包成一个文件，进一步优化了网络传输。
• 完整的功能支持：支持纹理、材质、动画、骨骼、灯光等多种 3D 功能。GLTF 甚至支持骨骼动画，适合用来展示动态的 3D 模型。
• 开源且广泛支持：GLTF 是一个开放标准，得到了各大 3D 软件和平台的支持，如 Sketchfab、Google 和 Microsoft 都在积极使用和推广。

缺点：

• 相对复杂的格式：相比 OBJ 等格式，GLTF 的文件结构稍显复杂，尤其是对于不熟悉 JSON 的开发者来说，理解起来可能需要一些时间。
• 兼容性问题：尽管支持越来越广泛，但在一些老旧浏览器或平台上，可能存在一定的兼容性问题。

适用场景：

GLTF/GLB 格式非常适合用于 Web 平台，尤其是在需要高效加载和渲染的场景下。例如：

• Web 游戏：需要实时加载并展示大量 3D 模型时，GLTF/GLB 是理想选择。
• 虚拟现实 (VR) 和 增强现实 (AR)：GLTF 格式能够高效加载并实时渲染大规模的 3D 场景，适合应用于 VR 和 AR 项目。
• 3D 数据可视化：当需要展示复杂的数据集（如建筑设计、机械设计等）时，GLTF 格式可提供清晰、流畅的展示效果。

2. OBJ

简介：

OBJ 是一种较为简单的 3D 模型文件格式，通常仅包含模型的几何数据（顶点、边、面）。它不包含材质数据，通常需要与 MTL 文件一起使用，以定义材质属性。OBJ 格式历史悠久，兼容性好，广泛应用于多种 3D 软件。

优点：

• 简单易用：OBJ 文件格式结构简单，易于理解和解析。它是 3D 模型中最基本的格式之一，适合初学者。
• 广泛兼容：OBJ 被大多数 3D 软件支持，包括 Blender、Maya、3ds Max 等，适用于多种工作流。

缺点：

• 加载效率较低：OBJ 文件通常比 GLTF 更大，且加载时可能需要解析多个文件（例如材质文件），导致加载速度较慢。
• 功能有限：OBJ 只支持基本的几何数据，无法支持动画、骨骼或复杂的材质效果。

适用场景：

OBJ 格式适合用于静态模型的展示，尤其是在对加载性能要求不高、且不需要动画和复杂材质的项目中。例如：

• 静态展示：适用于展示物体模型、建筑模型等静态对象。
• 3D 打印：OBJ 格式通常是 3D 打印中的标准格式，适用于原型制作和设计验证。

3. FBX

简介：

FBX（Filmbox）格式是由 Autodesk 开发的专有格式，广泛用于动画和视频游戏的制作中。FBX 支持骨骼、动画、材质和纹理等多种特性，适用于复杂的 3D 模型和动画数据交换。

优点：

• 支持复杂动画和骨骼系统：FBX 格式特别适合用于存储和传输复杂的动画数据和骨骼系统。它可以包含多个动画、骨骼权重和变形数据，适合用于角色动画、动作捕捉等复杂场景。
• 良好的兼容性：FBX 格式被多个 3D 软件广泛支持，包括 Autodesk 旗下的软件，如 Maya 和 3ds Max。

缺点：

• 文件体积大，加载慢：FBX 格式相对较大，加载时需要较多的内存和 CPU 计算，因此在 Web 环境下加载速度较慢。
• 解析复杂，兼容性问题：FBX 格式的解析相对复杂，可能会在不同平台或版本之间存在兼容性问题。

适用场景：

FBX 格式适合用于需要复杂动画和骨骼系统的 3D 项目，尤其是在游戏开发、影视动画等领域，常用于角色动画、场景动画的制作。例如：

• 游戏开发：FBX 格式可以包含角色动画、环境动画等，适用于动态游戏场景。
• 影视动画制作：FBX 格式能够高效支持复杂的骨骼动画，适合用于角色动画和场景动画的制作。

4. STL

简介：

STL（STereoLithography）格式是一种广泛用于 3D 打印的文件格式，主要存储三维模型的几何数据（顶点和法线）。STL 格式通常不支持材质、纹理或动画，主要用于静态物体的表示。

优点：

• 简单直观：STL 格式简单，易于生成和解析，适合用于 3D 打印和原型开发。
• 广泛应用：STL 是 3D 打印领域的标准格式，广泛应用于工业设计和制造业。

缺点：

• 不支持材质和纹理：STL 文件不支持材质和纹理，不能用于真实感渲染。
• 不支持动画：STL 格式只适用于静态物体，无法存储动画或其他动态效果。

适用场景：

STL 格式非常适合用于 3D 打印、原型设计和工程设计，但不适合用于 Web 渲染或游戏开发。例如：

• 3D 打印：STL 格式是 3D 打印机接受的标准格式，广泛应用于制造业和原型设计。
• 工业设计：STL 格式适用于设计产品原型、测试零件的物理性能等。

5. Collada (.dae)

简介：

Collada 是一个基于 XML 的开放文件格式，主要用于交换 3D 数据，支持动画、物理模拟等特性。它被多个 3D 软件广泛支持，如 Blender、Maya、3ds Max 等。

优点：

• 支持动画和物理模拟：Collada 格式能够存储模型的动画、物理属性和材质信息，适合用于更复杂的 3D 场景。
• 开放标准，广泛支持：Collada 是一个开放标准，支持多种 3D 工具和引擎，适合进行多平台数据交换。

缺点：

• 文件体积较大：Collada 文件通常较大，尤其是在存储大量动画和物理信息时，加载时可能会比较缓慢。
• 性能较差：相比 GLTF，Collada 格式的加载性能较差，尤其在 Web 上表现不如预期。

适用场景：

Collada 格式适用于需要存储动画、物理模拟和材质的复杂项目，但在 Web 环境中使用时需要注意加载性能问题。例如：

• 跨平台数据交换：Collada 适用于不同平台、软件间的数据交换，常用于多引擎开发场景。
• 动画与物理模拟：在需要精细控制动画和物理模拟效果的场景下，Collada 格式可以提供更多的灵活性。

如何导入模型

准备模型文件

需要准备一个 GLTF 或 GLB 模型文件。可以从 Sketchfab（https://sketchfab.com） 或其他模型资源网站下载。

Sketchfab 是一个全球领先的 3D 内容平台，允许用户上传、展示和分享 3D 模型。支持多种文件格式，如 GLTF、GLB、FBX、OBJ、STL 等，用户可以在浏览器中实时查看并交互式浏览模型。Sketchfab 提供 VR 和 AR 支持，增强了沉浸式体验。此外，用户可以将模型嵌入网站或社交媒体，便于分享。平台还拥有一个市场，用户可以购买或出售 3D 模型，广泛应用于游戏开发、3D 打印、虚拟展览等场景。通过数据分析功能，用户可以跟踪模型的浏览量和互动情况。总之，Sketchfab 是一个便捷的 3D 模型展示和交易平台，适合艺术家、设计师、开发者等各类创作者使用。

这次我们案例模型地址：https://sketchfab.com/3d-models/car-acccd15d4e454399a39dbe40f4f6df71

创建基础场景

import * as THREE from "three";// 创建场景
const scene = new THREE.Scene();// 创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);
camera.position.set(0, 1, 3);// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);// 渲染循环
function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
}
animate();

运行以上代码后，你会看到一个空白的 3D 场景。

加载 GLTF/GLB 模型

1. 安装 GLTFLoader

Three.js 提供了很多加载器，其中 GLTFLoader 用于加载 .gltf 和 .glb 格式的模型。

引入 GLTFLoader：

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

2. 使用 GLTFLoader 加载模型

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";// 创建加载器
const loader = new GLTFLoader();// 加载模型
loader.load("/car/scene.gltf", // 模型路径(gltf) => {// 加载成功回调const model = gltf.scene;scene.add(model);},(xhr) => {// 加载进度回调console.log(`模型加载进度：${(xhr.loaded / xhr.total) * 100}%`);},(error) => {// 加载错误回调console.error("模型加载出错：", error);}
);

3. 调整模型位置和大小

加载的模型可能位置不对或太大/太小。可以对其进行调整：

model.position.set(0, 0, 0); // 设置模型位置
model.scale.set(0.5, 0.5, 0.5); // 缩放模型大小

到此，我们模型就引入成功了。

小结

在选择模型格式时，推荐首选 GLTF/GLB 格式，尤其是在 Web 项目中。它具有良好的加载性能、支持复杂的 3D 特性，并且有广泛的社区支持。其他格式如 OBJ、FBX 和 STL，虽然在特定场景下有独特的优势，但往往不如 GLTF/GLB 在 Web 中高效实用。希望通过本部分内容的介绍，能够帮助你更好地理解每种模型格式的特点和适用场景，做出最合适的选择。