Three.js的DragControls和OrbitControls实现互斥

Three.js的DragControls和OrbitControls实现互斥

有这么一个问题，我们对一个场景加入了OrbitContrils，而且对一组物体加入了DragControls，当我们拖动物体的时候，场景也会同时被拖动，也就是OrbitContrils和DragControls同时生效了。这篇文章就是来解决这个问题的。
直接上代码。

    //拖拽控制器
    function initDragControl() {
    //这里是给dots这一个对象数组加入了一个拖拽控制器
        dragcontrols = new DragControls( [ ... dots ], camera, renderer.domElement );

	//这里加入了两个监听，‘drag’代表的是物体被拖拽时的状态，需要去执行myrender()
	//‘dragend’代表的是物体拖拽结束的状态，需要去执行后面的函数
        dragcontrols.addEventListener('drag',myrender );
        dragcontrols.addEventListener('dragend',(event)=>{
            renderer.render( scene, camera );
			//物体拖拽完毕，将轨迹控制器开启
            orbitcontrols.enabled = true;
        })
    }

    //轨迹控制器
    function initOrbitControl() {
        orbitcontrols = new OrbitControls(camera, renderer.domElement);
        orbitcontrols.enabled = true;
        camera.position.set( 0, 200, 2000 );
        orbitcontrols.enableDamping = true;
        //是否可以缩放
        orbitcontrols.enableZoom = true;
        //是否自动旋转
        orbitcontrols.autoRotate = false;
        //设置相机距离原点的最远距离
        orbitcontrols.minDistance = 1;
        //设置相机距离原点的最远距离
        orbitcontrols.maxDistance = 3000;

        orbitcontrols.update();
    }

function myrender(event) {
		//将轨迹控制器关闭
        orbitcontrols.enabled = false;
        //下面写你要进行的操作




    }

以上操作大概就是在DragControls生效的时候关闭了OrbitControls，然后DragControls完成的时候来打开OrbitControls。从而来达到互斥的效果