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个聚光灯，并且游戏将以60fps的速度运行。