Adjusting Orbit auto rotate to realign to camera

[mohidmakhdoomi]

Hi, I am using the auto rotate feature of the OrbitControls. The camera looks at 0,0,0 and orbits around the Y axis by default. By default it appears as if the camera is rotating horizontally on the screen.

However when I use the mouse left click to rotate, it seemingly changes the 'viewing angle' of the camera but the rotation continues around the Y axis (green line). Because of this the camera no longer appears to be rotating horizontally on the screen. basically the 'viewing angle' of the camera and the orbit become misaligned.

@vasturiano can you please advise how to adjust the controls/camera such that after every mouse left click the orbit is realigned to match the 'viewing angle' such that the camera always appears to be rotating horizontally on the screen.

I put 'viewing angle' in quotes because i have no idea if thats correct terminology to use but I hope it gets the idea across.
Also apologies if this question is better suited somewhere else.

[vasturiano]

@mohidmakhdoomi thanks for reaching out.

Iiuc, what you are describing is a characteristic of the Orbit controls. It always maintains a north-up orientation, looking at 0,0,0 (by default). The consequence is that if the camera is moved from the equatorial plane it will not longer feel like it's auto-rotating linearly.

I'd suggest to use instead Trackball controls as that one does not have the north-up restriction, so the auto-rotation should feel linear. The main drawback is that it's easier to get lost in orientation since you can easily get turned upside down, but since most graphs don't have a meaningful up-down location this is generally ok.

[mohidmakhdoomi]

@vasturiano thank you for the quick reply! Unfortunately trackball doesn't have an auto rotate while orbit does. I've looked at this example of yours for reference on trying implement rotation using an interval but it also rotates around the Y axis.

https://github.com/vasturiano/3d-force-graph/blob/master/example/pause-resume/index.html

I believe that given the correct parameters to cameraPosition this may work for my use case but I am unsure how to go about it. Maybe I need to brush up on some geometry haha.

            fgRef.current?.cameraPosition({
                x: distance * Math.sin(angle.current),
                z: distance * Math.cos(angle.current)
            });

From your example it seems to be for rotation at a fixed distance around the Y axis, but for my use case my thought is that 1. I would need to use the current camera position instead of distance. 2. Would need to leverage the fact that I want to rotate horizontally around 0,0,0

Would be great if you could you advise on whether I am going about this correctly and if you have suggestions

[mohidmakhdoomi]

Seems one possible solution is here: https://stackoverflow.com/a/42866733

I've implemented it into my code and seems to be working flawlessly with trackball controls even when I use mouse left click to rotate. @vasturiano please let me know if you see any issue with this solution/have any suggestions or solutions.

        rotateTimer.current = setInterval(() => {
            const threeCamera = (fgRef.current?.camera() as PerspectiveCamera)
            const upVec = threeCamera.up.clone()
            const origin = new Vector3(0,0,0)
            threeCamera.parent?.localToWorld(threeCamera.position); // compensate for world coordinate

            threeCamera.position.sub(origin); // remove the offset
            threeCamera.position.applyAxisAngle(upVec, -Math.PI / 600); // rotate the POSITION
            threeCamera.position.add(origin); // re-add the offset

            threeCamera.parent?.worldToLocal(threeCamera.position); // undo world coordinates compensation

            threeCamera.rotateOnAxis(upVec, -Math.PI / 600); // rotate the OBJECT
        }, 10);