Question

我正在为VR上的360°视频开发一个VR项目。我的想法是创建一个球体并为该材料绘制360°视频。

我已经成功创建了自己的Sphere-Component，并在上面绘制了360°图片！

喜欢这里

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

所以我想找到一种不需要“视频”标签的方法，用THREE.VideoTexture创建它，并将其映射为球体上的材质...

有任何想法吗？

Answer 1

您可以使用内置的videosphere。

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

使用A-Frame实现threejs的360°视频创建球体

1 个答案: