Question

我有一个很好的场景，当鼠标移过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常量来设置旋转动画，而不是简单地在鼠标移动太快时跳转。

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

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

1 个答案: