I'm currently experimenting with Three.js and found this interesting example:
In my modified version of the example, I decided to use 5 images and a video file (.ogv format) as textures instead of the original 6 images. The code excerpt below showcases my modifications:
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 remains unchanged from the original example.
Despite my efforts, the result is not what I expected. Instead of having five images displayed on the sphere and a video playing on one of the sides, I encountered the following issue:
https://i.sstatic.net/fkJKC.png
The images are rendering correctly, but the video does not play. In its place, I only see white text. I am inexperienced with using videos as textures in Three.js and would appreciate any guidance on how I can successfully display the video in the specified area.