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

Question

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

Answer 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">，这比原语光标更易于使用。

This series 也可能有帮助，因为该视频还专门介绍了比我更好的组件和事件侦听器。例如，它展示了如何在单击时更改 A 帧图元的颜色等操作。

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

A-frame add an<a-cursor> onclick event with an entity

html

javascript

jquery

webvr

aframe