Get mouse clicked point's 3D coordinate in three.js

Question

I'm new in THREE.js.

I'm trying to get 3D coordinates of point on mouse click on the object (not simple objects: Box, Sphere,..) in Canvas.

In detail, I'm working with 3D objects viewer - I have camera (THREE.PerspectiveCamera), mouse controls (rotate, zoom, move), add/remove objects (my own object, loaded using loaders for THREE.js) in scene,.. And I want to add a function, which gets 3D coordinates for clicked point in 3D.

Exactly, I want coordinates of the end point of a ray - begining from mouse click on the camera_near_window and ending to the object's point, I've clicked on..

I tried a lot of ways to do it:

Getting coordinates of point on z=0 plane -- It works fine, but it is on z=0 plane and it is not that I need, cause I have OrbitControls..
THREE.js example - clickable objects -- It uses CanvasRenderer (not WebGLRenderer) and works for a little objects (but works for my project): browser crashes when I load many objects (CanvasRenderer needs 5x more memory then WebGLRenderer).
"How to get object in WebGL 3d space from a mouse click coordinate" - I tried this one too, but raycaster.intersectObjects found nothing, intersects was an empty array (maybe it works for only simple objects like box, sphere,..).

Can anyone show me the demo code which gets 3D point coords for clicked point of clicking object in 3D, please..?

See this answer for how to use Raycaster. In your case, you likely want to set the recursiveFlag to true: raycaster.intersectObjects( objects, true ); — WestLangley
Oh, this is what I was looking for. raycaster.intersectObjects(objects, true) got me an array and the first record had a point parameter, which I needed, thanks.. — GuRAm
Use the pattern in the answer I linked to. Do not instantiate a new raycaster with each click. — WestLangley
Ok. As you said, I declared Raycaster (var rayCaster = new THREE.Raycaster();) next to camera declaration, and then I use set (rayCaster.set(camera.position, vector.sub(camera.position).normalize());) every mouse click; is it right? — GuRAm
I suggested you follow the pattern in the answer I linked to. You do not appear to have done that. But it is up to you. — WestLangley

GuRAm GuRAm · Accepted Answer · 2016-01-10T10:08:11

So, as I think this question is useful for someone, I'll answer it myself (I'll write my resolve):

var renderer, canvas, canvasPosition, camera, scene, rayCaster,  mousePosition;

function init() {
    renderer = new THREE.WebGLRenderer({ antialias: false });
    canvas = renderer.domElement;
    canvasPosition = $(canvas).position();
    camera = new THREE.PerspectiveCamera(20, $(canvas).width() / $(canvas).height(), 0.01, 1e10);
    scene = new THREE.Scene();
    rayCaster = new THREE.Raycaster();
    mousePosition = new THREE.Vector2();

    scene.add(camera);

    var myObjects = new THREE.Object3D();
    // myObjects.add( your object );
    // myObjects.add( your object );
    // myObjects.add( your object );
    myObjects.name = 'MyObj_s';
    scene.add(myObjects);
};

function getClicked3DPoint(evt) {
    evt.preventDefault();

    mousePosition.x = ((evt.clientX - canvasPosition.left) / canvas.width) * 2 - 1;
    mousePosition.y = -((evt.clientY - canvasPosition.top) / canvas.height) * 2 + 1;

    rayCaster.setFromCamera(mousePosition, camera);
    var intersects = rayCaster.intersectObjects(scene.getObjectByName('MyObj_s').children, true);

    if (intersects.length > 0)
        return intersects[0].point;
};

Get mouse clicked point's 3D coordinate in three.js

1 Answers