javascript 将 SpotLight 指向与相机three.js 相同的方向(手电筒)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16456912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Point SpotLight in same direction as camera three.js (Flashlight)
提问by Pavel Galaton
I'm really new in this stuff. I want to make a simple 3D scene, where i can fly around with PointerLockControls, but i want also to have some kind of flashlight. So spot light should point same direction as camera does.
我在这方面真的很新。我想制作一个简单的 3D 场景,在那里我可以用 PointerLockControls 飞来飞去,但我也想要某种手电筒。所以聚光灯应该指向与相机相同的方向。
I have made spotlight to follow camera but its target is bound to 0,0,0.
我已经使聚光灯跟随相机,但它的目标绑定到 0,0,0。
What is the best way to achieve this?
实现这一目标的最佳方法是什么?
Thank you.
谢谢你。
回答by WestLangley
The SpotLight
target is an Object3D
, not a Vector3
.
该SpotLight
目标是一个Object3D
,而不是一个Vector3
。
spotlight.target = myObject;
The best solution in your case is to use a PointLight
instead, and use this pattern:
在您的情况下,最好的解决方案是使用 aPointLight
代替,并使用以下模式:
scene.add( camera );
camera.add( pointLight );
If you still want to use a spotlight, then do something like this:
如果您仍想使用聚光灯,请执行以下操作:
scene.add( camera );
camera.add( spotLight.target );
spotLight.target.position.set( 0, 0, -1 );
spotLight.position.copy( camera.position ); // and reset spotlight position if camera moves
It is not generally required that the camera be added as a child of the scene, but it is required in this case because the light is added as a child of the camera.
一般不要求将摄像机添加为场景的子项,但在这种情况下是必需的,因为灯光是作为摄像机的子项添加的。
three.js r.69
三.js r.69
回答by Tim
I had the same problem which I solved as follows:
我有同样的问题,我解决如下:
flashlight = new THREE.SpotLight(0xffffff,4,40);
camera.add(flashlight);
flashlight.position.set(0,0,1);
flashlight.target = camera;
Since a SpotLight's .target needs to be an object (and not a position) I found it mentally easier to simply place the flashlight directly behindthe camera, and then aim it atthe camera. Thus the light shines through the camera and lights up the things in front of it.
由于Spotlight的.TARGET需求为对象(而不是位置),我发现它精神更容易简单地直接将手电筒背后的摄像头,然后瞄准它的相机。因此,光线穿过相机并照亮它前面的东西。
This approach is fine if you are after a flashlight effect where the flashlight is held close to the chest (central to the body) and not off on one side.
如果您追求手电筒效果,手电筒靠近胸部(身体中央)而不是在一侧,则这种方法很好。
回答by Elias Hasle
Inspired by WestLangley's solution above, I found out that spotlight.targetand spotlightitself can be added as children to the same object, whether that is the camera or another object, like a car or a gun. Then they are positioned relative to the parent object, so that there is no need to keep copying the position from one object to another.
受上述 WestLangley 解决方案的启发,我发现spotlight.target和聚光灯本身可以作为子对象添加到同一对象,无论是相机还是其他对象,如汽车或枪支。然后它们相对于父对象进行定位,这样就不需要不断地将位置从一个对象复制到另一个对象。
You could, for instance, do something like this:
例如,您可以执行以下操作:
scene.add(camera);
camera.add(gun);
gun.position.set(-30,-30,0);
gun.add(spotlight);
spotlight.position.set(0,0,30);
gun.add(spotlight.target);
spotlight.target.position.set(0,0,31);
And now the gun will, by default, follow the camera, and the spotlight will light up along the gun. If the gun is for some reason rotated (deflecting a bullet or crawling on the ground or whatever), the spotlight will rotate too. THREE is a nice piece of software. :-)
现在,默认情况下,枪将跟随相机,聚光灯将沿着枪点亮。如果枪由于某种原因旋转(偏转子弹或在地面上爬行或其他),聚光灯也会旋转。三是一款不错的软件。:-)
If you attach the spotlight to the camera and point it in the same direction as the camera and don't position it away from the center, then the light cone will look constantly circular. For many applications it looks cooler and more realistic that it changes shape dynamically in the projection. A small offset is all it takes (such as in my example above, though I haven't tested that one).
如果您将聚光灯连接到相机并将其指向与相机相同的方向,并且不将其放置在远离中心的位置,那么光锥将始终呈圆形。对于许多应用程序来说,它在投影中动态改变形状看起来更酷、更逼真。只需要一个小的偏移量(例如在我上面的示例中,尽管我还没有测试过那个)。