Создайте сферу с 360 ° видео с помощью A-Frame - PullRequest
Новая
       40

Создайте сферу с 360 ° видео с помощью A-Frame

0 голосов
/ 11 октября 2019

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

Мне уже удалось создать собственный компонент Sphere и нанести на него изображение 360 °!

Like Here 

    <html>
<!--About Aframe libary-->
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
      <script>

        AFRAME.registerComponent('mysphere', {
            schema: {
                width: {type: 'number', default: 10},
                height: {type: 'number', default: 32},
                depth: {type: 'number', default: 32}
            },

            /**
            * Initial creation and setting of the mesh.
            */
            init: function () {
              var data = this.data;
              var el = this.el;

              // Create geometry.
              this.geometry = new THREE.SphereGeometry(data.width, data.height, data.depth);        

              //Load Image
              var texture = new THREE.TextureLoader().load( '3d50eke-360-panorama-pier-miami-bayside.jpeg.jpg' );

              // Create material.
              this.material = new THREE.MeshBasicMaterial({map: texture});
              this.material.side = THREE.DoubleSide;
              console.log();

              // Create mesh.
              this.mesh = new THREE.Mesh(this.geometry, this.material);

              // Set mesh on entity.
              el.setObject3D('mesh', this.mesh);
              el.getObject3D('mesh').material = this.material;
            }
        });
      </script>
    <a-scene>

      <a-camera position="0 6 2"></a-camera>

      <a-entity mysphere
                position="0 6 2">

      </a-entity>
    </a-scene>
  </body>
</html>

Поэтому я хочу найти способ, где мне не нужен тег "video", создать его с помощью THREE.VideoTexture и отобразить его как материал на сфере...

есть у кого-нибудь идея?

1 Ответ

0 голосов
/ 11 октября 2019

Вы можете использовать встроенную видеосферу . 

<a-scene>
 <a-assets>
  <video id="antarctica" autoplay loop="true" src="antarctica.mp4"> </video>
 </a-assets>
 <a-videosphere src="#antarctica"></a-videosphere>
 <!-- Defining the URL inline. Not recommended but more comfortable for web    developers. -->
 <a-videosphere src="africa.mp4"></a-videosphere>
</a-scene>
...