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

Posted 2021-04-17

我有一个很好的场景，当鼠标在DOM上移动时需要让它水平和/或垂直旋转。我能够通过changind场景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常量来旋转动画，而不是简单地在鼠标移动太快时跳转。

答案

看看下面的例子

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 );