CODEWITHSUNDEEP
three.jsaframe
Bob.B
Bob.B

Reputation: 718

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

I am not able to solve this. I looked other related three.js solutions at stack overflow but still not achieving the result. With the code below the 3D object appears some diagonal distant away from the mouse cursor when in mousedown click. 

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
}

Is there any ready component for this?

Upvotes: 1

Views: 1163

Answers (1)

Bob.B
Bob.B

Reputation: 718

Using 

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

instead of 

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

worked

Upvotes: 1

Related Questions