A-frame：如何添加可点击的实体元素？答案

【问题标题】：A-frame: How to add clickable entity element?A-frame：如何添加可点击的实体元素？
【发布时间】：2018-01-24 22:03:44
【问题描述】：

这就是我想要实现的目标：

加载带有标记的图像（图像上的位置）
使标记可点击
点击标记后，更改图像。

这就像一个虚拟旅游，人们可以点击标记进入该地点。

这是我到目前为止所做的：

<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
    <script type="text/javascript">
        AFRAME.registerComponent('marker', {
            schema: {default: ''},
            init() {
                const sky = document.querySelector('a-sky');

                this.el.addEventListener('click', () => {
                    //sky.setAttribute('src', this.data);
                    console.log('clicked');
                });
            }
        });
    </script>
</head>
<body>

    <a-scene>
        <a-sky src="#entrance" rotation="0 -90 0" position="0 0 0" id="src-img-tpl"></a-sky>
        <a-sphere href="http://google.com" id="marker" position="-10 3 -15" radius="0.65" color="#EF2D5E"></a-sphere>
        <a-assets>
            <!-- <audio id="river" src="assets/Bg-music.wav" autoplay="true" loop="true"></audio> -->
            <img id="entrance" src="images/001.jpg">
            <img id="study" src="images/002.jpg">
            <img id="parking" src="images/003.jpg">
        </a-assets>

    </a-scene>

</body>

但这对我不起作用。任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： three.js aframe webvr

【解决方案1】：

首先你需要附加组件

<a-entity myComponentName> </a-entity>

其次，你缺少一个光标。在典型的 PC 上，使用鼠标很容易测试您的站点。这样做需要将光标组件添加到场景中：

<a-scene cursor="rayOrigin: mouse">....

我已经附加了光标，并告诉它使用鼠标。在my fiddle 中查看。这实际上是你的代码加上提到的添加:)

否则，您需要附加一个实体，该实体将充当您的光标。

代码很简单：

<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>

它在相机上附加了一个环，允许您通过查看项目来单击它们。

如需完整说明，请查看docs。

值得一提的是，官网有完整的tutorial on making a 360 gallery！

【讨论】：