Как добавить Камеру в видеосферу кадра

у меня такая видеосфера

    <a-scene vr-mode-ui="enabled: false" id="a-scene" ng-show="is360Playing">
              <a-assets>
                <video id="video360" src="/path/to/360 video" crossorigin></video>
            </a-assets>

            <a-videosphere src="#video360" id="videosphere"></a-videosphere>

    </a-scene>

как мне добавить сюда камеру, чтобы я мог указывать направление во время воспроизведения видео?

я пробовал это

<a-camera position="0 50 0">
   <a-videosphere src="#video360" id="videosphere"></a-videosphere>
</a-camera>

и

 <a-videosphere src="#video360" id="videosphere" camera position="0 30 0"></a-videosphere>

я попробовал rotation на видеосфере, это работает, но это мешает ориентации экрана, и я хочу, чтобы камера смотрела в правильном направлении, когда воспроизводится определенная часть видео.


video aframe
person Syed Faizan    schedule 24.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Камера определяет точку зрения пользователя. В сцене всегда активен только один. Вы бы не добавили камеру в видеосферу.

Я рекомендую вращать видеосферу, возможно, с анимацией появления/исчезновения до и после изменения поворота. Только вращайте его вокруг оси Y. Попробуйте использовать компонент анимации для плавного появления/исчезновения, анимируя диффузный цвет сферы.

Код будет выглядеть примерно так...

<head>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-animation-component@^3.2.0/dist/aframe-animation-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-videosphere src="movie.mp4"
                   animation__fadeout="property: material.color; from: #fff; to: #000; startEvents: fadeout; dur: 500" 
                   animation__fadein="property: material.color; from: #000; to: #fff; startEvents: fadein; dur: 500"></a-videosphere>
  </a-scene>

  <script>
    var videosphere = document.querySelector('a-videosphere');
    videosphere.emit('fadeout');
    setTimeout(function () {
      videosphere.setAttribute('rotation', '0 140 0');
      videosphere.emit('fadein');
    }, 500);
  </script>
</body>
person ngokevin    schedule 24.04.2017
comment
хорошо, я думаю, это единственный способ, спасибо за код анимации, теперь мое видео выглядит намного лучше - person Syed Faizan; 24.04.2017
comment
можно ли выполнить вращение относительно текущего местоположения пользователя? например, получить текущее значение поворота и сместить ось Y, чтобы убедиться, что пользователь указывает в правильном направлении? - person Syed Faizan; 26.04.2017