在 iframe 上移动索引

Question

我正在用 iframe 做一些测试。

我用 4 个按钮完成了一个场景，来自框架演示。
每个按钮都会改变背景。

这是 body

的片段

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.min.js"></script>

<body>
  <a-scene>
    <a-assets>
      <img id="home" crossorigin="anonymous" src="http://testtest.it/bk_home.png">
      <img id="home-thumb" crossorigin="anonymous" src="http://testtest.it/home_btn.png">

      <img id="first" crossorigin="anonymous" src="http://testtest.it/1.jpg">
      <img id="first-thumb" crossorigin="anonymous" src="http://testtest.it/btn_first.png">

      <img id="second" crossorigin="anonymous" src="http://testtest.it/2.jpg">
      <img id="second-thumb" crossorigin="anonymous" src="http://testtest.it/btn_second.png">

      <img id="third" crossorigin="anonymous" src="http://testtest.it/3.jpg">
      <img id="third-thumb" crossorigin="anonymous" src="http://testtest.it/btn_third.png">

      <audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>

      <script id="link" type="text/html">
        <a-entity class="link" geometry="primitive: plane; height: 1; width: 1" material="shader: flat; src: ${thumb}" event-set__1="_event: mousedown; scale: 1 1 1" event-set__2="_event: mouseup; scale: 1.2 1.2 1" event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
          event-set__4="_event: mouseleave; scale: 1 1 1" set-image="on: click; target: #image-360; src: ${src}" sound="on: click; src: #click-sound">
        </a-entity>
      </script>
    </a-assets>


    <a-sky id="image-360" radius="10" src="#home"></a-sky>

    <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
      <a-entity template="src: #link" data-src="#first" data-thumb="#first-thumb"></a-entity>
      <a-entity template="src: #link" data-src="#home" data-thumb="#home-thumb"></a-entity>
      <a-entity template="src: #link" data-src="#second" data-thumb="#second-thumb"></a-entity>
      <a-entity template="src: #link" data-src="#third" data-thumb="#third-thumb"></a-entity>
    </a-entity>

    <a-entity camera look-controls>
      <a-cursor id="cursor" animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150" animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500" event-set__1="_event: mouseenter; color: springgreen"
        event-set__2="_event: mouseleave; color: black" raycaster="objects: .link">
      </a-cursor>
    </a-entity>
  </a-scene>
</body>

我有几个问题

是否可以拆分 4 个 "buttons" 并将它们放在不同的位置？
是否可以不更改 bk，而是打开一个 url？

Answer 1

是的，您可以将按钮移出包装器实体并 position 它们在 space 中的任何位置。目前，布局组件将它们排成一行，边距为 1.5 米。喜欢 <a-entity template="src: #link" position="-10 10 20">.
目前，set-image 组件正在处理后台更改。尝试进入该组件的 JS 并将图像交换代码更改为 URL 交换代码 (window.location.href = data.url)。

在 iframe 上移动索引

Move index on iframe

html

aframe