Three.jsでマウスクリックしてオブジェクト上の位置情報を取得する

Three.js（r74）のオブジェクトをマウスでクリックしたときにオブジェクト上の位置を取得する方法を調べたので、手順をまとめておく。

１．画面上でマウスクリックした位置の取得
javascriptで、typeに「mousedown」を指定してリスナー登録すると、指定した関数内で画面上でマウスクリックしたX、Y座標を取得できる。

document.addEventListener( 'mousedown', clickPosition, false );

function clickPosition( event ) {
// X座標
var x = event.clientX;
// Y座標
var y = event.clientY;
}

画面がスクロールする場合は、clickPositionで以下の処理も必要。

var rect = event.target.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;

２．取得した座標を-1~1の範囲に正規化する

var mouse = new THREE.Vector2();
mouse.x =  ( x / window.innerWidth ) * 2 - 1;
mouse.y = -( y / window.innerHeight ) * 2 + 1;

３．Raycasterでオブジェクト取得

// Raycasterインスタンス作成
var raycaster = new THREE.Raycaster();
// 取得したX、Y座標でrayの位置を更新
// cameraは作成済みのThree.jsのカメラ
raycaster.setFromCamera( mouse, camera );
// オブジェクトの取得
// sceneは作成済みのThree.jsのシーン
var intersects = raycaster.intersectObjects( scene.children );

intersectObjectsはオブジェクトの配列を返す。

４．取得したオブジェクトから位置情報を取得

// WEBコンソールにオブジェクト上の座標を出力
console.log( 'x座標=%f', intersects[0].point.x );
console.log( 'y座標=%f', intersects[0].point.y );
console.log( 'z座標=%f', intersects[0].point.z );
}

 

• サンプルの表示