AFRAME屏幕到达世界位置 [英] AFRAME screen to world position

问题描述

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

I'm trying to convert Mouse position to world coordinates in Three via 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 )

但是它似乎无法处理相机，我得到了

However it doesn't seem to be able to handle the camera, I get

TypeError：无法读取未定义的属性元素

TypeError: Cannot read property 'elements' of undefined

从Matrix4.getInverse

From 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 ],

我想这是不是在正确读取相机，如果有问题，如何将三个相机从框架相机中取出来？

I presume it's not reading the camera properly, any ideas on how to get the three camera out of the aframe camera if that's the problem?

推荐答案

使用Piotr的有关访问摄像机并将三个固定为三个的信息似乎可行：

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

这篇关于AFRAME屏幕到达世界位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！