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是一个空数组（也许它只适用于像box，sphere这样的简单对象。）。

任何人都可以给我看一下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;
};

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

1 个答案: