WebGL 加载三维模型

在 WebGL 的学习之旅中，我们一直处理简单的立方体，但如果想要绘制复杂图形，则需要定义大量顶点数据，并微调曲面细节。手工绘制耗时费力，因此我们引入三维模型加载。

模型加载

三维模型通常使用各种文件格式存储，例如 OBJ、GLTF 和 FBX。这些文件包含网格数据（顶点位置、法线和纹理坐标），以及材质和动画信息。

要加载三维模型，我们可以使用 JavaScript 中的 THREE.Loader 类。它提供了加载不同文件格式模型的加载器。

const loader = new THREE.OBJLoader();
loader.load('path/to/model.obj', (object) => {
  scene.add(object);
});

加载后，模型对象可以添加到场景中，并渲染到画布上。

优化模型加载

为了提高加载性能，可以采用以下技巧：

• 使用低多边形模型： 多边形数量较少的模型加载速度更快。
• 分块加载： 对于大型模型，可以将其分成较小的块，并在需要时按需加载。
• 使用 LOD（细节等级）： LOD 允许根据视距切换模型的不同细节级别。
• 预加载： 在场景加载之前预加载模型，以减少延迟。

示例代码

<script>
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();

  const loader = new THREE.OBJLoader();
  loader.load('path/to/model.obj', (object) => {
    object.material.color = new THREE.Color('red');
    scene.add(object);
  });

  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  const animate = () => {
    requestAnimationFrame(animate);

    renderer.render(scene, camera);
  };

  animate();
</script>