Three.js OrbitControls平移和场景旋转

Question

我需要旋转环境。由于three.js不支持立方体环境贴图的旋转，我将采用最简单的方法，修改scene.rotation.y，正如three.js的贡献者们所建议的那样。

一切都很顺利，直到相机被平移。您可以在此处自行尝试：https://stackblitz.com/edit/threejs-env-rotate，并注意使用滑块旋转场景时相机的晃动。

我该如何解决这种晃动？我似乎找不到能解决这个问题的算法。我尝试旋转controls.target，但可能我的三维数学知识不足。

- bstst

---

我看了你的演示，但是我没有看到你所说的相机抖动。你在发布后更新了演示吗？ - M -

Answer 1

您遇到的问题是因为controls.target不受scene.rotation影响，因此摄像机试图跟随指定的目标而发生摆动。这意味着您还应该将相同的旋转应用于controls.target。

但这还不够。当您直接将相机附加到经过变换的场景中时，相机的矩阵会改变，但position、rotation和scale却没有改变。这使得OrbitControls的行为进一步偏离预期的结果。

我的建议是避免将相机附加到场景中，而是随着场景旋转相机的位置和控制目标。

const radians = e.target.value * Math.PI / 180
controls.target.applyAxisAngle( camera.up, radians - scene.rotation.y )
camera.position.applyAxisAngle( camera.up, radians - scene.rotation.y )
scene.rotation.y = radians

JSFiddle实时演示

- ScieCode

---

这正是我想要实现的，而且它运行得非常好，所以我将接受这个答案。谢谢。 - bstst