Three.js Video as a Texture - Texture Distortion

Question

First off feel free to see the example here: http://alvarenga.co/threejs/index-2.html

Basically in this project, I have two cylinder's, one the outer (an image texture) and the inner (with a video texture)...After creating the second cylinder and adding it to the scene, I've applied a video as a MeshBasicMaterial.

Creating Video

            // 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 );

Applying Video to Cylinder

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

You can see now this is fine, in the link I've posted. The video is playing as a texture on the inner cylinder. The only issue is the video is very distorted. It's being applied in a way that stretches it along the cylinder. Is there anyway to make it take up it's actual size?

I imagine this has to do with splitting the cylinder into multiple faces, and potentially applying the texture to only ONE portion--but I'm not sure how to approach that issue. Even then, this will leave the width of the video completely dependent on the width of the face.

For those curious, I want the video to be curved along the face of the cylinder, so creating a flat plane with specified sizes is not an option.

Any suggestions or guidance here?

Answer 1

Try playing with texture.repeat and texture.offset.

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