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

问题描述

我是 THREE.js 的新手.

I'm new in THREE.js.

我正在尝试通过鼠标单击 Canvas 中的对象(不是简单的对象:Box、Sphere 等)来获取点的 3D 坐标.

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

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

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.

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

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:

• 获取 z 上点的坐标=0 平面 -- 它工作正常，但它在 z=0 平面上，这不是我需要的，因为我有 OrbitControls..

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

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).

如何从鼠标点击坐标获取 WebGL 3d 空间中的对象" - 我也试过这个，但 raycaster.intersectObjects 一无所获，intersectscode> 是一个空数组(也许它只适用于简单的对象，如盒子、球体等).

"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,..).

任何人都可以向我展示获取 3D 中点击对象的点击点的 3D 点坐标的演示代码吗?

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

推荐答案

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

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

这篇关于在three.js中获取鼠标点击点的3D坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！