我正在尝试在基于Web的增强现实应用程序中使用常规Three.js射线广播(与AR HitTest 相对,此问题与真实飞机上的 HitTest 无关)。
该Web应用程序将A-Frame与aframe-xr component结合使用,以在iOS的WebXR Viewer和Android的WebARCore中获得WebXR支持,并且增强现实通常在这两个实验性浏览器中都可以正常工作。
但是,在aframe-xr
或three.xr.js和WebXR polyfill库中包含的内容会导致在支持WebXR的实验性浏览器中射线广播的方向向量的投影不正确。射线转换的原点很好(在相机的当前位置),但方向始终偏移到应该偏移的位置以下(y坐标太小),而稍微偏移到应该偏移的位置(x坐标太小)。
巧合的是(或没有),默认情况下,y似乎在1.6米处偏移A-Frame
偏移相机。或曾经使用过,因为这似乎已被简化为Three.js
所依赖的最新(未发布)版本A-Frame
中的aframe-xr
。
正如这个reproduction of the issue in Glitch所证明的那样,一般而言,这不是光线转换的问题,我的测试结果如下:
Device/Example run | Normal 0.7.0 | WebXR | Normal 0.8.0 |
-----------------------|----------------|---------------|------------------|
Windows Chrome w/mouse | Correct | Correct | Correct |
S8 Chrome | Correct | Correct | Correct |
S8 WebARCore | Correct | Incorrect | Correct |
iPad Safari | Correct | Correct | Correct |
iPad WebXR Viewer | Correct | Incorrect | Correct |
其中“正确”表示方向是按预期计算的,并且球体出现在我的手指或鼠标光标的正下方,而“不正确”表示方向矢量错误,球体出现在错误的位置。
这些示例的代码在这里:https://glitch.com/edit/#!/delirious-watch
WebXR库中发生了什么事情,以抵消计算的光线转换方向,如何解决?
奖励信息:我也使用aframe-ar component中的separate glitch here对此进行了测试。 Raycasting在Android上的WebARCore(我相信未使用webxr polyfill)中正常工作,但在iPad(在我相信已使用webxr polyfill的WebXR Viewer中使用了不同的偏移量)的情况下,射线广播却不正确。
更新:根据下面的Roberto的评论,将
webxr-polyfill
中的SITTING_EYE_HEIGHT常量更改为0是朝着正确方向迈出的一步,但并不是完整的解决方案。进行此更改-can be tried here-如果我在移动或旋转设备之前加载网页并进行光线转换,则实际上可以正确计算光线转换方向,但是一旦我移动或旋转设备,光线转换方向就不正确。 最佳答案
我对polyfill代码没有太多了解(我正在使用iOS查看器),但是我记得在polyfill中的某个地方有一个SITTING_EYE_HEIGHT常量。
当前设置为1.1米。也许您应该使用该值来补偿代码中的高度。
这是确切的行:
https://github.com/mozilla/webxr-polyfill/blob/e4fa65a9bdb09e8e753014436d2f5b76c949e047/polyfill/XRViewPose.js#L57