成轨道控制让鼠标不用点击即可跟随 three.js

Question

有没有人有一份代码，可以在three.js中强制使用轨道控制器（Orbit Controls）在鼠标移动时移动场景而不是点击+鼠标移动？我尝试了这个线程中的答案：如何在鼠标移动时重新创建Three.js的OrbitControl运动，但不幸的是它会抛出“Maximum call stack size exceeded error”的错误，并且画布中什么也看不到…

我还尝试改变了一下：

scope.domElement.addEventListener( 'mousedown', onMouseDown, false );

to

scope.domElement.addEventListener( 'mousemove', onMouseDown, false );

在OrbitControls.js文件中，但在移动时似乎会冻结并不时停止...有没有人解决过这个问题呢？先感谢您！

- user3112634

---

你不能像这个例子中那样使用FirstPersonControls吗？https://threejs.org/examples/webgl_shadowmap - Mugen87

还有一个问题是光标在窗口边缘停止移动...(但你可以通过指针锁定来解决这个问题)。 - Ethan Hermsey

Answer 1

这个怎么样；https://jsfiddle.net/EthanHermsey/e3b501cw/51/

document.addEventListener('mousemove', function(e){
    let scale = -0.01;
    orbit.rotateY( e.movementX * scale );
    orbit.rotateX( e.movementY * scale ); 
    orbit.rotation.z = 0; //this is important to keep the camera level..
})
    
//the camera rotation pivot
orbit = new THREE.Object3D();
orbit.rotation.order = "YXZ"; //this is important to keep level, so Z should be the last axis to rotate in order...
orbit.position.copy( mesh.position );
scene.add(orbit );

//offset the camera and add it to the pivot
//you could adapt the code so that you can 'zoom' by changing the z value in camera.position in a mousewheel event..
let cameraDistance = 1;
camera.position.z = cameraDistance;
orbit.add( camera );

使用一个作为相机枢轴的Object3D。它会随着鼠标移动而旋转。

编辑：我找到了自己的答案，但是找到了一种方法。你可以通过鼠标位置启用自动旋转，但你必须将OrbitControl的handleMouseMoveRotate函数设置为公共的，方法是复制该函数并将其设置为this.handleMouseMoveRotate。 然后，在设置中添加事件监听器，并将事件发送到控件。

document.body.addEventListener( 'mousemove', ( e )=>{
    controls.handleMouseMoveRotate( e ) 
});

确保设置 controls.enableRotate = false;

- Ethan Hermsey

---

我最终编辑了OrbitControls.js，并用一个俏皮的鼠标悬停监听器替换了鼠标按下功能。 - user3112634

我在查找如何在不点击的情况下旋转轨道控制器，结果发现了自己的答案... "WTF..." - Ethan Hermsey