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

Question

我想重新创建 Three.js OrbitControl 移动而无需单击和拖动，即简单地使相机跟随鼠标移动。

我试图从头开始重新创建它，但是太费力了，因为问题是相机在三个轴上移动，而不仅仅是两个。我很确定有些人以前做过。

具体来说，我希望相机围绕场景原点移动，并与其保持相同的距离。

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

NOTE: this solution removes ALL library listeners. If you are interested you can enable them again copying them from here to the end of the update method.

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

How to recreate the Three.js OrbitControl movement on mouse move?

javascript

perspectivecamera

three.js