在three.js中获取鼠标单击点的3D坐标

我是THREE.js的新手.

我试图在Canvas中鼠标点击对象(不是简单的对象:Box,Sphere,..)来获得点的3D坐标.

详细地说,我正在使用3D对象查看器 - 我有摄像头(THREE.PerspectiveCamera),鼠标控件(旋转,缩放,移动),添加/删除对象(我自己的对象,使用加载器为THREE.js加载)在场景中,..我想添加一个函数,它可以获得3D中点击点的3D坐标.

确切地说,我想要一条光线终点的坐标 - 从鼠标点击camera_near_window开始到结束对象的点,我点击了..

我尝试了很多方法:

在z = 0平面上获得点的坐标 - 它工作正常,但它在z = 0平面上并且它不是我需要的,因为我有OrbitControls ..

THREE.js示例 - 可点击的对象 - 它使用CanvasRenderer(不是WebGLRenderer)并且适用于一些小对象(但适用于我的项目):当我加载许多对象时,浏览器崩溃(CanvasRenderer需要比WebGLRenderer多5倍的内存).

"如何从鼠标点击坐标获取WebGL 3d空间中的对象" - 我也尝试了这个,但raycaster.intersectObjects没有发现,intersects是一个空数组(也许它只适用于像box,sphere,......这样的简单对象).

任何人都可以给我看一下3D点击对象点击点的3D演示代码,请...？

所以,我认为这个问题对某人有用,我会自己回答(我会写下我的决心):

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;
};