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

Question

首先请随意在这里查看示例：http://alvarenga.co/threejs/index-2.html

基本上在这个项目中，我有两个圆柱体，一个是外部的（图像纹理），一个是内部的（带有视频纹理）...在创建第二个圆柱体并将其添加到场景后，我应用了一个视频作为 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;