Последняя стабильная сборка (0.9.0) A-Frame не справляется с 360ImageGallery по сравнению с более ранней (0.8.0) версией - PullRequest
Новая
       10

Последняя стабильная сборка (0.9.0) A-Frame не справляется с 360ImageGallery по сравнению с более ранней (0.8.0) версией

0 голосов
/ 10 марта 2019

Я не смог найти ничего в списке устаревших 0.9.0, возможно, я пропустил это.360ImageGallery работает, когда используется https://aframe.io/releases/0.8.0/aframe.min.js, но когда используется https://aframe.io/releases/0.9.0/aframe.min.js, плоскости миниатюр куба, города и сшельта сворачиваются в одну (они накладываются друг на друга и поэтому не могут быть выбраны).Есть идеи почему? 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360° Image Browser</title>
<meta name="description" content="360&deg; Image Gallery - A-Frame">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-template-component@3.x.x/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg.com/aframe-layout-component@3.x.x/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@3.x.x/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-layout-component@4.3.1/dist/aframe-layout-component.min.js"></script> 
<script>

AFRAME.registerComponent('set-image', {
  schema: {
    on: {type: 'string'},
    target: {type: 'selector'},
    src: {type: 'string'},
    dur: {type: 'number', default: 300}
  },
init: function () {
  var data = this.data;
  var el = this.el;

  this.setupFadeAnimation();

  el.addEventListener(data.on, function () {
    // Fade out image.
    data.target.emit('set-image-fade');
    // Wait for fade to complete.
    setTimeout(function () {
      // Set image.
      data.target.setAttribute('material', 'src', data.src);
    }, data.dur);
  });  
  },
    setupFadeAnimation: function () {
    // Appends an <a-animation> that fades to black.
  }
});
</script>


</head>
<body>


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

    <!-- Images. -->
    <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
    <img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
    <img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
    <img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
    <img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
    <img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
	
  <script id="link" type="text/html">
    <a-entity class="link1"
      geometry="primitive: plane; height: 1; width: 1"
      material="shader: flat; src: ${thumb}"
      sound="on: click; src: #click-sound"
      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"
	  set-image="on: click; target: #image-360; src: ${src}"
      event-set__4="_event: mouseleave; scale: 1 1 1"></a-entity>
  </script>
	
  </a-assets>

  <!-- 360-degree image. -->
  <a-sky id="image-360" radius="10" src="#cubes"></a-sky>
  <!-- Pass image sources to the template. -->
      <a-entity id="links" layout="type: line; margin: 1.5" position="-1.5 1.0 -3">
        <a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
        <a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb"></a-entity>
        <a-entity template="src: #link" data-src="#sechelt" data-thumb="#sechelt-thumb"></a-entity>
      </a-entity>

  <!-- Camera + Cursor. -->
  <a-camera>
    <a-cursor id="cursor">
      <a-animation begin="click" easing="ease-in" attribute="scale"
                   fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
      <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                   from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
    </a-cursor>
  </a-camera>
</a-scene>
</body>
</html>

1 Ответ

0 голосов
/ 11 марта 2019

Проблема с компонентом макета - вы можете увидеть его в журналах консоли.

Вы можете заменить его созданием собственного «компонента макета», который в этом случае устанавливает положение элементов в строке: 

AFRAME.registerComponent('setInLine', {
  init: function() {
    var tiles = document.getElementsByClassName(".link");
    for(var i = 0; i < tiles.length; i++) {
      let newPos = new THREE.Vector3(i, 0, 0)
      tiles[i].setAttribute('position', newPos)
    }
  }
})

или просто сделайте это вручную.

Также анимация fade выполняется только один раз - поэтому изображение только выцветает, оно не будет чередоваться. Вы можете добавить атрибут loop: 2, вторая итерация покажет новое изображение
Здесь - рабочая версия.
...