Three.js OrbitControls 平移和场景旋转答案

【问题标题】：Three.js OrbitControls panning and scene rotationThree.js OrbitControls 平移和场景旋转
【发布时间】：2020-08-14 13:35:44
【问题描述】：

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

在相机平移之前一切正常。在https://stackblitz.com/edit/threejs-env-rotate 自己尝试一下，并在使用滑块旋转场景时观察相机抖动。

如何解决抖动？我似乎无法找到可以解决这个问题的算法。我尝试旋转 controls.target，但可能我的 3D 数学已关闭。

【问题讨论】：

我查看了您的演示，但没有看到您所说的相机抖动。您在此处发布演示后更新了吗？

标签： three.js

【解决方案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

Live Example - JSFiddle

【讨论】：

这正是我想要实现的，它就像一个魅力，所以我要接受这个答案。谢谢。