Saving and restoring camera state when using OrbitControls

Questions
1

In this example the state of the camera is saved and immediately restored one second after the controls last changed the camera.

const loader = new THREE.ObjectLoader()
camera = loader.parse(camera.toJSON())
controls = new OrbitControls(camera, renderer.domElement)

Rotation and zoom works as expected. But if you pan the camera using the right mouse button and wait for a second, the state is not correctly restored. The camera looks at the center of the viewport again, and is moved backwards a bit(?).

How can I correctly store and restore the complete and exact state of the camera?

(In my actual app, the restoring is done from localStorage when the apps starts.)

2

I found the solution. You have to save and restore the OrbitControls’ target point as well, otherwise the camera will look at the default target point.

1 Like