Fatal编程技术网
  • javascript/
  • Javascript 使用three.js在立方体上渲染六个视频纹理

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

javascript 3d three.js

Javascript 使用three.js在立方体上渲染六个视频纹理,javascript,3d,three.js,textures,Javascript,3d,Three.js,Textures,我有一个视频，看起来如下： 正如你可能从视频截图上看到的那样，我把一个视频流分成了6个部分 Aim：我想在立方体的六个面上投影这6个视频。为此，我编写了以下JavaScript： <!DOCTYPE html> <html> <head> <title>WebGL/Three.js Step Tutorial</title> <style> body {

我有一个视频，看起来如下：

正如你可能从视频截图上看到的那样，我把一个视频流分成了6个部分

Aim：我想在立方体的六个面上投影这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>
整个事情都不起作用了。这就是我的网页（chrome）的外观：

“控制台”选项卡中没有错误

请告诉我哪里出了问题。 我只不过是three.js的开始，任何形式的帮助都将不胜感激。 谢谢

从本质上讲，我查看了上一个示例，然后偷了东西，直到一切正常为止

主要的变化是使用了一个
display:none
html视频元素来播放实际的视频（如果您需要js代码中的所有内容，我假设传递一个url应该是动态的，或者类似的）

你如何在立方体上手工编码UV，但它确实有效。您可能需要考虑导入具有UV坐标的网格，以使代码更加灵活

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

我更被三个tut.js的目的难住了。据我所知，这的确是兹利奇。或者更确切地说，它使用立方体定义场景，将一个three.js渲染器推到主体上，然后什么也不做，只是弄乱了视频立方体网格（renderAnimationFrame（）调用最终指向相同的
网格，因此双击旋转代码）整个过程对视频立方体没有帮助。
您是否裁剪了sintel.mp4视频？或者它是以某种方式发生的？我没有对mp4做任何修改，只是按原样使用了演示文件，因此这可能是UV拉伸的来源（即，与您的纵横比不匹配）。如果您想查看它的编解码器、分辨率等，可以在上查看。谢谢！我该怎么处理？WebGL:无效的_值：texImage2D:无视频[.CommandBufferContext]渲染警告：绑定到纹理单元0的纹理不可渲染。它可能不是2的幂，并且有不兼容的纹理过滤。没有更多信息很难说。您确定视频正在加载到元素中吗？你能发布你当前状态的演示吗？

 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();
 }



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



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