Kugelblitz

いつ何時誰の挑戦でも受ける!

three.js:オブジェクトをクリッカブルにする

three.jsで、何か画面上のオブジェクトをクリックしたら、何か処理を行うようにするにはどうするのか、色々調べてみました。

まだ実装して試してはいませんが、ここを見ると、

DEMO.ms_FilesDND.callback = function() { window.open("http://www.filesdnd.com"); }
DEMO.ms_Clickable.push(DEMO.ms_FilesDND);

みたいにしておいてから、

function onDocumentMouseDown(event) {
    event.preventDefault();
    
    var mouse = new THREE.Vector2(
        ( event.clientX / window.innerWidth ) * 2 - 1, 
        - ( event.clientY / window.innerHeight ) * 2 + 1 );

    DEMO.ms_Raycaster.setFromCamera( mouse, DEMO.ms_Camera );
    var intersects = DEMO.ms_Raycaster.intersectObjects( DEMO.ms_Clickable );    

    if (intersects.length > 0) {  
        intersects[0].object.callback();
    }                
}

こんな感じにすると、オブジェクトをマウスでクリックしたときにコールバック処理を行うことができるみたいですね。

Pocket

他の記事