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

Question

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

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

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

这是我目前所做的：

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

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

谢谢。

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

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

A-frame: How to add clickable entity element?

three.js

webvr

aframe