解决Three.js中使用OrbitControls导致不能选中DOM的问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012685679/article/details/54342537

THREE.OrbitControls = function ( object, domElement ) {

...

this.domElement = ( domElement !== undefined ) ? domElement : document;

...

var scope = this;

...

var element = scope.domElement === document ? scope.domElement.body : scope.domElement;

...

scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );

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

scope.domElement.addEventListener( 'wheel', onMouseWheel, false );

扫描二维码关注公众号，回复： 4211256 查看本文章

scope.domElement.addEventListener( 'touchstart', onTouchStart, false );

scope.domElement.addEventListener( 'touchend', onTouchEnd, false );

scope.domElement.addEventListener( 'touchmove', onTouchMove, false );

window.addEventListener( 'keydown', onKeyDown, false );

...

｝

最近做关于ThreeJS的毕设，陆陆续续把一些遇到的问题发过来。

在使用OrbitControls.js时，如果按照官方例程初始化如下：

orbitControls = new THREE.OrbitControls(camera);

会发现整个页面随便点哪里拖动都可以触发orbitControl，这将导致我们无法选中其它元素或在input中编辑文字等。现在通过源代码来解释这个问题的成因。在文章开头的源码中可以看到，如果初始化时不传入第二个参数，orbitControl默认监听的是document，自然地整个文档范围内的所有相关事件都会被监听。相应的，解决方法自然是把场景所在的canvas作为第二个参数传进来

orbitControls = new THREE.OrbitControls(camera, renderer.domElement);

即可。