Markus Siebeneicher
Markus Siebeneicher

Reputation: 765

ThreeJS Camera mouse direction after camera.position() & lookAt()

The following code works fine for me, drawing the current mouse position on the canvas as an arrow using the ThreeJS ArrowHelper. What I do with the mouse direction is not so important here.

function mouseDir () {
    var bbox = canvas.getBoundingClientRect();
    var mouse3D = new THREE.Vector3 (
        ((currentMouseX - bbox.left) / bbox.width) * 2 - 1,
        -((currnetMouseY - bbox.top) / bbox.height) * 2 + 1,
        0.5
    );

    // perspective camera
    var dir = mouse3D.unproject(camera).sub(camera.position).normalize();
    scene.add(new THREE.ArrowHelper(dir, camera.position));     // draws arrow helper showing mouse direction
}

The drawn arrow is pointing straight ahead, so I can see only the head of the arrow, which is totally fine (1.).

enter image description here

As soon as I change the camera position AND set lookAt, its getting weird (2.). The arrow is not drawn anymore straight from the mouse away. Here is how I change the position and set lookAt position:

// DONT WORK
camera.position.set(500,50,150);
camera.lookAt(new THREE.Vector3(0,0,0));
camera.updateMatrixWorld(true);
mouseDir();
render();

Only setting the camera position works fine:

// WORKS
camera.position.set(500,50,150);
camera.updateMatrixWorld(true);
mouseDir();
render();

Only setting the lookAt position works fine too:

// WORKS
camera.lookAt(new THREE.Vector3(0,0,0));
camera.updateMatrixWorld(true);
mouseDir();
render();

I have also tried to draw the mouse direction after rendering the position and lookAt calls, doesnt work as well.

I am on r74. I tried to figure this out the whole day, hope anybody can tell me which direction to search.

Upvotes: 0

Views: 613

Answers (1)

TheWebDesignerPro
TheWebDesignerPro

Reputation: 91

dir should be the camera position:

var dir = camera.position;
scene.add(new THREE.ArrowHelper(dir, origin));

Upvotes: 0

Related Questions