Three.js OrbitControls 平移和场景旋转

Question

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

在相机平移之前，一切正常。在这里亲自尝试https://stackblitz.com/edit/threejs-env-rotate并在使用 slider 旋转场景时观察相机摆动。

我该如何补救抖动？我似乎无法找到可以解决这个问题的算法。我尝试旋转 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

Live Example - JSFiddle