How to save the exact position of camera?

Questions
,
1

Hey y’all :raised_hands:

I’m having a bit trouble with camera position. For example, I’m saving rotation and position of camera when the camera is not looking at the center of the scene. And then when I load the saved position and rotation I get different result. I’m guessing I need to save something else than rotation and position but I could not find what exactly.

To reproduce:

  1. Go to: boring-austin-3vu1s - CodeSandbox
  2. Move the camera with “right click and hold and move” gesture (or double touch press and hold and move gesture with touchpad)
  3. Then save the position via “Cmd + S”
  4. Reload the page

What else I need to do to save the exact state/position of camera (even tho it’s not looking at the center)?

2

You also have to save the focus point of OrbitControls (its target property). This property is modulated when you perform panning.

BTW: No need to call updateProjectionMatrix() when restoring the camera’s transformation.

1 Like
3

Hi,

I recently needed to implement this so I thought I’d add to the discussion. To save the camera’s position, zoom, and rotation and the controls target I did the following inside my animation frame:

onTick () {
   
localStorage.setItem("camera.position.x", camera.position.x.toString())
localStorage.setItem("camera.position.y", camera.position.y.toString())
localStorage.setItem("camera.position.z", camera.position.z.toString())
localStorage.setItem("camera.rotation.x", camera.rotation.x.toString())
localStorage.setItem("camera.rotation.y", camera.rotation.y.toString())
localStorage.setItem("camera.rotation.z", camera.rotation.z.toString())
localStorage.setItem("camera.zoom", camera.zoom.toString())

localStorage.setItem("controls.target.x", controls.target.x.toString())
localStorage.setItem("controls.target.y", controls.target.y.toString())
localStorage.setItem("controls.target.z", controls.target.z.toString())
  }

I then retrieved this information in my init function:

camera.position.x = parseFloat(localStorage.getItem("camera.position.x"))
camera.position.y = parseFloat(localStorage.getItem("camera.position.y"))
camera.position.z = parseFloat(localStorage.getItem("camera.position.z"))

camera.rotation.x = parseFloat(localStorage.getItem("camera.rotation.x"))
camera.rotation.y = parseFloat(localStorage.getItem("camera.rotation.y"))
camera.rotation.z = parseFloat(localStorage.getItem("camera.rotation.z"))

camera.zoom = parseFloat(localStorage.getItem("camera.zoom"))

//camera.updateProjectionMatrix()

controls.target.x = parseFloat(localStorage.getItem("controls.target.x"))
controls.target.y = parseFloat(localStorage.getItem("controls.target.y"))
controls.target.z = parseFloat(localStorage.getItem("controls.target.z"))

As @Mugen87 mentioned, it seems that everything works fine without the camera.updateProjectionMatrix() part so I commented it out. Btw, localStorage is a JavaScript function. Hope this is useful to someone. The localStorage.setItem("camera.zoom", camera.zoom.toString()) is needed because otherwise the zoom is not saved

1 Like