CODEWITHSUNDEEP
javascriptcanvas3dthree.js
Agent Zebra
Agent Zebra

Reputation: 4550

three.js: Smoothly spin an object opposite to OrbitControls camera.rotation.y

Using OrbitControls to spin a scene in three.js, I want a planeMesh object to always face the camera. I'm trying the following but it just spins like crazy (and seems processor intensive), but it kind of looks like it tries to stay front facing when I orbit the scene (move the camera) with the mouse. I 'm trying to get it to only reorient itself slowly when the camera moves. What am I doing wrong here?

Here's a plunker

Here's the relevant JS:

function animate() {
   requestAnimationFrame( animate );

   planeMesh.rotation.y -= Math.PI /camera.rotation.y;

   render();
}

I also tried the following (did not work also):

   function animate() {
     requestAnimationFrame( animate );
     var a = camera.rotation.y; 
     var b = camera.rotation.y; 

     if (a == b) {
       planeMesh.rotation.y -= Math.PI /camera.rotation.y;
       } else {    
     }

     render();
     a = camera.rotation.y; 
}

** Edit I want the camera and planeMesh to stay in the current relationship with each other. Here are the starting rotations: planeMesh Rotation y = 3.141592653589793 camera Rotation y = -0.06894749489830237

However, I think camera is using THREE.Euler, and planeMesh is using Math.PI to rotate, so... are these two rotation measurements using different systems?

Surely if I can get the difference of the starting point, and then change the planeMesh rotation.y only if the difference is greater, and but that greater difference, than the starting difference, then I will have accomplished my goal. But how do I do this? and do I have to translate these two systems of measurement somehow? When I spin the scene the camera does seem to be using a different measurement scale.

Upvotes: 0

Views: 1305

Answers (1)

bjorke
bjorke

Reputation: 3305

The easiest way to ensure that a plane always face the camera is to simply attach it to the camera rather than the scene, e.g. camera.add(planeMesh); and position the plane relative to the camera. Then their rotations will always be naturally aligned.

Alternatively, if both are the children of the same parent (typically the scene), use planeMesh.lookAt(camera.position);

Upvotes: 2

Related Questions