javascript - Three.js 视频部分作为纹理

Question

我正在尝试使用视频的一部分作为 Three.js 网格中的纹理。

视频在这里，http://video-processing.s3.amazonaws.com/example.MP4它是一个鱼眼镜头，我只想使用具有实际内容的部分，即中间的圆圈。

我想以某种方式 mask 、裁剪或定位并拉伸(stretch)网格上的视频，以便仅显示这部分，而忽略黑色部分。

视频代码

var video = document.createElement( 'video' );
    video.loop = true;
    video.crossOrigin = 'anonymous';
    video.preload = 'auto';
    video.src = "http://video-processing.s3.amazonaws.com/example.MP4";
    video.play();

var texture = new THREE.VideoTexture( video );
    texture.minFilter = THREE.NearestFilter;
    texture.magFilter = THREE.LinearFilter;
    texture.format = THREE.RGBFormat;

var material   = new THREE.MeshBasicMaterial( { map : texture } );

然后将视频投影到 220 度的球体上，以产生 VR 效果。

var geometry = new THREE.SphereGeometry( 200,100,100, 0, 220 * Math.PI / 180, 0, Math.PI); 

这是一支代码笔 http://codepen.io/bknill/pen/vXBWGv

谁能告诉我如何最好地做到这一点？

Answer 1

您可以使用texture.repeat来缩放纹理

http://threejs.org/docs/#Reference/Textures/Texture

例如，在两个轴上缩放 2 倍 纹理.repeat.set(0.5, 0.5);