3D object is seen from opposite direction from camera

Questions
, , ,
1

Hi all. Hope for a good day. I am facing a weird orientation of my object(not all but only for some case).
I have a 3D object loaded from a glb file(created in blender). My object is looking at -Y of blender so which is equivalent to looking at +Z in 3JS (since their axis lable is different).
Now I have two 3D point B, A. I position my object at B (also the center of rotation for my object) and scale it upto A. So my object is not BA. In the animation loop these points are continuously updating. And I continuously calculate my camera position from B, my camera is not fixed it moves along B. I have two camera and their direction from B are Cs(side camera direction to see objects Side view), and Cf(front camera direction to see objects Front View).
So i calculate the two camera position using these direction vector and B. And after that I set camera lookAt vector to B.
Something like this,
camera.position.copy(B+Cf)
camera.lookAt(B)

Now my object rotates on its local X axis always. So to find the rotation of the object. I use two thing.

  1. Set object.lookAt(camera.position) to always face the camera
  2. Find angle between (Cs x Cf) and AB vector and apply object.rotateOnAxis(Xaxis, angle)

However the problem is, almost 95% it works. But sometimes it seems that the rotation is in opposite direction. (Based on side view camera sees). My side view uses a 2D sprite instead of 3D object and calculate the object rotation simple by Math.atan2(AB.y, AB.x)

Now the problem is in some points, my side view sees the object rotating in one direction, and front canera sees it exactlt opposite direction. The rotation amount is same but direction is opposite. And interestingly, if I see the points in the screen the rotation seems correct, i mean in data space the rotation is okay, the only problem i think is the front camera perspective. It seems like the camera is sitting on the opposite side from its actual position.
Is my camera positioning and looking At is okay? And my object positionig and lookingAt function + rotation function is correct? I think I am missing some fundamental aspects.

20230722_110657
20230722_1106571920×2560 189 KB

2

Could you pls create a codepen / codesandbox replicating the issue in more interactive way? Right now it’s formulated a little like a complex math exercise, and math exercises are hard :smiling_face_with_tear: (No need to copy the entire app, just replicate the specific part that’s going wrong.)

Angles are tricky in 3D - it’s safer to use Quaternions combined with lookAt, otherwise you may find yourself locked in quadrant 1 and 2 of the polar coordinates (3 and 4 will just be a mirrored angle.)

Also a tiny side note - in 99.9% of cases, with exception of shaders, if you’re doing any kind of actual math like that in three.js - you’re most likely overcomplicating the code.

3

I tried a codeopen here, however for some reason it seems not working in the codeopen. Actually my data is a large set(real data). Without actual data, hard to find the issue for anyone. So i just used a subset of my data here. It seems not updating the data.

4

I have added a codeopen here. The finding is interesting. In codeopen the output seems okay, the rotation and points position seems fine. But the same code, same data in my rendering UI seems opposite (visually)