Javascript 作为纹理的视频的3.js部分

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

视频在这里，它是鱼眼镜头，我只想使用具有实际内容的部分，即中间的圆。 我想以某种方式遮罩、裁剪或定位并拉伸网格上的视频，以便仅显示此部分，而忽略黑色部分

视频编码

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度的球体上，给人以虚拟现实的印象

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

这是一支密码笔

---

有人能告诉我怎么做才是最好的吗

可以使用texture.repeat缩放纹理

例如，在两个轴上缩放2x

---

纹理。重复。设置（0.5,0.5）

简而言之，您需要更新球体的UV贴图，以便将纹理的相关区域指定给球体的相应顶点

每个顶点的UV坐标定义了纹理中指定给该顶点的坐标（范围为[0..1]，因此坐标（0，0）是视频的左上角，（1，1）是右下角）。你应该知道这是怎么回事

这些UV坐标作为

geometry.faceVertexUvs[0]

存储在几何体中，这样每个面的每个顶点都有一个

3.Vector2

UV坐标值。这是一个二维数组，第一个索引是面索引，第二个索引是面的顶点索引（参见示例）

至于生成UV贴图，至少有两种方法。可能更简单的方法（ymmv，但我总是这样做）是使用3D编辑软件（如blender）创建UV贴图，并使用three.js exporter插件导出生成的对象

另一种方法是手工计算值。我建议你首先尝试使用球体的正交投影。因此，基本上，如果在原点有一个单位球体，只需将顶点的z坐标放下，并使用

u=x/2+0.5

和

v=y/2+0.5

作为UV坐标

在JS中，可能是这样的：

// create the geometry (note that for simplicity, we're 
//   a) using a unit-sphere and 
//   b) use an exact half-sphere)
const geometry = new THREE.SphereGeometry(1, 18, 18, Math.PI, Math.PI)
const uvs = geometry.faceVertexUvs[0];
const vertices = geometry.vertices;

// compute the UV from the vertices of the sphere. You will probably need 
// something a bit more elaborate than this for the 220degree FOV, also maybe
// some lens-distorion, but it will boild down to something like this:
for(let i = 0; i<geometry.faces.length; i++) {
  const face = geometry.faces[i];
  const faceVertices = [vertices[face.a], vertices[face.b], vertices[face.c]];

  for(let j = 0; j<3; j++) {
    const vertex = faceVertices[j];
    uvs[i][j].set(vertex.x/2 + 0.5, vertex.y/2 + 0.5);
  }
}
geometry.uvsNeedUpdate = true;

//创建几何体（请注意，为了简单起见，我们
//a）使用单位球体和
//b）使用精确的半球面）
常数几何=新的三点球面法（1,18,18，Math.PI，Math.PI）
const uvs=几何体。faceVertexUvs[0]；
常数顶点=几何体。顶点；
//从球体的顶点计算UV。你可能需要
//对于220度视场，可能还有比这更复杂的东西
//有些镜头失真，但可以归结为：
对于（让我=0；这是一个很好的解释，可以解释你想要什么我想：谢谢，我正在努力工作，但是在Chrome中遇到了一些JS错误“uvs[i]。set不是一个函数-我在这里遗漏了什么！？哦，对不起。
faceVertexUvs
有另一个我没有想到的维度。基本上是这样：
faceVertexUvs[uvSetIndex][faceIndex][faceVertexIndex]
将相应地更新我的示例。谢谢我用它更新了它，它在很远的地方生成了一个非常小的球体！我将有一个游戏不幸的是，代码笔只为我显示了一个黑屏。但是你可能需要调整相机的位置（与大小为1的球体相比，距离为100相当远），或者将球体缩放到其先前的大小，类似于
sphere.scale.set（100100100）
。