如何将相机添加到帧视频球

Question

我的视频圈是这样的

    <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>

我在 videosphere 上试过 rotation，它可以工作，但它会扰乱屏幕的方向，我只想在播放视频的特定部分时让相机朝向正确的方向

Answer 1

相机定义了用户的视角。任何时候都只有一个活跃在场景中。您不会将摄像机添加到视频空间。

我建议旋转 videosphere，或许可以在更改旋转前后使用 fade-in/fade-out 动画。仅围绕 Y 轴旋转它。尝试通过为球体漫反射颜色设置动画来使用 fade-in/out 的动画组件。

代码大致如下...

<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>

如何将相机添加到帧视频球

How to add Camera to a frame videosphere

video

aframe