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

Posted 2023-02-27

【中文标题】在three.js中获取鼠标点击点的3D坐标

【英文标题】：Get mouse clicked point's 3D coordinate in three.js

【发布时间】：2016-04-14 09:30:12

【问题描述】：

我是 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 点坐标，好吗？

【问题讨论】：

查看this answer了解如何使用Raycaster。在您的情况下，您可能希望将 recursiveFlag 设置为 true：raycaster.intersectObjects( objects, true );

哦，这就是我要找的。 raycaster.intersectObjects(objects, true) 给我一个数组，第一条记录有一个点参数，我需要它，谢谢..

使用我链接到的答案中的模式。不要在每次点击时都实例化一个新的光线投射器。

好的。正如你所说，我在相机声明旁边声明了 Raycaster (var rayCaster = new THREE.Raycaster();)，然后每次鼠标单击都使用 set (rayCaster.set(camera.position, vector.sub(camera.position).normalize());)；对吗？

我建议您按照我链接到的答案中的模式进行操作。你似乎没有这样做。但这取决于你。

【参考方案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;
;

【讨论】：

getClicked3DPoint 定义了什么？

这个函数（getClicked3DPoint）作为事件（点击时）添加到画布中，在其中打印模型..