如何使用 ThreeJS 将 SpotLight 添加到相机？

Question

Three.js r105

我正在尝试向相机添加 SpotLight 以使其具有“手电筒”效果。虽然，一旦我将 SpotLight 添加到我的 Camera 后，灯似乎完全停止工作。我做错了什么？

奇怪，因为 LightHelper 看起来工作正常。此外，将 SpotLight 独立添加到 Scene 也可以正常工作。

一旦我将 SpotLight 附加到 Camera 上，即使是最小的光闪烁也没有丝毫

const cameraLight = new THREE.SpotLight(0xffffff, 4, 40);
cameraLight.castShadow = true;

cameraLight.shadow.bias = -0.0001;
cameraLight.shadow.mapSize.width = 512;
cameraLight.shadow.mapSize.height = 512;
cameraLight.shadow.camera.near = 0.1;
cameraLight.shadow.camera.far = 500;

var d = 32;

cameraLight.shadow.camera.left = -d;
cameraLight.shadow.camera.right = d;
cameraLight.shadow.camera.top = d;
cameraLight.shadow.camera.bottom = -d;

cameraLight.visible = true;
cameraLight.distance = 40;
cameraLight.decay = 1;
cameraLight.angle = Math.PI/2;
cameraLight.penumbra = 0.1;

camera.add( cameraLight );
cameraLight.position.set( 0, 0, 1);
cameraLight.target = camera;    

var cameraLightHelper = new THREE.PointLightHelper( cameraLight, 5, 0x00ff00 );
scene.add( cameraLightHelper );

scene.add( camera );

Answer 1

哪种相机类型有“添加”方法？
PointLightHelper 接受 PointLight 作为第一个参数。

Answer 2

如果您使用的是 Spotlight，我推荐 you use a SpotlightHelper，而不是 PointlightHelper。

您必须确保您的 Spotlight 已添加到 Scene。请记住，一个对象只能有一个父对象。因此，将灯光添加到场景，然后将其添加到相机会将其从场景中移除。

// This adds spotlight to scene
scene.add(spotlight);

// This removes spotlight from scene, and adds to camera
camera.add(spotlight);

因此，如果您尚未将相机添加到场景中，则不会渲染灯光。您可以通过将一个嵌套在另一个中来解决此问题：

camera.add(spotlight);
scene.add(camera);

现在灯光是场景的“孙子”，它会渲染。只要确保您的聚光灯与相机朝向相同的方向即可。你可能让它指向后方或其他东西，你永远不会看到光锥。使用 Spotlighthelper 应该可以帮助您确定它指向的方向。

Answer 3

经过几个小时的努力，这是让它工作的代码

const cameraLight = new THREE.SpotLight(0xffffff, 6);
cameraLight.castShadow = true;


cameraLight.shadow.bias = -0.0001;
cameraLight.shadow.mapSize.width = 512/4 * renderer.capabilities.maxTextures; // default
cameraLight.shadow.mapSize.height = 512/4 * renderer.capabilities.maxTextures; // default
cameraLight.shadow.camera.near = 0.1; // default
cameraLight.shadow.camera.far = 500; // default

var d = 32;

cameraLight.shadow.camera.left = -d;
cameraLight.shadow.camera.right = d;
cameraLight.shadow.camera.top = d;
cameraLight.shadow.camera.bottom = -d;

cameraLight.visible = true;
cameraLight.distance = 40;
cameraLight.decay = 1;
cameraLight.angle = Math.PI/4;
cameraLight.penumbra = 0.1; 
    
camera.add( cameraLight );
cameraLight.position.set( 0, 0, 1);
scene.add( camera );
cameraLight.target = camera;

基本上是一样的..

我确实清理了我的缓存，所以这可能是问题所在？我不知道

如何使用 ThreeJS 将 SpotLight 添加到相机？

How to add a SpotLight to Camera with ThreeJS?

javascript

three.js