OrbitControls.jsのクリックイベント制御

#OrbitControls
OrbitControlsはthree.jsの便利なクラスであり、OrbitControls.jsをscriptタグで読むことで使えます。

// カメラを生成した変数を渡してインスタンスを生成
var controls = new THREE.OrbitControls(camera);

//（中略）

controls.update(); // 必ずrenderer.render()の前にupdateメソッドを呼ぶ
renderer.render(scene, camera);

とすることで
・左クリック+ドラッグで物体の回転
・ホイール（または中クリック+ドラッグ）で物体の拡大縮小
・右クリック+ドラックで物体の移動

の３つがブラウザ上で自由に行えるようになります。さらに、

controls.autoRotate = true;

とすれば、物体が自動で回転するようになります。このようにOrbitControlsは非常に便利です。

#問題
クリックイベントが全てOrbitControlsに紐づき、同一画面上でその他のクリック操作が行えない。
具体的には、テキストボックスをThree.jsを動かすcanvasの外に置いたが、OrbitControlsが反応するばかりで、テキストボックスにカーソルが当たらなかった。

#解決
当初、three.jsで描画を行っているcanvasのmouseout, mouseoverイベントで無理やり解決していました（今考えるとアホとしか思えません。）が、masato_makino さんのコメントの通り、

// var canvas = document.getElementById('canvas');
var controls = new THREE.OrbitControls(camera, canvas);

とdomElement(今回であれば、canvas)を第二引数として渡してあげればよいだけでした。
第二引数を省略するとdocumentを渡したことと同じになります。

#結論
もっとドキュメントを読むべき。