Question

我的视频看起来如下：

正如您可以从视频的屏幕截图中看到的那样，我已将视频流分为6个部分。

目标：我想在多维数据集的六个面上投影这六个视频。为此，我编写了以下JavaScript：

<!DOCTYPE html>
<html>
  <head>
    <title>WebGL/Three.js Step Tutorial</title>
        <style>
            body {
            margin: 0px;
            background-color: #fff;
            overflow: hidden;
        }
        </style>
  </head>
  <body>
    <script src="js/three.js"></script>
    <script src="js/three-tut.js"></script>
  </body>
</html>


    <script>


     var camera;
     var scene;
     var renderer;
     var mesh;


     init();
     animate();

     function init() {

         scene = new THREE.Scene();
         camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);

         var light = new THREE.DirectionalLight( 0xffffff );
         light.position.set( 0, 1, 1 ).normalize();
         scene.add(light);

         var geometry = new THREE.CubeGeometry( 10, 10, 10);


        var texture = new THREE.VideoTexture( 'videos/Input.mp4' );
        texture.minFilter = THREE.LinearFilter;
        texture.magFilter = THREE.LinearFilter;
        texture.format = THREE.RGBFormat;

         var material = new THREE.MeshPhongMaterial( { map: texture } );

         var face1 = [new THREE.Vector2(0, .5), new THREE.Vector2(.3333, .5), new THREE.Vector2(.3333, 1), new THREE.Vector2(0, 1)];
         var face2 = [new THREE.Vector2(.3333, .5), new THREE.Vector2(.6666, .5), new THREE.Vector2(.6666, 1), new THREE.Vector2(.3333, 1)];
         var face3 = [new THREE.Vector2(.6666, .5), new THREE.Vector2(1, .5), new THREE.Vector2(1, 1), new THREE.Vector2(.6666, 1)];
         var face4 = [new THREE.Vector2(0, 0), new THREE.Vector2(.3333, 0), new THREE.Vector2(.3333, .5), new THREE.Vector2(0, .5)];
         var face5 = [new THREE.Vector2(.3333, 0), new THREE.Vector2(.6666, 0), new THREE.Vector2(.6666, .5), new THREE.Vector2(.3333, .5)];
         var face6 = [new THREE.Vector2(.6666, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, .5), new THREE.Vector2(.6666, .5)];

         geometry.faceVertexUvs[0] = [];

             geometry.faceVertexUvs[0][0] = [ face1[0], face1[1], face1[3] ];
             geometry.faceVertexUvs[0][1] = [ face1[1], face1[2], face1[3] ];

             geometry.faceVertexUvs[0][2] = [ face2[0], face2[1], face2[3] ];
             geometry.faceVertexUvs[0][3] = [ face2[1], face2[2], face2[3] ];

             geometry.faceVertexUvs[0][4] = [ face3[0], face3[1], face3[3] ];
             geometry.faceVertexUvs[0][5] = [ face3[1], face3[2], face3[3] ];

             geometry.faceVertexUvs[0][6] = [ face4[0], face4[1], face4[3] ];
             geometry.faceVertexUvs[0][7] = [ face4[1], face4[2], face4[3] ];

            geometry.faceVertexUvs[0][8] = [ face5[0], face5[1], face5[3] ];
             geometry.faceVertexUvs[0][9] = [ face5[1], face5[2], face5[3] ];

             geometry.faceVertexUvs[0][10] = [ face6[0], face6[1], face6[3] ];
             geometry.faceVertexUvs[0][11] = [ face6[1], face6[2], face6[3] ];

         mesh = new THREE.Mesh(geometry,  material);
         mesh.position.z = -50;
         scene.add( mesh );

         renderer = new THREE.WebGLRenderer();
         renderer.setSize( window.innerWidth, window.innerHeight );
         document.body.appendChild( renderer.domElement );

         window.addEventListener( 'resize', onWindowResize, false );

         render();
     }

     function animate() {
         mesh.rotation.x += .04;
         mesh.rotation.y += .02;

         render();
         requestAnimationFrame( animate );
     }

     function render() {
         renderer.render( scene, camera );
     }


     function onWindowResize() {
         camera.aspect = window.innerWidth / window.innerHeight;
         camera.updateProjectionMatrix();
         renderer.setSize( window.innerWidth, window.innerHeight );
         render();
     }

</script>

如您所见，我使用UV映射将视频的六个不同部分映射到立方体的六个面上。

三tut.js文件（在上面的代码中引用）是这样的：

 var camera;
 var scene;
 var renderer;
 var mesh;

 init();
 animate();

 function init() {

     scene = new THREE.Scene();
     camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);

     var light = new THREE.DirectionalLight( 0xffffff );
     light.position.set( 0, 1, 1 ).normalize();
     scene.add(light);

     var geometry = new THREE.CubeGeometry( 10, 10, 10);
     var material = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );

     mesh = new THREE.Mesh(geometry, material );
     mesh.position.z = -50;
     scene.add( mesh );

     renderer = new THREE.WebGLRenderer();
     renderer.setSize( window.innerWidth, window.innerHeight );
     document.body.appendChild( renderer.domElement );

     window.addEventListener( 'resize', onWindowResize, false );

     render();
 }

 function animate() {
     mesh.rotation.x += .03;
     mesh.rotation.y += .03;

     render();
     requestAnimationFrame( animate );
 }

 function render() {
     renderer.render( scene, camera );
 }


 function onWindowResize() {
     camera.aspect = window.innerWidth / window.innerHeight;
     camera.updateProjectionMatrix();
     renderer.setSize( window.innerWidth, window.innerHeight );
     render();
 }

整件事情都没有用。这就是我的网页（在chrome中）：

The output on the webpage “控制台”标签中没有错误。

请告诉我哪里出错了。我只是three.js的一个开始，任何形式的帮助将不胜感激。谢谢！

Answer 1

Here's my demo

基本上，我在mrdoob's上查看了github示例并偷走了直到事情有效。

主要的变化是有一个display:none html视频元素来播放实际的视频（没有深入探讨three.js代码，我认为传递一个url应该是动态做的，或者是那个效果。You could do that too，如果您需要js代码中的所有内容。）

<video id="video" autoplay loop style="display:none">
  <source src="sintel.mp4" type='video/mp4'>
</video>

然后在js代码中引用：

video = document.getElementById( 'video' );
videoTexture = new THREE.VideoTexture(video);

雄心勃勃如何手动编写立方体上的UV代码，但它确实有效。您可能希望研究导入具有UV坐标的网格，以使您的代码更加灵活。

发布代码很好，但我知道发布一个工作演示，无论是bl.ock还是jsfiddle或者你自己的服务器，将来会非常有用。

我对三tut.js的目的更加困惑。据我所知，这确实是zlich。或者更确切地说，它定义了一个带有立方体的场景，将一个three.js渲染器推到主体上，然后继续做任何事情，除了你的视频立方体网格混乱（renderAnimationFrame（）调用最终引用相同的{{1所以双重锤击旋转代码。）整个事情对视频立方体没有帮助。

使用three.js在立方体上渲染六个视频纹理

1 个答案: