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

我想重新创建Three.js OrbitControl移动，而无需单击并拖动，即只需使相机跟随鼠标移动即可

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

---

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

我与OP有相同的要求。这就是我如何解决它的方法，借助于的注释：

更新OrbitControls.js以更改handleMouseMoveRotate的功能范围

function handleMouseMoveRotate( event )

到

这是您从自己的代码中手动使用此方法所必需的

在加载模型的JS代码中，使用

dispose

方法删除默认的鼠标控件，并为手动调用

HandleMouseMove旋转的
mousemove
添加自己的事件处理程序：

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

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

---

为了解决这个问题，你必须了解轨道控制是如何工作的：它使用一个目标和一个摄像机，基本上是一个矢量。

OrbitControls

的输入对该向量“摄影机->目标”进行计算。例如，旋转将采用该矢量的当前角度（相对于某个轴），将该角度修改所需的量，然后将相机移动到矢量的新端点，并将其朝目标旋转。向量的长度保持不变，你到目标的距离也保持不变。我明白你的意思，但我如何判断新的位置呢？我一直在搜索，但没有看到输入新向量的方法。我已经看到它确实删除了mousemove事件。我是否应该破解/分叉此脚本以生成新版本？您必须进行一些更改以使其执行您想要的操作，例如删除单击检测，使mousemove和touchmove事件始终处于活动状态。另外，请查看

rotateLeft

和

rotateUp

方法（它们也处理右下方向），这些方法已经用于在

handleMouseMoveRotate

中更改向量的角度。感谢您为找到解决方案付出了一些努力。我还没有对它进行测试，但是我看到了

dispose（）

，并且

update（）

方法没有将它们设置回原来的状态。此monkey补丁是否会删除OrbitControl功能（如滚动缩放）？

dispose（）

是否会删除本机OrbitControl功能（如缩放和滚动）。当

update（）

方法运行时，它们不会被添加，这意味着您可以创建自己的事件处理程序方法-在本例中，调用我们感兴趣的唯一鼠标控件-

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