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);

即可。