A-frame 添加一个带有实体的<a-cursor> onclick 事件答案

【问题标题】：A-frame add an<a-cursor> onclick event with an entityA-frame 添加一个带有实体的<a-cursor> onclick 事件
【发布时间】：2021-08-19 22:09:12
【问题描述】：

我一直在处理一个虚拟现实场景，我想知道如何在我的场景中添加一个<a-cursor>，并在我的代码底部使用<a-entity> 创建一个 onclick 事件。我希望这样当我在<a-entity> 上单击<a-cursor> 时，应该会出现一个名为myFunction() 的函数。我怎样才能做到这一点？我的小提琴：fiddle

【问题讨论】：

标签： javascript html jquery aframe webvr

【解决方案1】：

要将<a-cursor> 添加到您的场景中，您需要先将其作为<a-camera> 的子级放置在您的场景中。

<a-scene update-html>
      <a-camera>
        <a-cursor></a-cursor>
      </a-camera>

它应该显示为一个小环。对于 A-Frame，我会像这样创建一个组件：

    <title>A-Frame HTML Shader - Dynamic</title>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"></script>
    <script>
      AFRAME.registerComponent("click-log", {
        init: function() {
          this.myFunction = function() {
            console.log("hi");
          };

          this.el.addEventListener("click", this.myFunction);
        },

        remove: function() {
          this.el.removeEventListener("click", this.myFunction);
        }
      });

    </script>

并将其与其他脚本一起放在我的文件的头部。然后，像这样将它添加到框中：

<a-entity id="lettersEntity" click-log...

Fiddle here.

每当我们的光标放在附加的实体上并单击时，这将写入控制台“hi”。组件对于保持模块化很有用，所以如果我们稍后想添加另一个框，我们可以点击并记录，我们也只需添加点击日志。我们还可以向点击日志添加更多在不同事件监听器上触发的函数。 Init 将在创建时添加我们的事件侦听器，而 remove 将清理它，因此如果我们稍后删除它附加到的实体，我们就没有剩余的事件侦听器。

如果您有兴趣将鼠标用作光标，A-Frame v0.6.1 及更高版本支持<a-scene cursor="rayOrigin: mouse">，它比 a-cursor 原语更易于使用。

This series 也可能会有所帮助，因为该视频还专门介绍了如何更好地使用组件和事件侦听器。例如，它展示了如何在点击时更改 A-Frame 基元的颜色。

【讨论】：

完美运行，非常感谢您花时间回答！