使用Three.js将视频添加到平面几何体时黑屏的解决方法

我之前在尝试用Three.js把视频渲染到平面几何体上时，碰到了个头疼的问题：不管怎么调整参数，屏幕上始终只显示一个黑色矩形，完全看不到视频内容。当时写的核心代码是这样的：

var video = document.getElementById('video');
var texture = new THREE.VideoTexture(video);
texture.needsUpdate;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
texture.crossOrigin = 'anonymous';
var imageObject = new THREE.Mesh(
    new THREE.PlaneGeometry(width, height),
    new THREE.MeshBasicMaterial({ map: texture }),
);
scene.add( imageObject );

折腾了一阵才发现问题根源：我只完成了VideoTexture和平面网格的创建，但视频元素本身根本没被正确初始化——既没设置视频源，也没触发加载和播放操作，空的视频元素没法提供任何纹理数据，自然只能显示黑色。

后来我给代码补上了这几行内容，问题立刻就解决了：

video.src = "src to video"; // 替换成你的实际视频地址
video.load();
video.play();

加上这三行后，视频元素会加载指定的视频源并开始播放，Three.js的VideoTexture就能实时获取到视频的帧数据，平面几何体也就正常显示出视频内容了！

内容的提问来源于stack exchange，提问作者Miche