Вам нужно пару вещей, чтобы получить интерактивность в 3D:
- получить вектор для положения мыши
- Отпроектировать вектор мыши на основе камеры
- выстрелил лучом из положения камеры, в направлении не проецируемого вектора мыши
- проверьте, какие объекты пересекаются с этим лучом, и обновите соответствующим образом.
Может показаться сложным, но код уже есть:
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 );
}
*/
}
Этот код выше из canvas_interactive_cubes примера, который поставляется с библиотекой.
В случае сомнений всегда полезно проверить, есть ли пример, который уже решает проблему.