Question

我正在使用iframe进行一些测试。

我用aframe演示完成了一个场景，有4个按钮每个按钮都会改变背景。

这是一个剪掉的身体

<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个“按钮”并将它们设置在不同的位置？
是否有可能，而不是更改bk，打开网址？

Answer 1

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

在iframe上移动索引

1 个答案: