Orbitcontrols - 如何加载上次的视图位置和旋转

Question

使用orbitalcontrols时，我该如何保存和加载上次的视图位置和旋转？当我的3D页面刷新时，我希望将页面加载到上次的视图，而不是返回到默认的位置、缩放和旋转。我正在使用three.js版本71。谢谢，

Jim

- user3661557

---

我遇到了同样的问题。我更新了轨道控制类并返回和存储了平移角度。但是在那之后，您将面临下一个问题，即在用户离开页面时设置何时存储最后相机坐标的时间。我在解决这个问题的阶段停止了，并且在开始时将相机保留在默认位置。 - undefined

Answer 1

const loadControls = (controls) => {
  const stateJSON = localStorage.getItem(`orbitControls`);

  if (stateJSON) {
    const { target0, position0, zoom0 } = JSON.parse(stateJSON);
    controls.target0.copy(target0);
    controls.position0.copy(position0);
    controls.zoom0 = zoom0;
    controls.reset();
  }
};

const saveControls = (controls) => {
  controls.saveState();
  const { target0, position0, zoom0 } = controls;
  const state = { target0, position0, zoom0 };
  localStorage.setItem(`orbitControls`, JSON.stringify(state));
};

const controls = new OrbitControls(camera, renderer.domElement);

document.addEventListener(`visibilitychange`, () => {
  saveControls(controls);
});

- David Braun

---

你也可以使用const { target, position, zoom } = controls;而不使用controls.saveState()，这样可以得到相同的结果，而无需在内部保存控制状态。 - undefined