AFRAME screen to world position

Question

I\'m trying to convert Mouse position to world coordinates in Three via Aframe

Using something like

let mouse = new three.Vector2()
let camera = documen         


        

Answer 1

Using Piotr's info about accessing the camera and fixing up the 'three' to 'THREE' seems to work:

https://glitch.com/edit/#!/aframe-mouse-to-world

AFRAME.registerComponent('mouse-to-world', {
  init: function () {
    document.addEventListener('click', (e) => {
      let mouse = new THREE.Vector2()
      let camera = AFRAME.scenes[0].camera
      let rect = document.querySelector('body').getBoundingClientRect()
      mouse.x = ( (e.clientX - rect.left) / rect.width ) * 2 - 1
      mouse.y = - ( (e.clientY - rect.top) / rect.height ) * 2 + 1
      let vector = new THREE.Vector3( mouse.x, mouse.y, -1 ).unproject( camera )
      console.log(vector)
    })
  }
});