CODEWITHSUNDEEP
javascriptcanvasthree.js
user3820008
user3820008

Reputation: 23

Setting position to position of other object does not work in THREE.js

I am trying out Three.js and I am trying to position a SpotLight at the position of the camera. I use the following code (stripped window creation):

$(document).ready(function() {
    init();
});

function init() {
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set(50, 10, 0);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    var spotLight = new THREE.SpotLight( 0xffffff );
    spotLight.position = camera.position;
    console.log(camera.position);
    console.log(spotLight.position);
}

I get as output that camera.position is 50,10,0 (as expected) but spotLight.position is 0,1,0 - even tough I just set it to point at the same value?

Upvotes: 2

Views: 1410

Answers (2)

elcsiga
elcsiga

Reputation: 180

Since SpotLight and Camera are objects (Object3D), you can simply add the spotlight to the camera. The light will be moved, rotated etc. with the camera without any further position copying. In this case you have to position the light relative to the camera:

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

Upvotes: 0

AllForum
AllForum

Reputation: 389

Try

spotLight.position.set(camera.position.x, camera.position.y, camera.position.z)

position is read-only

Upvotes: 3

Related Questions