raycasterでクリックイベントの実現

デモ：http://mo49.tokyo/threejs/raycaster2.html

つくったmeshをrayReceiveObjectsに集める。

javascript

var rayReceiveObjects = []; // 光線を受けるオブジェクト配列

for (var i = 0; i < 20; i++) {
    rayReceiveObjects.push( meshs[i] );
}

光線と交わるオブジェクトとしてrayReceiveObjectsを登録し、
mousedownイベントの中でraycasterを実行。

javascript

var raycaster = new THREE.Raycaster(); 
var mouse = new THREE.Vector2();

window.addEventListener( 'mousedown', onDocumentMouseDown, false );
function onDocumentMouseDown( event ) {

    // イベントの伝播の無効化
    event.preventDefault();

    // マウスポインタの位置座標の取得
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; 
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1; 

    // 光線を発射
    raycaster.setFromCamera( mouse, camera );
    // 光線と交わるオブジェクトを収集
    var intersects = raycaster.intersectObjects( rayReceiveObjects );

    // 連想配列をとりだす
    var bookAry = {
        '火花' : 'http://www.amazon.co.jp/dp/4163902309',
        '流' : 'http://www.amazon.co.jp/dp/4062194856',
        '朝が来る' : 'http://www.amazon.co.jp/dp/4163902732',
        '王とサーカス' : 'http://www.amazon.co.jp/dp/4488027512',
        '君の膵臓をたべたい' : 'http://www.amazon.co.jp/dp/4575239054'
    };

    // 交わるオブジェクトが１個以上の場合
    if ( intersects.length > 0 ) {
        // 最も近いオブジェクトの名前をアラート表示する
        alert(intersects[0].object.name + "をご購入ですね？");
        console.log("カメラ位置座標からの距離：" + intersects[0].distance);
        console.log("光線との交差座標(" + intersects[0].point.x + ", " + intersects[0].point.y + ", " + intersects[0].point.z + ")" );
        console.log(intersects[0]);

        for(var i in bookAry){
            if (intersects[0].object.name == i) {
                window.location.href = bookAry[i];
            }
        }
    }
}

参考
three.jsによるHTML5 3Dグラフィックス〈上〉―ブラウザで実現するOpenGL(WebGL)の世界