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

时间:2017-06-14 09:50:32

标签: three.js aframe

我无法解决这个问题。我在堆栈溢出时查看了其他相关的three.js解决方案,但仍未实现结果。使用下面的代码,在mousedown点击时,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
}

有没有现成的组件?

1 个答案:

答案 0 :(得分:1)

使用

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

而不是

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

工作