I am working on this example of Three.js:

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:

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.

I am working on this example of 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:

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.

• javascript
• three.js
• rendering

2 Answers 2

Check the source of THIS page (Three.js version 60).
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;

This answer is now old (three.js v60), view other answers for alternative methods

Since the r83 version of three.js, you have now a VideoTexture.js class.

See the exemple below (from the documentation) :

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