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

Question

我是 THREE.js 的新手。

我正在尝试通过鼠标单击 Canvas 中的对象（不是简单的对象：Box、Sphere、..）来获取点的 3D 坐标。

详细地说，我正在使用 3D 对象查看器 - 我有相机 (THREE.PerspectiveCamera)、鼠标控件（旋转、缩放、移动）、添加/删除对象（我自己的对象，使用加载器为 THREE.js 加载) 在场景中，.. 我想添加一个函数，它获取 3D 中单击点的 3D 坐标。

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

我尝试了很多方法来做到这一点：

• Getting coordinates of point on z=0 plane -- 它工作正常，但它在 z=0 平面上，这不是我需要的，因为我有 OrbitControls..

• THREE.js example - clickable objects -- 它使用 CanvasRenderer（不是 WebGLRenderer）并适用于一些对象（但适用于我的项目）：当我加载许多对象时浏览器崩溃（CanvasRenderer 需要比 WebGLRenderer 多 5 倍的内存）。

• "How to get object in WebGL 3d space from a mouse click coordinate" - 我也试过这个，但raycaster.intersectObjects 什么也没找到，intersects 是一个空数组（也许它只适用于盒子、球体等简单对象）。

谁能给我看一下演示代码，它可以获取 3D 中单击对象的单击点的 3D 点坐标，好吗？

Answer 1

所以，由于我认为这个问题对某人有用，我会自己回答（我会写下我的决心）：

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