Question

首先请随时在此处查看示例：http://alvarenga.co/threejs/index-2.html

基本上在这个项目中，我有两个圆柱体，一个是外部（图像纹理），另一个是内部（带有视频纹理）......创建第二个圆柱体并将其添加到场景后，我和＃39;已将视频应用为MeshBasicMaterial。

制作视频

            // create the video element
            video = document.createElement( 'video' );
            video.src = "scene-4-death-loop.mp4";
            video.load(); // must call after setting/changing source
            video.play();           

            videoImage = document.createElement( 'canvas' );
            videoImage.width = 600;
            videoImage.height = 430;

            videoImageContext = videoImage.getContext( '2d' );

            // background color if no video present
            videoImageContext.fillStyle = '#000000';
            videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );

            videoTexture = new THREE.Texture( videoImage );

将视频应用于圆柱

            meshVid = new THREE.Mesh( new THREE.CylinderGeometry(730, 730, 500, 100, 100, true),
                      new THREE.MeshBasicMaterial ( { map: videoTexture } )) ;

你现在可以看到这很好，在我发布的链接中。视频在内圆柱上作为纹理播放。唯一的问题是视频非常扭曲。它的应用方式是沿着圆柱体拉伸它。反正有没有让它占用它的实际尺寸？

我想这与将圆柱体分成多个面并且可能仅将纹理应用于一个部分有关 - 但我不确定如何处理该问题。即使这样，这也会使视频的宽度完全取决于脸部的宽度。

对于那些好奇的人，我希望视频沿圆柱面弯曲，因此不能选择创建具有指定尺寸的平面。

这里有任何建议或指导吗？

先谢谢！

Answer 1

尝试使用texture.repeat和texture.offset。

videoTexture.repeat.x = 10;
videoTexture.offset.x = 0.5;

Three.js视频作为纹理 - 纹理失真

1 个答案: