Javascript Three.js多聚光灯性能

我在three.js上做一些赛车游戏，我遇到了以下问题

我有2辆车，所以我们需要为每辆车的后车灯和前车灯渲染4个聚光灯（最少）

我们还需要一些道路上的灯

所以我有这个代码：

//front car1 light
var SpotLight = new THREE.SpotLight( 0xffffff, 5, 300, Math.PI/2, 1 );
SpotLight.position.set( 50, 10, 700 );
SpotLight.target.position.set(50, 0, 800);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

//front car2 light
var SpotLight = new THREE.SpotLight( 0xffffff, 5, 300, -Math.PI/2, 1 );
SpotLight.position.set( -50, 10, 40 );
SpotLight.target.position.set(-50, 0, 100);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

//rear car1 light
var SpotLight = new THREE.SpotLight( 0xff0000, 2, 200, Math.PI/2, 2 );
SpotLight.position.set( 50, 20, 660 );
SpotLight.target.position.set(50, 0, 600);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

//rear car2 light
var SpotLight = new THREE.SpotLight( 0xff0000, 2, 100, Math.PI/2, 1 );
SpotLight.position.set( -50, 20, -35 );
SpotLight.target.position.set(-50, 0, -100);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

//some road light
var SpotLight = new THREE.SpotLight( 0x404040, 3, 500, Math.PI/2, 2 );
SpotLight.position.set( 0, 300, 0 );
SpotLight.target.position.set(0, 0, 0);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

没什么特别的。。但性能下降到20-30 FPS，有点滞后：-1: 如果我在未来添加一些灯光，性能将进一步提升

---

有没有人遇到过类似的问题？如何应对？或者我做错了什么

在进行实时渲染时，灯光是一个非常耗时的任务。你需要找到最便宜的方法来模仿你追求的结果

---

例如，如果有聚光灯对准地板，你可以在你的汽车前面有一个纹理的平面，其纹理看起来像。这是不对的，但它会给人一种正确的印象，你将节省4个聚光灯，你的游戏将以60 fps的速度运行。

在这种情况下，阴影很可能是罪魁祸首-在引擎盖下，需要从每个阴影投射灯的角度渲染场景。如果可能，将其保存为最重要的灯光，禁用其他灯光上的阴影

---

对于许多灯光，您可以尝试使用WebGLDeferredRenderer，它可以比默认渲染器更好地处理多个灯光。不过，这是一项正在进行的实验性工作，所以您可能会遇到其他问题。此外，我不确定这是否有助于阴影贴图性能。

除了mrdoob和yaku的建议（这些建议非常有用）之外，我还有一个问题，那就是减少几何图形中的线段和多边形数量

i、 e如果场景中有一个简单的圆柱体，可以通过在初始化时指定高度分段和半径分段来减少分段数：

作为一个非常简单的示例，如果需要创建简单圆柱体，请避免执行类似操作：

sampleCylinderGeo = new THREE.CylinderGeometry(2, 2, 5, 16, 32);

相反，请尝试：

sampleCylinderGeo = new THREE.CylinderGeometry(2, 2, 5, 8, 1);

当然，如果您想要更平滑的圆柱体，您可以根据需要将径向分段从8个增加到16个或更多，但对于高度分段，在一个简单圆柱体中包含多个分段是毫无用处的

---

因此，只需根据您的需要调整分段的数量，就可以节省大量不必要的分段，并在使用灯光时获得更多的FPS，特别是当场景中有大量几何体时。

我尝试删除所有阴影，但是只有10个聚光灯的性能仍然很低：sI也有同样的问题，只有10个简单的聚光灯，我得到45-50 FPS，我们还有没有皮塔纹理处理的灯光？