本文共 1314 字，大约阅读时间需要 4 分钟。

BufferGeometry与gltf的应用优化

Three.js 提供了两种主要的几何加载方式：传统的 JSON 格式和更为紧凑的 BufferGeometry 格式。前者在存储顶点数据、法向量和面片信息时纯属文本文件形式；而 BufferGeometry 则通过二进制文件优化了加载性能。

BufferGeometry 重点解析

BufferGeometry 文件采用 JSON 外壳配合二进制文件 (*.bin) 的方式存储网格数据。这种格式可将文件体积压缩至原文本文件的九十%以下，同时加快数据加载速度。

加载 BufferGeometry

使用 BufferGeometryLoader 加载 JSON 文件即可配置网格高层属性：

const loader = new THREE.BufferGeometryLoader();
const phongMaterial = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  specular: 0x333333,
  shininess: 0.9,
  side: THREE.DoubleSide
});
loader.load('test.json', (geometry) => {
  const mesh = new THREE.Mesh(geometry, phongMaterial);
  mesh.castShadow = mesh.receiveShadow = true;
  const edgesGeometry = new THREE.EdgesGeometry(geometry);
  const edgesMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
  const edges = new THREE.LineSegments(edgesGeometry, edgesMaterial);
  scene.add(edges);
  scene.add(mesh);
});

文件格式特点

• 顶点数据：通过 Float32Array 存储坐标、法向量和纹理坐标，类型化数组访问速度更快。
• 模型结构：结合 Textures harshEditing 外壳 提供材质和贴图数据。

glTF 加载优势

gltf 格式无需转换直接面向 GPU ，适合复杂场景。其优势包括：

加载流程简化

• 外壳文件：存储高层属性、节点定义和材质引用。
• 二进制缓存：快速加载顶点和纹理数据。
• 资源整合：通过回调函数一站式加载到场景中。

技术收益

• 性能提升：部分模型加载速度提升 80%+。
• 内存优化：通过类型化数组减少内存占用。
• 渲染流程：最高效的 WebGL 渲染效果。

gltf 的加载过程关键在于如何处理高效的资源下载和合并。可以采用流式下载或增量加载策略。

两种方案对比总结

BufferGeometry 和 gltf 都适合 perf 通透场景，但选择时需考虑文件体积、加载效率和开发工作量。选择最优方案需根据项目实际需求。