AFrame：如何向实体添加触摸事件监听器 [英] AFrame: how to add a touch event listener to an entity

问题描述

在移动浏览器中，我想在用户触摸图像时执行某些操作，但是我不知道如何使用触摸监听器。我可以使用某些组件吗？或给我一些想法，我该怎么做。

In mobile browser, I want to do something when user touches an image, but I don't know how to use touch listeners. Is there some components that I can use? Or give me some idea how to do it on my own.

推荐答案

A-Frame支持DOM事件的方式与Web普通页面非常相似。示例：

A-Frame supports DOM events very similarly to web normal pages. Example:

<a-scene>
  <!-- Target -->
  <a-box id="target" material="color: green"></a-box>

  <!-- Camera + Cursor -->
  <a-entity camera>
    <a-entity cursor="fuse: true; fuseTimeout: 500"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
            material="color: black; shader: flat">
    </a-entity>
  </a-entity>
</a-scene>

然后在JavaScript中：

And then in JavaScript:

var targetEl = document.querySelector('#target');
targetEl.addEventListener('click', function() {
  targetEl.setAttribute('material', {color: 'red'});
});

请参阅A-Frame的光标组件文档以获取更多详细信息。

See A-Frame's cursor component documentation for more details.

这篇关于AFrame：如何向实体添加触摸事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！