Three.js OrbitControls摇摄和场景旋转

Question

我需要改变环境。由于three.js不支持多维数据集env旋转，所以我采用最简单的方法修改scene.rotation.y，就像three.js贡献者所建议的那样。

在摄像机被平移之前，一切都很好。在这里自己试一试，https://stackblitz.com/edit/threejs-env-rotate，当场景使用滑块旋转时，观察摄像机的抖动。

我该如何补救这种晃动呢？我似乎找不到解决这个问题的算法。我试着旋转controls.target，但也许我的3D数学已经过时了。

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