CODEWITHSUNDEEP
three.js
Perdixo
Perdixo

Reputation: 1289

Load video using three.js

My question might seem basic for most of you, but i'm still learning THREE.JS and i'm having difficulties understanding it..

So right now, i've created a slider using images (i'm iterating through each texture). Everything works fine. But i'd like to replace 2 of my images with videos. Right now, my code looks like this : 

(...)
const gl = {
    camera: new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.01, 1000),
    scene: new THREE.Scene(),
    renderer: new THREE.WebGLRenderer(),
    loader: new THREE.TextureLoader()
  };

  const textures = [
    gl.loader.load('https://i.ibb.co/myimage01.jpg'),
    gl.loader.load('https://i.ibb.co/myimage02.jpg'),
    gl.loader.load('https://i.ibb.co/myimage03.jpg'),
    gl.loader.load('https://i.ibb.co/myimage04.jpg')
  ];
(...)

Reading the docs, i understand that i can't load a video using the texture loader right? Is there a workaround? How can i replace my images with some .mp4 videos hosted on the web without having to re-write all my code?

I've tried doing the following : 

var videoTexture01 = new THREE.VideoTexture(
    'https://linktomyvideo.mp4'
  );
  videoTexture01.minFilter = THREE.LinearFilter;
  videoTexture01.magFilter = THREE.LinearFilter;
  videoTexture01.format = THREE.RGBFormat;

  const gl = {
    camera: new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.01, 1000),
    scene: new THREE.Scene(),
    renderer: new THREE.WebGLRenderer(),
    loader: new THREE.TextureLoader()
  };

  const textures = [
    videoTexture01,
    gl.loader.load('https://i.ibb.co/myimage02.jpg'),
    gl.loader.load('https://i.ibb.co/myimage03.jpg'),
    gl.loader.load('https://i.ibb.co/myimage04.jpg')
  ];

but the video don't show up, i only have a black screen.. (the images continues to work fine, and i don't have any error in the console)

Upvotes: 1

Views: 2398

Answers (1)

Perdixo
Perdixo

Reputation: 1289

My bad! Reading the docs i've found the answer..

For thos having the same problem, here is my workaround. I've started by adding the video to my html file : 

<video id="video01" loop crossOrigin="anonymous" playsinline style="display:none">
      <source src="https://linktomyvideo.mp4"
        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    </video>

And then in my js :

video01 = document.getElementById('video01');
  video01.play();
  const videoTexture01 = new THREE.VideoTexture(video01);

  const gl = {
    camera: new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.01, 1000),
    scene: new THREE.Scene(),
    renderer: new THREE.WebGLRenderer(),
    loader: new THREE.TextureLoader()
  };

  const textures = [
    videoTexture01,
    gl.loader.load('https://i.ibb.co/myimage02.jpg'),
    gl.loader.load('https://i.ibb.co/myimage03.jpg'),
    gl.loader.load('https://i.ibb.co/myimage04.jpg')
  ];

Upvotes: 2

Related Questions