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

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

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

我想以某种方式蒙版，裁剪或定位并拉伸网格上的视频，以便仅显示此部分，而忽略黑色部分。

影片代码

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

谁能让我知道我最好怎么做？

最佳答案

简而言之，您需要更新球体的“ UV-贴图”，以便将纹理的相关区域分配给球体的相应顶点。

每个顶点的UV坐标定义了分配给该顶点的纹理内的坐标（在[0..1]范围内，因此坐标（0，0）为左上角，坐标（1,1）为底角）视频的右上角）。 This example应该告诉您这是什么意思。

这些UV坐标以geometry.faceVertexUvs[0]的形式存储在您的几何图形中，以便每个面的每个顶点的UV坐标都有一个THREE.Vector2值。这是一个二维数组，第一个索引是面部索引，第二个索引是面部的顶点索引（请参见示例）。

至于生成UV贴图，至少有两种方法可以做到这一点。可能更简单的方法（ymmv，但我总是走这条路线）将是使用诸如Blender之类的3D编辑软件创建UV贴图，并使用three.js exporter-plugin导出结果对象。

另一种方法是手动计算值。我建议您首先尝试简单地使用球体的正投影。因此，基本上，如果您在原点有一个单位球体，只需删除顶点的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;

（如果您需要任一方向的更多信息，请发表评论，我会详细说明）

关于javascript - 视频的Three.js部分作为纹理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39259561/