Reputation: 765
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.).
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
Reputation: 91
dir should be the camera position:
var dir = camera.position;
scene.add(new THREE.ArrowHelper(dir, origin));
Upvotes: 0