AFRAME屏幕到世界位置

Question

我正在尝试通过 Aframe 将鼠标位置转换为世界坐标

使用类似

的东西

let mouse = new three.Vector2()
let camera = document.querySelector('#camera')
let rect = document.querySelector('#sceneContainer').getBoundingClientRect()
mouse.x = ( (event.clientX - rect.left) / rect.width ) * 2 - 1
mouse.y = - ( (event.clientY - rect.top) / rect.height ) * 2 + 1

let vector = new three.Vector3( mouse.x, mouse.y, -1 ).unproject( camera )

不过好像对不上相机，我得到

TypeError: Cannot read property 'elements' of undefined

来自 Matrix4.getInverse

9550 | 
 9551 | // based on http://www.euclideanspace.com/maths/algebra/matrix/functions/inverse/fourD/index.htm
  9552 | var te = this.elements,
> 9553 |    me = m.elements,
  9554 | 
  9555 |    n11 = me[ 0 ], n21 = me[ 1 ], n31 = me[ 2 ], n41 = me[ 3 ],
  9556 |    n12 = me[ 4 ], n22 = me[ 5 ], n32 = me[ 6 ], n42 = me[ 7 ],

我认为它没有正确读取相机，如果这是问题，关于如何将三个相机从 aframe 相机中取出的任何想法？

Answer 1

使用 Piotr 关于访问相机的信息并将 'three' 修复为 'THREE' 似乎可行：

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)
    })
  }
});

AFRAME屏幕到世界位置

AFRAME screen to world position

three.js

aframe