嵌入 <a-scene> 会破坏鼠标/光标的光线投射答案

【问题标题】：Embedding an <a-scene> breaks the raycast of the mouse/cursor嵌入 <a-scene> 会破坏鼠标/光标的光线投射
【发布时间】：2019-04-12 04:57:52
【问题描述】：

将嵌入式组件添加到场景以更轻松地为我的 AR 场景中的元素设置样式时，raycast/click 事件不会在正确的位置触发。当我从场景中删除嵌入标签时，光线投射会正常工作，但在移动设备上查看网页时，场景中的对象处于不同的比例/位置。

有没有办法在嵌入式场景中进行适当的光线投射？

<body style="margin: 0px; overflow: hidden">
 <a-scene embedded arjs="debugUIEnabled: false; sourceType: webcam">
  <a-marker type='pattern' url='custommarkers/pattern-marker.patt' cursor="rayOrigin: mouse; fuse: false">
   <a-circle id="button" src="#buttonimg" radius=".2" rotation="-90 0 0" position="0 0 1">
    <a-animation begin="buttonpressed" dur="750" attribute="scale" to="2 4 4" direction="alternate"></a-animation>
   </a-circle>
  </a-marker>
 </a-scene>
</body>

“buttonpressed”是按钮被点击时发送的事件。我可以点击“按钮”，但不能点击圆圈图形所在的位置

【问题讨论】：

标签： aframe ar.js

【解决方案1】：

ar.js 中的光标行为有点不同，您需要将其添加到 a-marker 元素中：

<a-marker cursor='rayOrigin: mouse'>
  <a-amazing-stuff/>
</a-marker>

光标可以使用整个文档的宽度/高度来计算光线。

如果您将您的 ar.js 网站放入 iframe

<iframe src="myArJsWebsite.com"></iframe>

光标组件应该可以正常工作。使用 HIRO 标记here 进行检查。

【讨论】：

遗憾的是这并不能解决问题。光标仍未点击正确的位置。
我试过了，但它不起作用..我添加了一些我正在使用的代码
您的意思是代码，或者示例不起作用？我在 chrome / firefox PC 上尝试过 ar-cursor.glitch.me，在 android 手机上尝试过 firefox，它会触发动画并在点击时在屏幕上打印出 <p> 元素
ar-cursor.glitch.me 也无法正常工作。我相信我已经找到了错误。我将相机对准某个角度的标记。这导致它表现得很奇怪。并且在移动相机时，它似乎并没有更新光线投射的原点。感谢您的帮助！