Picking objects with raycasters

Question

Trying to pick some objects on click, and I'm trying to use the standard code used in every example:

function onMouseDown(evt) {

    evt.preventDefault();

    canvasAbsoluteHeight = $('canvas').height();
    canvasAbsoluteWidth = $('canvas').width();

    mouseDown = true;
    mouseX = evt.offsetX == undefined ? evt.layerX : evt.offsetX;
    mouseY = evt.offsetY == undefined ? evt.layerY : evt.offsetY;

    var mouse = new THREE.Vector3();
    mouse.x = ( evt.clientX / canvasAbsoluteWidth ) * 2 - 1;
    mouse.y = 1 - ( evt.clientY / canvasAbsoluteHeight ) * 2;
    mouse.z = 0;

    ray = new THREE.Raycaster( mouse, camera );

    var intersects = ray.intersectObjects( objects);
    console.log('intersects', intersects);
    if ( intersects.length > 0 ) {


        console.log('intersects', intersects);
    }

}

objects is an array of THREE.Object3D which should be able to be picked.

I think it may be something connected with the camera. My camera is a child of THREE.Object3D for easier manipulation, and the parent object is not set at origin.

Other thing is that canvas is not fullscreen, which may have something with mouse position? (it is inside a div with some offset from the edges of the page).

See http://stackoverflow.com/questions/28872583/three-js-raycasting-from-a-child-camera-to-the-scene/28873205#28873205 — WestLangley, Dec 11 '15 at 16:24
See http://stackoverflow.com/questions/28675875/threejs-how-to-pick-just-one-type-of-objects/28679672#28679672 — gevaraweb, Dec 15 '15 at 18:10

score 0 · Answer 1 · answered Dec 11 '15 at 10:40

Check this fiddle. There is Picker class that you can use. First of all you have to init this class with camera and domelement

Picker.init(camera,domelement)

and then you have to attach mesh

Picker.attach(mesh)

and after that you have to specify what do you want to do after mosedown/mouseup in Picker methods.

Picking objects with raycasters

1 Answers1