视频作为 Three.js 纹理贴图 VideoTexture

Question

视频本质上就是一帧帧图片流构成，把视频作为 Threejs 模型的纹理贴图使用，就是从视频中提取一帧一帧的图片作为模型的纹理贴图，然后不停的更新的纹理贴图就可以产生视频播放的效果。

下面是一段视频作为纹理贴图的代码，完整代码和视频资源可以查看本站发布的Threejs视频教程8.5节

// 创建video对象
let video = document.createElement('video');
video.src = "1086x716.mp4"; // 设置视频地址
video.autoplay = "autoplay"; //要设置播放
// video对象作为VideoTexture参数创建纹理对象
var texture = new THREE.VideoTexture(video)
var geometry = new THREE.PlaneGeometry(108, 71); //矩形平面
var material = new THREE.MeshPhongMaterial({
  map: texture, // 设置纹理贴图
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中

VideoTexture.js 封装了一个update函数，Threejs 每次执行渲染方法进行渲染场景中的时候，都会执行VideoTexture封装的update函数，执行update函数中代码 this.needsUpdate = true; 读取视频流最新一帧图片来更新Threejs模型纹理贴图。