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

Question

我有一个视频，如下所示：

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

目标：我想将这 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）的样子：

网页上的输出“控制台”选项卡中没有错误。

请让我知道我哪里出错了。 我只是一个 Three.js 的开始，任何形式的帮助都将不胜感激。 谢谢！

Answer 1

这是我的演示。

本质上，我在github上查看了mrdoob 的示例，然后偷窃直到一切正常。

主要的变化是有一个display:none html video 元素来播放实际的视频（没有深入研究 Three.js 代码，我假设传递一个 url 应该是动态的，或者类似的东西。你可以做如果您需要 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() 调用最终引用了相同的mesh等等双锤旋转代码。）整个事情对视频立方体没有帮助。

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

问题描述

1 个解决方案

解决方案1
1 2016-05-28 06:39:42

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

问题描述

1 个解决方案

解决方案1 1 2016-05-28 06:39:42

解决方案1
1 2016-05-28 06:39:42