Graphics Reference
In-Depth Information
var raycaster = new THREE.Raycaster(
camera.position, vector.sub(
camera.position ).normalize() );
At this point, we can use
THREE.Raycaster
to select objects that are the
position of our mouse.
6. The next step is to either drag an object around if we've already clicked on
one (see steps 7, 8, and 9 for more details on this), or reposition the plane
we created in step 2:
if (selectedObject) {
var intersects =
raycaster.intersectObject( plane );
selectedObject.position.copy(intersects[
0 ] .point.sub( offset ) );
} else {
var intersects =
raycaster.intersectObjects(objects);
if ( intersects.length > 0 ) {
plane.position.copy( intersects[0]
.object.position );
plane.lookAt( camera.position );
}
}
If we've selected an object and are dragging it around, we set the position
of that object based on the position where the ray cast from our mouse
intersects the invisible helper plane using the offset that we calculate in
step 9. If we aren't dragging an object around, and using our ray we de-
termine that we intersect one of the cubes, we move our helper
plane
object to the position of that object and make sure the plane faces the cam-
era (
plane.lookAt(camera.position)
). The object, if we select it, will
move alongside this helper
plane
object.
7. Next, we need to define a function to handle the
onmousedown
events:
