如何优化用作网页背景的three.js动画GPU占用过高问题

1. 渲染配置优化（改参数即可生效，收益最高） #

• 关闭抗锯齿：将渲染器初始化参数antialias:true改为antialias:false，背景动画的抗锯齿感知度极低，调整后可直接降低30%左右GPU负载。
• 降低阴影配置：当前聚光灯阴影贴图尺寸为6000*6000，属于极高负载配置，改为1024*1024即可满足背景显示需求；同时将阴影类型THREE.PCFSoftShadowMap替换为性能更好的THREE.BasicShadowMap，如果对阴影没有强需求可直接关闭renderer.shadowMap.enabled = false。
• 限制渲染分辨率：添加代码renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5))，避免2K/4K高分辨率屏幕下的冗余像素渲染压力。

2. 几何体与材质优化 #

• 合并同类型网格：目前场景内有50个建筑、300个粒子、60个车辆共数百个独立网格，GPU每次绘制单个网格都会产生一次Draw Call，可使用THREE.InstancedMesh将同材质的几何体合并为单个网格，Draw Call可从数百降到个位数，GPU负载会出现大幅下降。
• 替换高消耗材质：当前使用的MeshStandardMaterial、MeshPhongMaterial需要复杂的光照计算，作为背景可替换为性能更高的MeshLambertMaterial，如果不需要双面渲染就删除side:THREE.DoubleSide配置，使用默认的单面渲染即可，减少一半的片元着色计算量。
• 简化几何体参数：建筑几何体的分段数segments设为2，简单立方体用默认的1即可，减少顶点计算量；setTintColor函数返回值固定为黑色，可直接写死颜色值，无需每次创建建筑时调用函数。

3. 场景元素优化 #

• 关闭不必要的阴影属性：当前所有建筑、车辆都开启了castShadow和receiveShadow，作为背景可仅保留主建筑的阴影投射、地面的阴影接收，其余小元素全部关闭阴影属性。
• 删除冗余元素：代码中声明的raycaster、spotLightHelper未实际使用，可直接删除；GridHelper的分段设为120过高，改为20即可满足显示需求，减少线条渲染压力。

4. 动画循环优化 #

• 降帧运行：背景动画不需要满60帧运行，可限制为30帧，添加时间戳控制渲染间隔即可，示例代码：

let lastRender = 0;
const renderInterval = 1000 / 30; // 30帧
function animate() {
  requestAnimationFrame(animate);
  const now = Date.now();
  if (now - lastRender < renderInterval) return;
  lastRender = now;
  // 原有动画、渲染逻辑
}

• 删除空逻辑：动画函数内遍历town.children的代码无任何实际操作，可直接删除，减少不必要的CPU计算。

内容的提问来源于stack exchange，提问作者LGR