javascript - examples - Agregar video como textura en three.js

three.js tutorial español

Question

Estoy trabajando en este ejemplo de Three.js: http://threejs.org/examples/#canvas_geometry_panorama_fisheye

En este ejemplo, en vez de usar 6 imágenes, estoy usando 5 imágenes y un video como textura (El formato de video es .ogv). He editado el ejemplo anterior de la siguiente manera para lograr lo que deseo:

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

El resto del código es exactamente el mismo que en el ejemplo mencionado anteriormente.

En lugar de obtener el resultado deseado (que tiene cinco imágenes representadas en la esfera y un video reproduciéndose en uno de los lados), estoy obteniendo esto:

Las imágenes se están renderizando bien, pero no veo un video reproduciéndose. Solo hay texto blanco en su lugar. Nada más.

Soy nuevo en Three.js y estoy tratando de usar videos como texturas por primera vez. Por favor, ayúdenme haciéndome saber cómo puedo reproducir el video en la región especificada.

Answer 1

Verifique el origen de ESTA página.
Puedes ver que está haciendo un poco más para que su video funcione.
Específicamente, dibujar el video en un lienzo y usar el lienzo como la textura del 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;