视频融合本质上就是多边形配合视频纹理。因此，复杂多边形视频融合的核心操作就是：生成多三角面构成复杂多边形，然后就是体力活了。。。将三角面的顶点去找对应的视频uv坐标，生成的三角面越多，顶点与uv对的越细，结果越好。
生成复杂多边形的方法采用BufferGeometry，BufferGeometry是相对底层封装，与WebGL的使用方式相似，但是更简洁。
const createVideoGeometry = async () => {
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array(points);
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const verticesUv = new Float32Array(uv);
geometry.setAttribute("uv", new THREE.BufferAttribute(verticesUv, 2));
const verticesIndex = new Uint32Array(targetIndex);
geometry.setIndex(new THREE.BufferAttribute(verticesIndex, 1));
const videoDiv: HTMLVideoElement = (document.getElementById("videoDiv")) as HTMLVideoElement;
const texture = new THREE.VideoTexture(videoDiv);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.wrapS = THREE.ClampToEdgeWrapping;
texture.wrapT = THREE.ClampToEdgeWrapping;
texture.format = THREE.RGBAFormat;
videoDiv.load();
await videoDiv.play();
const material = new THREE.MeshBasicMaterial({
map: texture,
});
material.needsUpdate = true;
mesh = new THREE.Mesh(geometry, material);
return mesh;
};
注意，顶点位置是3个一组，uv是2个一组，顶点index是1个一组。
效果：
具体可以参考我的github仓库
