Hi i am trying to use video texture but my code not works
the below is my code
import { EffectComposer } from '/resources/js/three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from '/resources/js/three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from '/resources/js/three/examples/jsm/postprocessing/ShaderPass.js';
const container = document.getElementById('canvas');
const canvasElement = document.createElement('canvas');
container.appendChild(canvasElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
canvas: canvasElement,
alpha: true
});
renderer.setSize(container.offsetWidth, container.offsetHeight);
let video = document.createElement('video');
video.src = '/resources/flame.mp4';
video.autoplay = true;
video.loop = true;
video.muted = true;
video.load();
video.play().then(() => {
console.log("Video is playing successfully.");
}).catch(error => {
console.error("Error occurred when trying to play the video: ", error);
});
let vtexture = new THREE.VideoTexture(video);
vtexture.minFilter = THREE.LinearFilter;
vtexture.magFilter = THREE.LinearFilter;
vtexture.format = THREE.RGBFormat;
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
const effect = {
uniforms: {
tDiffuse: { value: vtexture }
},
vertexShader: `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`,
fragmentShader: `
uniform sampler2D tDiffuse;
varying vec2 vUv;
void main() {
vec4 texture = texture2D(tDiffuse, vUv);
gl_FragColor = texture;
}`
};
const customPass = new ShaderPass(effect);
customPass.renderToScreen = true;
composer.addPass(customPass);
function animate() {
requestAnimationFrame(animate);
if (video.readyState === video.HAVE_ENOUGH_DATA) {
vtexture.needsUpdate = true;
}
composer.render();
}
animate();
it must shows video texture on the screen(I mean in camera by postprocessing but it shows anything
it shows error below
Error occurred when trying to play the video: DOMException: Failed to load because no supported source was found.
I have changed my video file to other or convert it to other form such as avi, mp4 webm or something but none of them works
How to display my video texture in front of camera view by postprocessing proplery?