Three.js : rev 73
My current method for detecting object intersections in the 3D world with mouse clicks (orthographic setup) is as follows:
function onDocumentMouseDown(event) {
event.preventDefault();
console.log("Click");
var mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
var raycaster = new THREE.Raycaster();
// update the picking ray with the camera and mouse position
raycaster.setFromCamera(mouse, camera);
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects(scene.children);
console.log("intersects: " + intersects.length);
for (var i = 0; i < intersects.length; i++) {
console.log(intersects[i].point);
}
}Unfortunately, I have noticed that the intersection detection is not very accurate, as it only works when clicking near the top left of the object's box.
jsFiddle: I would appreciate any assistance in understanding why this behavior is occurring.
Additionally, I am looking to determine the relative position of the click in 3D space when no object is selected - whether it is to the left, right, or below the box. Is it possible to utilize the ray itself to calculate this information?