Video texture on tube geometry not appearing

Questions
,
1

Hello everyone!

I’m trying to use a video texture on a tube geometry, and everything seem to be set out correctly, but the texture is not appearing…

here is a fiddle: magical-lumiere-mj6oz - CodeSandbox

in my HTML:

    <video
      id="video"
      playsInline
      webkit-playsinline="true"
      muted
      loop
      autoPlay
      width="320"
      height="240"
      src="https://res.cloudinary.com/dzyccx5om/video/upload/v1614517013/pandemic_msuame.mp4"
      style={{ display: "none" }}
    ></video>

in JS:

const video = document.getElementById("video");

//video texture:
const videoTexture = new THREE.VideoTexture(video);

const videoMaterial = new THREE.MeshBasicMaterial({
  map: videoTexture,
  side: THREE.DoubleSide,
  toneMapped: false
});


videoTexture.needsUpdate = true;

this.tubeMesh3 = new THREE.Mesh(this.tubeGeometry2, videoMaterial);
this.tubeMesh3.geometry.elementsNeedUpdate = true;
this.scene.add(this.tubeMesh3);
2

Um, it seems the tube does not even appear without the video texture in your code sandbox. Can you please verify?

1 Like
3

@Mugen87 thanks for checking! I just fixed it: magical-lumiere-mj6oz - CodeSandbox
the video texture appears black