AR 模式 A 框下的点击事件

Question

我对 AR 还很陌生，所以这个问题的答案可能很简单。我编写了一个简单的组件，单击后即可更改框的颜色。该组件在 VR 模式下工作，但在 AR 模式下，当我点击手机屏幕时，它根本不起作用。

AFRAME.registerComponent('change-color', {
        schema: {
            color: {
                type: 'string',
                default: 'blue'
            }
        },

        init: function () {
            var data = this.data;
            var el = this.el;

            el.addEventListener('click', function () {
                this.setAttribute('color', data.color);
            })
        }
    });

<a-box id="box" position="0 1.6 3" scale="0.50 0.50 0.50" color="red" change-color></a-box>

Answer 1

我会研究鼠标（和触摸）光标的使用。

这里是文档的链接：https://aframe.io/docs/1.0.0/components/cursor.html#properties_rayorigin

---

这是一个利用此的简单故障项目： https://glitch.com/~aframe-grid-select

注意index.html第53行：

<a-entity raycaster="objects: .collidable" cursor="rayOrigin: mouse" intersection-spawn="event: click; mixin: voxel" ></a-entity>

---

这是使用相同方法的另一个项目： https://glitch.com/~aframe-building-ui

注意index.html第101行：

<a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: [raycastable]"></a-entity>

Answer 2

WebXR 规范的定义方式是，在沉浸式模式下禁用触摸检测，包括在 AR 中。

要重新启用触摸检测，进入沉浸模式时，需要请求 dom-overlay WebXR 功能。

如果您不需要可见的 DOM 覆盖，只需要触摸检测，实现此目的的一个简单方法是使用画布（由您的

a-scene

创建）作为 DOM 覆盖的

overlayElement

。

您可以通过像这样设置您的

a-scene

来做到这一点

    <a-scene webxr="requiredFeatures: dom-overlay;
                    overlayElement: canvas;
                    referenceSpaceType: local">

（如文档中所述此处）

这样做的一个副作用是你的画布将被赋予类

a-dom-overlay

，这将影响样式（添加填充+禁用指针事件）

您可以通过在 CSS 中添加以下内容来减轻这些副作用：

canvas.a-dom-overlay:not(.a-no-style) {
  padding: 0;
  pointer-events: auto;
}

请参阅此问题，了解有关此主题的更多背景/历史（感谢@Kieran F 提供链接）。

并查看实例此处（使用触摸控件拖动形状）。

Answer 3

我在 Mozilla XRViewer 中找到了适用于 iPhone 的解决方案。要点是创建一个透明 div 作为场景画布上的可点击叠加层，然后创建一个自定义组件以将触摸事件的 2D 坐标转换为光线投射的 3D 原点。请参阅https://github.com/aframevr/aframe/issues/4372#issuecomment-1721412290了解更多详细信息。