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

首先，请随意在此处查看示例：

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

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

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

对于那些好奇的人，我希望视频沿着圆柱体的表面弯曲，因此创建具有指定尺寸的平面不是一个选项

这里有什么建议或指导吗

---

提前感谢

尝试玩

纹理。重复
和
纹理。偏移量

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

你能在绘图程序上画一个草图，说明你希望视频如何映射吗？下面是我试图实现的一个快速示意图：看看弯曲一个平面是否适合你：。如果你需要一个完整的圆，你可以添加另一个几何体。首先，这太棒了。让我离我要去的地方很近。我有几个关于平面几何的问题…你可以在这里看到一个例子：…一件事，你必须向左移动才能看到我添加的平面。我看不到任何将平面向左或向右移动的参数，我将如何定位它？我注意到的另一件事是…视频似乎被剪辑了。你知道我如何使视频符合我创建的几何体吗？你可以在这里看到视频：alvarenga.co/threejs/scene-4-death-loop.mp4最终找到了答案！我在上面创建画布元素时没有指定实际的视频宽度和高度。DERP…新网格的定位也很简单，只需在上面设置位置.x和旋转.y…再次感谢曲面，真是太棒了！所以我和他们一起玩。重复，确定纹理重复的次数，因此我将其设置为1。我已经更新了测试：offet应该确定纹理渲染的距离。尽管如此，这看起来还是很奇怪。因为偏移量，有很多奇怪的模糊失真。我注意到的另一件事是，three.js似乎在改变我的视频的纵横比以适应它…你可以在这里看到实际的视频：…基本上我想以实际大小渲染整个视频