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>

我在录像带上尝试了rotation，它可以工作，但它与屏幕的方向相混淆，我希望当视频的某个特定部分正在播放时，相机会面向正确的方向

Answer 1

相机定义了用户的观点。场景中始终只有一个活动。你不会在摄像机上添加摄像头。

我建议在更改旋转之前和之后旋转视频圈，也许使用淡入/淡出动画。仅绕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>

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

1 个答案: