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

Question

我无法解决这个问题。我在堆栈溢出时查看了其他相关的三个.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);

工作