如何在鼠标移动时重新创建 Three.js OrbitControl 移动? [英] How to recreate the Three.js OrbitControl movement on mouse move?

问题描述

我想重新创建 Three.js OrbitControl 运动，无需点击 &拖动，即简单地让相机跟随鼠标移动.

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

特别是我希望相机围绕场景原点移动，并与它保持相同的距离.

解决方案

我和 OP 有同样的要求.这就是我在 Leeft 的评论的帮助下解决的方法:

1. 更新 OrbitControls.js 以从

   更改函数 handleMouseMoveRotate 的范围

   function handleMouseMoveRotate( event )

   到

   this.handleMouseMoveRotate = 函数(事件)

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

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

   init();动画()；函数初始化(){//设置相机、场景和轨道控制camera = new THREE.PerspectiveCamera( 45, containerWidth/containerHeight );场景 = 新的 THREE.Scene();控件 = 新的 THREE.OrbitControls(camera);//移除默认的 OrbitControls 事件监听器控制.处置()；控制更新()；...//为简洁起见省略:加载模型和渲染器document.addEventListener('mousemove', onDocumentMouseMove, false);}函数 onDocumentMouseMove( 事件 ) {//在 OrbitControls 中手动触发事件control.handleMouseMoveRotate(event);}函数动画(){requestAnimationFrame( 动画 );使成为();}函数渲染(){控制更新()；相机.看(场景.位置)；renderer.render(场景，相机)；}

<块引用>

注意:此解决方案删除所有库侦听器.如果您有兴趣，可以再次启用它们，从 结尾更新方法.

I would like to recreate the Three.js OrbitControl movement without the click & drag, i.e. simply making the camera following mouse movement.

I tried to recreate it from scratch, but it was too much effort as the problem is that the camera moves on three axis, not just two. I'm pretty sure some has done before.

Specifically I would like the camera to move around the scene origin keeping the same distance from it.

解决方案

I had the same requirement as OP. This is how I solved it, with help from Leeft's comments:

1. Update OrbitControls.js to change scope of function handleMouseMoveRotate from

   function handleMouseMoveRotate( event )
   

   to

   this.handleMouseMoveRotate = function ( event )
   

   This is required for you to manually use this method from within your own code.

2. In the JS code which loads the model, use the dispose method to remove the default mouse controls and add your own event handler for mousemove which manually calls 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 移动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！