CODEWITHSUNDEEP
javascriptthree.js
Kevin Goedecke
Kevin Goedecke

Reputation: 2013

Three.js rotate boxes towards mouse position doens't work

I have several randomly generated boxes that I want to rotate towards the mouse position. I tried to get the mouse position and then use lookAt(mouse3D)to rotate the boxes towards the mouse coordinates, but they don't change their rotation at all. I don't even want them to rotate towards the mouse position within the 3D space, simply towards the mouse position as it is on the screen.

Currently I get the mouse position like this:

function onDocumentMouseMove( event ) {
            mouse3D = new THREE.Vector3(
                 ( event.clientX / window.innerWidth ) * 2 - 1,
                 - ( event.clientY / window.innerHeight ) * 2 + 1,
                 camera.position.z );
}

Here's an example I found which I wasn't able to apply to my problem: http://mrdoob.github.io/three.js/examples/misc_lookat.html

I created JSFiddle with my current approach:

https://jsfiddle.net/nrub93m7/

Upvotes: 0

Views: 475

Answers (1)

Nate
Nate

Reputation: 1274

I just added this method to your jsfiddle link:

function onDocumentMouseMove( event ) 
{
  mouse3D = new THREE.Vector3( event.clientX, event.clientY, 0);
}

Upvotes: 1

Related Questions