优化Three.js性能：提升WebGL渲染效率

LOD技术

废话

当渲染顶点信息时，WebGL 将这些顶点信息发送到 GPU 中，并使用着色器程序来处理这些顶点信息并最终将它们渲染到屏幕上。在渲染过程中，GPU 对每个顶点执行各种操作，如变换、光照计算、纹理映射等，然后将结果输出到屏幕上。这就意味着，顶点信息越多对于GPU的压力越大，threejs官网提供# 多细节层次(LOD，Levels of Detail)用于优化这种情形，主要原理是通过addLevel添加一个层级，每个层级都对应一个几何体或者模型，对应不同的层级显示不同细节的几何体(如图)。随着相机与模型的距离变化，LOD 对象会自动切换到最适合的模型细节级别，以在远处绘制较简单的模型，在近处绘制更详细的模型。

lod需要动态更新相机，可以在每一帧中调用 LOD 对象的 update(camera) 方法，以更新当前相机位置并根据相机距离选择适当的模型细节级别

示意图

代码

代码中分别创建了一个细分数为8和细分数为32的球几何体，在距离为100以上的时候，加载lowDetailMesh模型，低于100的时候加载highDetailMesh模型

```typescript const initLod = () => { var lowDetailGeometry = new THREE.SphereGeometry(10, 8, 8); var highDetailGeometry = new THREE.SphereGeometry(10, 32, 32); var lowDetailMesh = new THREE.Mesh(lowDetailGeometry, material); var highDetailMesh = new THREE.Mesh(highDetailGeometry, material); // 距离50的时候加载lowDetailMesh模型 lod.addLevel(lowDetailMesh, 100); // 距离10的时候加载highDetailMesh模型 lod.addLevel(highDetailMesh, 50);

} `` render方法中计算出相机距离var distance = camera.position.distanceTo(lod.position);，并更新lodlod.update(camera);`

```ts let render = () => { controls.update() camera.updateProjectionMatrix()

// 获取相机距离
var distance = camera.position.distanceTo(lod.position);
if (cameraDistanceDom) {
    cameraDistanceDom.innerText = `距离：${Math.floor(distance)}`
}
renderer.render(scene, camera)
stats.update()
// 更新lod
lod.update(camera);