在 Three.js 中添加视频作为纹理

我正在研究 Three.js 的这个示例：http://trijs.org/examples/#canvas_geometry_panorama_fisheye

在此示例中，我没有使用 6 张图像，而是使用 5 张图像和一个视频作为纹理（视频格式为 .ogv）。我将上面的示例编辑如下以实现我的愿望：

video = document.createElement('video');
video.autoplay = true;
video.src = "textures/videos/Row1Col1.ogv";
var videoTexture = new THREE.Texture(video);
    videoTexture.needsUpdate = true;

var materials = [
    videoTexture, // right
    loadTexture( 'textures/cube/Park2/negx.jpg' ), // left
    loadTexture( 'textures/cube/Park2/posy.jpg' ), // top
    loadTexture( 'textures/cube/Park2/negy.jpg' ), // bottom
    loadTexture( 'textures/cube/Park2/posz.jpg' ), // back
    loadTexture( 'textures/cube/Park2/negz.jpg' ) // front
];

mesh = new THREE.Mesh( 
    new THREE.BoxGeometry( 300, 300, 300, 32, 32, 32 ), 
    new THREE.MultiMaterial( materials ) 
);

其余代码与上述示例中的完全相同。

我没有得到所需的结果（其中有五个图像渲染到球体上，一个视频在“一侧”播放），而是得到了以下结果：

图像渲染得很好，但我看不到视频正在播放。它的位置上只有白色文字。没有其他的。

我是 Three.js 的新手，我第一次尝试使用视频作为纹理。请帮助我，让我知道如何在指定区域播放视频。

检查来源THIS页面（Three.js 版本 60）。
您可以看到他为让视频正常运行付出了更多努力。
具体来说，将视频绘制到画布上并使用画布作为材质的纹理。

// create the video element
video = document.createElement( 'video' );
video.src = "textures/videos/Row1Col1.ogv";
video.load(); // must call after setting/changing source
video.play();
videoImage = document.createElement( 'canvas' );
videoImage.width = 480;
videoImage.height = 204;

videoImageContext = videoImage.getContext( '2d' );
// background color if no video present
videoImageContext.fillStyle = '#000000';
videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );

videoTexture = new THREE.Texture( videoImage );
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;

这个答案现在已经旧了（三.js v60），查看其他答案以了解替代方法