Javascript 为什么在WebXR中光线投射方向计算不正确?
我正在尝试在基于web的增强现实应用程序中使用常规的Three.js raycasting(与AR命中测试相反,这个问题与真实飞机上的命中测试无关) 该web应用程序使用带有的A-Frame在用于iOS的WebXR查看器和用于Android的WebARCore中获得WebXR支持,而增强现实技术在这两种实验性浏览器中通常工作良好 但是,Javascript 为什么在WebXR中光线投射方向计算不正确?,javascript,three.js,augmented-reality,aframe,Javascript,Three.js,Augmented Reality,Aframe,我正在尝试在基于web的增强现实应用程序中使用常规的Three.js raycasting(与AR命中测试相反,这个问题与真实飞机上的命中测试无关) 该web应用程序使用带有的A-Frame在用于iOS的WebXR查看器和用于Android的WebARCore中获得WebXR支持,而增强现实技术在这两种实验性浏览器中通常工作良好 但是,aframe xr或其包含的库中的某些内容会导致在支持WebXR的实验浏览器中光线投射方向向量的投影不正确。光线投射的原点很好(在摄影机的当前位置),但方向始终在
aframe xr
或其包含的库中的某些内容会导致在支持WebXR的实验浏览器中光线投射方向向量的投影不正确。光线投射的原点很好(在摄影机的当前位置),但方向始终在其应位于的位置下方偏移(y坐标太小),并略微向左偏移(x坐标太小)
巧合的是(或不是),默认情况下,y似乎在1.6米的A帧周围偏移。或者过去是这样,因为在A-Frame
的最新(未发布)版本中,A-Frame xr
依赖于其工作,因此这似乎已降级为Three.js
这通常不是光线投射的问题,这证明了这一点,我的测试结果如下:
设备/示例运行|正常0.7.0 | WebXR |正常0.8.0|
-----------------------|----------------|---------------|------------------|
带鼠标的Windows Chrome |正确|正确|正确|
S8铬合金|正确|正确|正确|
S8 WebARCore |正确|不正确|正确|
iPad Safari |正确|正确|正确|
iPad WebXR查看器|正确|不正确|正确|
其中,“正确”表示方向按预期计算,球体显示在我的手指或鼠标光标的正下方,“不正确”表示方向向量出现错误,球体显示在错误的位置
这些示例的代码如下所示:
WebXR库中会发生什么情况来偏移计算的光线投射方向,以及如何修复该方向
奖金信息:我也在一个测试中测试了这个。Raycasting在Android上的WebARCore中正常工作(我相信没有使用webxr polyfill),但不正确,尽管iPad上的webxr Viewer中的偏移量不同(我相信使用了webxr polyfill)
更新:根据Roberto下面的评论,将
webxr polyfill
中的坐姿高度常数更改为0是正确的一步,但不是完整的解决方案。有了这样的改变——如果我在移动或旋转设备之前加载网页并进行光线投射,光线投射方向实际上是正确计算的,但只要移动或旋转设备,光线投射方向就不正确。我对polyfill代码不太感兴趣(我正在使用iOS查看器),但我记得在polyfill的某个地方有一个坐着的眼睛高度常数。
目前设置为1.1米。也许您应该使用该值来补偿代码中的高度。
下面是确切的路线:
我可以确认,将该常数从
1.1
更改为0
将导致光线投射器方向向量的y坐标部分正确,但x坐标部分仍在其应位于的左侧0.3-0.5米处。换句话说:通过此更改,绿色球具有正确的高度,但在x轴上仍处于关闭状态。