Three.jsでカーソルとの衝突判定する方法

Three.jsにはRaycasterという便利なものがついており、これを使って視線衝突を判定することができる。

まず画面上でのマウスの位置をベクトルに変換する

var projector = new THREE.Projector();
var mouseX = e.clientX -getElementPosition(renderer.domElement).left;
var mouseY = e.clientY - getElementPosition(renderer.domElement).top;
var x = (mouseX / renderer.domElement.width) * 2 - 1;
var y = -(mouseY/renderer.domElement.height) * 2 + 1;
var vector = new THREE.Vector3(x, y, 1);
projector.unprojectVector(vector, camera);

次にRaycasterを作成する。

var vector = 
var ray = new THREE.Raycaster(
            camera.position,
            vector.sub(camera.position).normalize());
// 視点位置から対象オブジェクトへのベクトル

var intersects = ray.intersectObjects(BB.eventMeshList);

このintersects[i].objectに衝突したオブジェクトのmeshが入っているのでこれを好きなように使えばよい。

参考：http://www.yomotsu.net/wp/?p=600