Punkt SpotLight in der gleichen Richtung wie Kamera three.js (Taschenlampe)

Question

Ich bin wirklich neu in diesem Zeug. Ich möchte eine einfache 3D-Szene machen, in der ich mit PointerLockControls herumfliegen kann, aber ich möchte auch eine Art Taschenlampe haben. Das Spotlicht sollte also in dieselbe Richtung zeigen wie die Kamera.

Ich habe Spotlight gemacht, um Kamera zu folgen, aber sein Ziel ist an 0,0,0 gebunden.

Was ist der beste Weg, dies zu erreichen?

Vielen Dank.

Answer 1

Das Ziel SpotLight ist ein Object3D, kein Vector3.

spotlight.target = myObject; 

Die beste Lösung in Ihrem Fall ist eine PointLight stattdessen zu verwenden und dieses Muster verwenden:

scene.add(camera); 
camera.add(pointLight); 

Wenn Sie noch einen Scheinwerfer verwenden möchten, dann so etwas tun:

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 

Es ist nicht allgemein erforderlich, dass die Kamera als ein Kind der Szene hinzugefügt wird, aber es ist in diesem Fall erforderlich, da das Licht als Kind der Kamera hinzugefügt wird.

three.js r.69

Answer 2

hatte ich das gleiche Problem, das ich wie folgt gelöst:

flashlight = new THREE.SpotLight(0xffffff,4,40); 
camera.add(flashlight); 
flashlight.position.set(0,0,1); 
flashlight.target = camera; 

Da ein .TARGET des SpotLight braucht ein Objekt (und nicht um eine Position) zu sein, fand ich es ist mental einfacher, einfach die Taschenlampe direkt hinter die Kamera zu platzieren, und dann zielen sie um die Kamera. So scheint das Licht durch die Kamera und erhellt die Dinge davor.

Dieser Ansatz ist in Ordnung, wenn Sie nach einem Taschenlampeneffekt sind, bei dem die Taschenlampe nahe an der Brust (zentral am Körper) und nicht auf einer Seite gehalten wird.

Answer 3

Inspiriert von oben WestLangley-Lösung, fand ich heraus, dass spotlight.target und Scheinwerfer sich als Kinder auf das gleiche Objekt hinzugefügt werden kann, ob, dass die Kamera oder ein anderes Objekt, wie ein Auto oder einer Pistole. Dann werden sie relativ zum übergeordneten Objekt positioniert, so dass die Position nicht von einem Objekt zum anderen kopiert werden muss.

Sie könnten zum Beispiel so etwas wie folgt aus:

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); 

Und nun die Waffe wird in der Standardeinstellung folgen die Kamera und der Scheinwerfer entlang der Pistole leuchtet. Wenn die Waffe aus irgendeinem Grund gedreht wird (eine Kugel ablenkt oder auf dem Boden kriecht oder was auch immer), dreht sich der Scheinwerfer ebenfalls. DREI ist ein schönes Stück Software. :-)

Wenn Sie den Scheinwerfer an der Kamera anbringen und ihn in die gleiche Richtung wie die Kamera richten und ihn nicht von der Mitte weg positionieren, sieht der Lichtkegel ständig kreisförmig aus. Für viele Anwendungen sieht es kühler und realistischer aus, dass es seine Form in der Projektion dynamisch ändert.Ein kleiner Versatz genügt (wie in meinem Beispiel oben, obwohl ich das nicht getestet habe).