鼠标移动时旋转 Three.js 场景答案

【问题标题】：Rotate Three.js scene on mouse move鼠标移动时旋转 Three.js 场景
【发布时间】：2018-06-09 13:19:13
【问题描述】：

我有一个场景重新渲染得很好，当鼠标在 DOM 上移动时，需要让它水平和/或垂直旋转。我可以通过更改场景rotation.y 属性来进行水平旋转：

const step = 0.005;

let halfWindowWidth = window.innerWidth / 2;
let target = (Math.PI / halfWindowWidth * mouseX / 2) - 0.785398;

if (target < y) {
    if (y - (step * 2) > target) {
        target = y - (step * 2);
    }
} else if (target > y) {
    if (y + (step * 2) < target) {
        target = y + (step * 2);
    }
}

scene.rotation.y = target;

我知道也许我需要在 x 和 z 轴上工作以使其垂直旋转，但我不知道我应该做什么计算。

当鼠标远离 DOM 中心时，必须进行旋转，从 -90˚ 到 90˚（总共 180˚）。我使用step 常量来设置旋转动画，而不是在鼠标移动过快时简单地跳转。

【问题讨论】：

无需旋转场景.. 只需旋转相机即可。 :(

标签： three.js rotation geometry

【解决方案1】：

看看下面的例子

http://threejs.org/examples/#misc_controls_orbit http://threejs.org/examples/#misc_controls_trackball

还有其他不同鼠标控件的示例，但是这两个都允许相机围绕一个点旋转并使用鼠标滚轮放大和缩小，主要区别是 OrbitControls 强制相机向上方向，而 TrackballControls 允许相机倒转。

您所要做的就是在您的 html 文档中包含控件

<script src="js/OrbitControls.js"></script>

并将这一行包含在您的源代码中

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

【讨论】：