Three.js spelling camera object selection
I am trying to select objects in a scene where I am using a spelling camera. my code snippet is already working, but it is not accurate. I already found answers on stackoverflow but they are outdated or no longer work. here is my onMouseDown code
function onDocumentMouseUp( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
var pos = camera.position;
var ray = new THREE.Raycaster(pos, vector.unproject(camera).sub(camera.position).normalize());
var intersects = ray.intersectObjects(objects);
if (intersects.length > 0) {
console.log("touched:" + intersects[0]);
}
else {
console.log("not touched");
}
}
see http://jsfiddle.net/ujzpe07t/1/
if you hit a few pixels left / right / above / below the cube, it still tells me that the object was affected.
I am using three.js r69.
any hints would be much appreciated. thanks, cheers!
+3
source to share
1 answer
Here is a template to use when drawing (assembling) with a spelling camera or perspective camera:
var raycaster = new THREE.Raycaster(); // create once
var mouse = new THREE.Vector2(); // create once
...
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects, recursiveFlag );
three.js r.84
+9
source to share