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 );
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);
即可。