在three.js中将视频添加为纹理

Question

我正在研究Three.js的示例：http://threejs.org/examples/#canvas_geometry_panorama_fisheye 在这个例子中，我使用了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的新手，第一次尝试使用视频作为纹理。 请告诉我如何在指定区域播放视频，帮帮我。

- Galileo Verma

Answer 1

查看此页面的源代码（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;

这个答案已经过时了（three.js v60），请查看其他答案以寻找替代方法。

- 2pha

---

嘿，兄弟，这个不起作用，你可能需要更新它。 - Justin Meskan

Answer 2

自three.js的r83版本以来，现在有了一个VideoTexture.js类。

请参见下面的示例（摘自文档）：

//assuming you have created a HTML video element with id="video"
var video = document.getElementById( 'video' );

var texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

- Jérémie Boulay