Pridanie videa ako textúry v three.js - javascript, three.js, renderovanie

Pracujem na tomto príklade súboru Three.js: http://threejs.org/examples/#canvas_geometry_panorama_fisheye

V tomto príklade namiesto 6 obrázkov používam ako textúru 5 obrázkov a jedno video (formát videa je .ogv). Vyššie uvedený príklad som upravil takto, aby som dosiahol to, po čom túžim:

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

Zvyšok kódu je úplne rovnaký ako vo vyššie uvedenom príklade.

Namiesto získania požadovaného výsledku (ktorý má päť obrázkov vykreslených do sféry a jedno video prehrávané na jednej z bočných strán), dostávam toto:

Obrázky sa vykresľujú v poriadku, ale nevidím videozáznam. Na jeho mieste je iba biely text. Nič iné.

Som v Three.js nováčikom a pokúšam sa po prvýkrát použiť videá ako textúry. Prosím, pomôžte mi tým, že mi dáte vedieť, ako môžem dosiahnuť spustenie videa v určenej oblasti.

odpovede:

Skontrolujte zdroj TOTO str.
Môžete vidieť, že robí trochu viac pre to, aby jeho video fungovalo.
Konkrétne kreslenie videa na plátno a použitie plátna ako textúry materiálu.

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