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

I am working on this example of Three.js: http://threejs.org/examples/#canvas_geometry_panorama_fisheye

我正在研究Three.js的这个例子：http：//threejs.org/examples/#canvas_geometry_panorama_fisheye

In this example, instead of using 6 images, I am using 5 images and one video as a texture (The video format is .ogv). I have edited the above example as follows to achieve what I desire:

在这个例子中，我使用5个图像和一个视频作为纹理（视频格式为.ogv），而不是使用6个图像。我已按如下方式编辑上述示例以实现我的目标：

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 ) 
);

The rest of the code is exactly same as in the aforementioned example.

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

Instead of getting the desired result (which has five images rendered onto the sphere and one video playing on one of the 'side'), I am getting this:

我没有得到想要的结果（有五个图像渲染到球体上，一个视频在'侧面'上播放），我得到了这个：

The images are being rendered fine, but I don't see a video playing. There's just white text in it's place. Nothing else.

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

I am new to Three.js and I am trying to use videos as textures for the first time. Please help me out by letting me know that how can I get the video played, in the specified region.

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

1 个解决方案

#1

Check the source of THIS page.
You can see he is doing a bit more to get his video working.
Specifically, drawing the video onto a canvas and using the canvas as the texture of the material.

检查本页面的来源。你可以看到他正在做更多的事情让他的视频正常工作。具体来说，将视频绘制到画布上并使用画布作为材质的纹理。

// 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;