1. 常用的三维模型格式

以下是一些常见的三维模型格式：

OBJ：OBJ（Wavefront Object）是一种简单的 3D 模型文件格式，广泛用于 3D 建模和动画。OBJ 文件主要包含顶点、纹理坐标、法线和面的信息。这种格式易于解析，但文件较大，不适合实时应用。OBJ 格式不支持动画、骨骼和蒙皮。通常与 MTL 材质文件一起使用。
STL：STL（Stereolithography）格式是一种主要用于 3D 打印和快速原型制造的 3D 模型文件格式。STL 文件通常包含三维模型的表面三角形信息，但不包含颜色、纹理或其他材质信息。STL 格式的文件通常较大，不适合实时应用。
FBX：FBX（Filmbox）是由 Autodesk 开发的一种 3D 模型文件格式。FBX 文件支持多种 3D 数据类型，包括几何体、材质、纹理、动画、骨骼和蒙皮等。FBX 文件可以在多个 3D 软件和游戏引擎中无缝传输，是一种非常通用的格式。然而，FBX 格式是专有的，可能在解析和导入时遇到一些问题。
glTF：glTF（GL Transmission Format）是一种开放标准的 3D 模型文件格式，被誉为 "JPEG for 3D"。glTF 文件支持几何体、材质、纹理、动画、骨骼和蒙皮等多种数据类型。glTF 格式被设计为 GPU 友好，易于解析和加载，适用于实时应用和网络传输。glTF 是目前推荐的 3D 模型文件格式。

2. 加载常用外部三维模型

2.1 OBJ 格式

OBJ：使用 THREE.OBJLoader 加载 OBJ 文件：

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

// 加载材质
const mtlLoader = new MTLLoader();
mtlLoader.load('path/to/model.mtl', (materials) => {
  materials.preload();

  // 加载模型
  const objLoader = new OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.load('path/to/model.obj', (object) => {
    scene.add(object);
  });
});

2.2 STL 格式

STL：使用 THREE.STLLoader 加载 STL 文件：

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

const loader = new STLLoader();
loader.load('path/to/your/model.stl', (geometry) => {
  const material = new THREE.MeshStandardMaterial({ color: 0x606060 });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
});

2.3 FBX 格式

FBX：使用 THREE.FBXLoader 加载 FBX 文件：

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

const loader = new FBXLoader();
loader.load('path/to/your/model.fbx', (object) => {
  scene.add(object);
});

2.4 glTF格式

glTF：使用 THREE.GLTFLoader 加载 glTF 文件：

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

const loader = new GLTFLoader();
loader.load('path/to/your/model.gltf', (gltf) => {
  scene.add(gltf.scene);
});

3. 错误处理与性能优化

3.1 错误处理

在加载外部三维模型时，可能会遇到一些错误，例如文件找不到、格式错误等。为了更好地处理这些错误，可以使用加载器的 onError 回调函数：

gltfLoader.load(
  'path/to/model.gltf',
  (gltf) => {
    scene.add(gltf.scene);
  },
  undefined, // onProgress 可选回调函数
  (error) => {
    console.error('加载模型时发生错误：', error);
  }
);

3.2 性能优化

加载大量或复杂的三维模型可能会导致性能问题。为了优化性能，可以考虑以下策略：

选择合适的模型格式：使用高效的格式，如 glTF（推荐）或 FBX，可以减少文件大小和解析时间。glTF 格式被设计为 GPU 友好，易于加载和解析。
减少模型复杂度：在导出模型时，尽量减少顶点和多边形的数量。这可以通过在 3D 建模软件中使用网格简化、网格合并等技术来实现。这样可以减少模型的大小，加快加载速度，并降低 GPU 计算负担。
使用压缩纹理：使用压缩纹理格式（如 DXT、PVRTC 或 ASTC）可以显著减小纹理文件大小，从而加快加载速度。此外，这还可以降低 GPU 内存占用和渲染时的带宽需求。
使用 DRACO 压缩：DRACO 是一种用于压缩几何体数据的技术。使用 DRACO 压缩可以显著减小模型文件大小，从而加快加载速度。请注意，解压缩 DRACO 数据需要一些额外的计算，但在大多数情况下，这是值得的。
异步加载和渐进式显示：通过使用 THREE.LoadingManager 和 THREE.GLTFLoader 等加载器，您可以实现异步加载和渐进式显示。这可以避免在加载大型模型时阻塞主线程，从而提高用户体验。
使用 LOD 技术：对于大型场景和高精度模型，使用 LOD 技术（Level of Detail）可以根据物体与相机的距离，动态选择渲染不同精度的模型。这可以有效减少渲染时的计算量，提高性能。
缓存已加载的模型：当需要多次加载相同模型时，可以将已加载的模型存储在内存中，以便后续快速访问。这可以避免重复加载和解析模型，从而提高性能。

【Three.js】知识梳理七：Three.js外部三维模型加载