我正在尝试通过 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 )
然而它似乎无法处理相机,我明白了
类型错误:无法读取未定义的属性“元素”
来自 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 ],
我认为它没有正确读取相机,如果这是问题的话,关于如何将三个相机从框架相机中取出的任何想法?
使用 Piotr 关于访问相机并将“三”修复为“三”的信息似乎有效:
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)
})
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)