Переместить указатель на iframe

Я делаю тест с помощью 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>

У меня есть несколько вопросов

  1. Можно ли разделить 4 "кнопки" и установить их в разные положения?
  2. Можно ли вместо изменения bk открыть URL-адрес?
Источник

1 ответ

Решение

  1. Да, вы можете переместить кнопки из объекта-обертки и position их в любом месте в космосе. В настоящее время компонент макета выравнивает их по линии с полем 1,5 метра. подобно <a-entity template="src: #link" position="-10 10 20">,

  2. В настоящее время set-image Компонент обрабатывает изменение фона. Попробуйте зайти в JS этого компонента и изменить код обмена изображения на код обмена URL (window.location.href = data.url).

Источник
Другие вопросы по тегам