3D object rotates in opposite direction

I have added a codepen here. I have two point A, B. My 3D object is set in between this point. My camera always look at to my object using camera.lookAt() method, and then my object looks at the camera to face the camera always using object.lookAt() method. So camera and object face each other always. Then I calculate an angle from Yaxis to my object inclination (BA) using Yaxis.angleTo(A-B). To see how much my object has deviated from Y axis towards the camera or away from the camera on the objects Local Xaxis. so i set object.rotateOnAxis((1,0,0), angle).
However when the object rotates forwards(towards camera) its fine. But when the object rotates in opposite direction I mean away from camera, after a certian rotation, it doesnt work. It again rotate in forward direction (though my expected rotation should be backward). Any idea why this happens?

I think this is the continuation of this thread (iirc the codepen there didn’t work) ?

As in the previous thread - if you work with axis angles and rotateOnAxis for calculations, you’re limiting yourself to first and second quadrants of the polar coordinates. Beyond a certain threshold, angleTo will flip the angle to a mirrored value.

Maybe this example can clarify the issue a bit better in a visual way - the green arrow is using getWorldDirection (ie. matrix / quaternion transform) for calculations, while the blue arrow is using rotateOnAxis and angleTo for calculations. Note what happens to the blue line when angle goes beyond Q1.


To help a bit more in a practical way - could you update your codepen to show the rotation? Right now it seems static, and it’s not clear where the rotation could be enabled and tested.

1 Like

Hi I have updated the codepen with more data. Actually without 3D model its hard to visualize the rotation, since the rotation is towards the viewer/away from the viewer. See that, i used a texture of a shovel. Handle of the shovel is red point, and head of the shovel is green point. First the hand of the shovel incline towards the viewer so red point comes in front of the green point. And then it gradually goes backward (opposite of the viewr) and finally goes back of the green point. But this backward rotation I cant see in my object. When the red point go gradually backward, my object seems rotate forward(instead of backward).

Hi, I have seen the example here(https://codepen.io/mjurczyk/pen/oNQMMvM?editors=0010)
I understand the limitation. I think I am facing the same. My angle is okay, but after a certain threshold it is being mirrored. Later I used quaternion,
const quaternion = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(1, 0, 0), theta)
object.quaternion.copy(this.camera.quaternion).multiply(quaternion)

But still i think its not okay? how i overcome this issue?