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帧：如何添加可点击的实体元素？

1 个答案: