Threejs Mouse

threejs-mouse.png

マウスクリックで後から描画オブジェクトを追加する

ポイント

function onDocumentMouseDown( event ) {
                event.preventDefault();
                 var mouse = new THREE.Vector2();
                //ここで画面右上(1.0,1.0) 左下(-1.0,-1.0)になるような座標に変換する
                mouse.x = ( event.clientX / width ) * 2 - 1;
                mouse.y = - ( event.clientY / height ) * 2 + 1;
//正投影なのでとりあえずzはニアークリッピング面にする
    var pos= new THREE.Vector3(mouse.x, mouse.y , 0.0);
    // pos はスクリーン座標系なので、オブジェクトの座標系に変換
    pos.unproject(camera);
    var geometry =  new THREE.Geometry();
    var vertex = new THREE.Vector3();
    vertex.x = pos.x ;
    vertex.y = pos.y ;
    vertex.z = pos.z;
    geometry.vertices.push( vertex );
 
    var material = new THREE.PointsMaterial({ size:0.8,color:0xff0000});
    var points = new THREE.Points(geometry, material);
    scene.add(points);
}
Bibliography

サポートサイト Wikidot.com