CODEWITHSUNDEEP
videoaframe
Syed Faizan
Syed Faizan

Reputation: 961

How to add Camera to a frame videosphere

i have my videosphere like this

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

how do i add camera to this , so i can point at a direction when the video is playing?

i tried this

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

and

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

i tried rotation on videosphere , it works but it messes with the orientation of the screen and i want just camera to face the right direction when a particular part of video is in play

Upvotes: 0

Views: 462

Answers (1)

ngokevin
ngokevin

Reputation: 13233

The camera defines the user's point of view. There is only one active in the scene at all times. You wouldn't add a camera to a videosphere.

I recommend rotating the videosphere, perhaps with a fade-in/fade-out animation before and after you change the rotation. Only rotate it around the Y axis. Try using the animation component for fade-in/out by animating the sphere diffuse color.

Code would look roughly like...

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

Upvotes: 1

Related Questions