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 中高效实用。希望通过本部分内容的介绍，能够帮助你更好地理解每种模型格式的特点和适用场景，做出最合适的选择。