Edited at

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


OrbitControls

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

// カメラを生成した変数を渡してインスタンスを生成

var controls = new THREE.OrbitControls(camera);

//(中略)

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

とすることで

・左クリック+ドラッグで物体の回転

・ホイール(または中クリック+ドラッグ)で物体の拡大縮小

・右クリック+ドラックで物体の移動

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

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を渡したことと同じになります。


結論

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