Question

我想重新创建Three.js OrbitControl运动而不需要点击＆amp;拖动，即只需在鼠标移动后制作相机。

我试图从头开始重新创建它，但是因为问题在于摄像机在三个轴上移动而不仅仅是两个轴，所以需要付出太多努力。我很确定以前有人做过。

具体来说，我希望相机在场景原点周围移动，保持距离相同。

Answer 1

我和OP的要求相同。在Leeft的评论帮助下，这就是我解决的方法：

更新 OrbitControls.js ，从
更改功能handleMouseMoveRotate的范围
```
function handleMouseMoveRotate( event )
```
到
```
this.handleMouseMoveRotate = function ( event )
```
这是您从您自己的代码中手动使用此方法所必需的。

在加载模型的JS代码中，使用dispose方法删除默认的鼠标控件，并为mousemove添加您自己的事件处理程序，该事件处理程序将手动调用handleMouseMoveRotate：

init();
animate();

function init() {
    // Set up Camera, Scene and OrbitControls
    camera = new THREE.PerspectiveCamera( 45, containerWidth / containerHeight );
    scene = new THREE.Scene();
    controls = new THREE.OrbitControls(camera);

    // Remove default OrbitControls event listeners
    controls.dispose();
    controls.update();

    ... // omitted for brevity: Load model and Renderer

    document.addEventListener('mousemove', onDocumentMouseMove, false);
}

function onDocumentMouseMove( event ) {
    // Manually fire the event in OrbitControls
    controls.handleMouseMoveRotate(event);
}

function animate() {
    requestAnimationFrame( animate );
    render();
}

function render() {
    controls.update();
    camera.lookAt( scene.position );
    renderer.render( scene, camera );
}

注意：此解决方案删除所有库侦听器。如果您有兴趣，可以再次启用它们，将它们从here复制到update method的末尾。

如何在鼠标移动时重新创建Three.js OrbitControl运动？

1 个答案: