Three.js、今日はcanvas_interactive_cubes.htmlを見る

やっぱりキーはどこがクリックされたかを調べるところ。 onDocumentMouseDownの中身： 
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( objects );
if ( intersects.length > 0 ) {
 intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
 var particle = new THREE.Particle( particleMaterial );
 particle.position = intersects[ 0 ].point;
 particle.scale.x = particle.scale.y = 8;
 scene.add( particle );
}
こんな感じ？：
  • vectorでチェックする位置を指定する
  • rayでcameraとvectorの位置関係を把握させる
  • ray.intersectObjectsでチェックした位置にかかる対象物を取得する
  • そのうちの一番手前の対象物intersects[0]のpointに粒子を置く
intersects[i].pointはcameraとvector、それぞれの位置の延長線と対象物が交わった位置なのかな？
2012/07/16 15:55
タグ