我在 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 的速度运行。
关于javascript - Three.js 多重聚光灯性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15998811/