Graphics Reference
In-Depth Information
document.onmousedown = function(event) {
...
};
8. Now, let's look at what to fill in for the
onmousedown
event:
var mouse_x = (event.clientX /
window.innerWidth)* 2 - 1;
var mouse_y = -(event.clientY /
window.innerHeight)* 2 + 1;
var vector = new THREE.Vector3(mouse_x,
mouse_y, 0.5);
projector.unprojectVector(vector,
camera);
var raycaster = new
THREE.Raycaster(camera.position,
vector.sub(camera.position).normalize());
var intersects =
raycaster.intersectObjects(objects);
We once again use
THREE.Raycaster
to determine whether an object in-
tersects with a ray cast from the position of our mouse.
9. Now that we know the intersects, we can use them to select the object we're
interested in:
if (intersects.length > 0) {
orbit.enabled = false;
selectedObject = intersects[0].object;
// and calculate the offset
var intersects =
raycaster.intersectObject(plane);
offset.copy(intersects[0].point).sub(plane.position);
}
As you can see in this snippet, we first disable the
orbit
controller (as we
want to drag the object around and not rotate the scene). Next, we assign the
