如何知道a帧场景下鼠标点击的3D坐标位置

Question

我无法解决这个问题。我在堆栈溢出处查看了其他相关的 three.js 解决方案，但仍未实现结果。使用下面的代码，当鼠标向下单击时，3D 对象会出现在远离鼠标光标的对角线上。

this.mouse = new THREE.Vector2();
this.scene = this.el.sceneEl;
this.camera = this.scene.camera;
this.obj = this.el.object3D;

this.scene.addEventListener('mousedown', e => {
    let rc = new THREE.Raycaster();
    rc.setFromCamera(this.mouse, this.camera);
    let dist = this.obj.position.distanceTo(this.camera.position);
    let point = rc.ray.direction.multiplyScalar(dist);
    document.querySelector('#red').setAttribute('position',point.x+'         
    '+point.y+' '+ point.z); //red is a 3D box
}

有现成的组件吗？

Answer 1

使用

let point = rc.ray.at(dist);

而不是

let point = rc.ray.direction.multiplyScalar(dist);

工作

如何知道a帧场景下鼠标点击的3D坐标位置

How to know the 3D coordinate position of mouse click in a-frame scene

three.js

aframe