You need to a couple o things to get interactivity in 3D:
get a vector for the mouse position
unproject the mouse vector based on the camera
shot a ray from the camera position, towards the unprojected mouse vector
check what object(s) interesect with that ray and update accordingly.
It might sound complicated, but the code's already there:
function onDocumentMouseDown( event ) {
event.preventDefault();
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 );
}
/*
// Parse all the faces
for ( var i in intersects ) {
intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
}
*/
}
This code above from the canvas_interactive_cubes example that comes with the library. When in doubt, it's always good to check if there's an example that solves the problem already.
发布评论
评论（1）
您需要做一些事情才能获得 3D 交互性：
听起来可能很复杂，但代码已经存在：
上面的代码来自 canvas_interactive_cubes 库附带的示例。
如有疑问，最好检查一下是否已有解决问题的示例。
You need to a couple o things to get interactivity in 3D:
It might sound complicated, but the code's already there:
This code above from the canvas_interactive_cubes example that comes with the library.
When in doubt, it's always good to check if there's an example that solves the problem already.