A-Frame курсор не движется в режиме VR с помощью Google картона - PullRequest
Новая
       95

A-Frame курсор не движется в режиме VR с помощью Google картона

1 голос
/ 28 апреля 2019

Я пытаюсь создать 360-дюймовую галерею изображений VR с A-Frame.Сначала я следовал руководству на главном веб-сайте A-Frame (https://aframe.io/docs/0.9.0/guides/building-a-360-image-gallery.html).. Эта функция работает в режиме рабочего стола, что означает, что я могу переместить курсор на два портала изображений, а затем перенести их на мгновение. К сожалению, когда япросмотрите это в режиме VR на моем iPhone, а затем просмотрите на картонном устройстве Google, курсор не будет двигаться - он застрял на месте.

Я пытался перейти на последнюю версию 0.9.1, но это появляетсячтобы получить ошибку в режиме VR, поэтому я вернулся к 0.9.0. Я также экспериментировал с использованием <a-entity cursor="fuse: true; fuseTimeout: 500" вместо <a-cursor> примитива.

Я разместил здесь демо https://whatapalaver.github.io/javascriptings/image_play/360/gallery.html

Я тестировал его на ios с использованием Firefox, Chrome и Safari. 

<html>
  <head>
    <meta charset="utf-8">
    <title>360&deg; Image Gallery</title>
    <meta name="description" content="360&deg; Image Gallery - A-Frame">
    <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@5/dist/aframe-event-set-component.min.js"></script>
    <script src="https://unpkg.com/aframe-layout-component@5.3.0/dist/aframe-layout-component.min.js"></script>
    <script src="https://unpkg.com/aframe-template-component@3.2.1/dist/aframe-template-component.min.js"></script>
    <script src="https://unpkg.com/aframe-proxy-event-component@2.1.0/dist/aframe-proxy-event-component.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <!-- Images. -->
        <img id="photo" src="./images/test5.jpg">
        <img id="photo-thumb" src="./images/test5-thumb.png">
        <img id="cast-courts" src="./images/test6.jpg">
        <img id="cast-courts-thumb" src="./images/test6-thumb.png">

        <!-- Image link template to be reused. -->
        <script id="link" type="text/html">
          <a-entity class="link"
            geometry="primitive: plane; height: 1; width: 1"
            material="shader: flat; src: ${thumb}"
            event-set__mouseenter="scale: 1.2 1.2 1"
            event-set__mouseleave="scale: 1 1 1"
            event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"
            proxy-event="event: click; to: #image-360; as: fade">
          </a-entity>
        </script>
      </a-assets>

      <!-- 360-degree image. -->
      <a-sky id="image-360" radius="10" src="#cast-courts"
             animation__fade="property: components.material.material.color; type: color; from: #FFF; to: #000; dur: 300; startEvents: fade"
             animation__fadeback="property: components.material.material.color; type: color; from: #000; to: #FFF; dur: 300; startEvents: animationcomplete__fade"></a-sky>

      <!-- Image links. -->
      <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
        <a-entity template="src: #link" data-src="#photo" data-thumb="#photo-thumb"></a-entity>
        <a-entity template="src: #link" data-src="#cast-courts" data-thumb="#cast-courts-thumb"></a-entity>
      </a-entity>

      <!-- Camera + cursor. -->
      <a-entity id="camera" camera look-controls>
        <a-cursor
        id="cursor"
        fuse=true
        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__mouseenter="_event: mouseenter; color: springgreen"
        event-set__mouseleave="_event: mouseleave; color: black"
        material="color: blue; shader: flat"
        position="0 0 -3"
        raycaster="objects: .link">
        </a-cursor>
      </a-entity>
    </a-scene>
  </body>
</html>

Я понимаю, что курсор очень маленький, даже в настольной версии, но я ожидал, что смогу увидеть его, когдаиспользуя режим VR и Google картон. Мы должны быть в состоянии навести курсор на вставленные изображения и навести курсор на фоновое изображение.

...