How do I map a video texture onto a specific material of a 3D object using three js

107 views Asked by At

I am trying to create a website that has a 3D model of a computer. The idea is the user would be able to watch a video on the computer... So the issue I have is I didn't make the model and I am fairly new to both three.js and 3D models in general.

Here is the model in blender: pc model

I have some code that renders the model into the website so that is fine, I also have some code that creates the video and I can hear the audio of the said video playing but I cannot see it. I don't know how to map the video in order to replace the 'Screen' material so if anyone has an idea it would be greatly appreciated!

Here is the code for the rendering:

const VideoPC = () => {
  const { scene } = useGLTF("./videoPC/videoComputer.glb");
    
  const video = document.createElement("video");
  video.src = "./src/assets/myVideo.mp4";
  video.loop = true;
  video.muted = false;
  
  
  

  const videoTexture = new THREE.VideoTexture(video);
  videoTexture.minFilter = THREE.LinearFilter;
  videoTexture.magFilter = THREE.LinearFilter;
  videoTexture.format = THREE.RGBFormat;



  scene.traverse((node) => {
    if (node.isMesh) {
      const materials = Array.isArray(node.material) ? node.material : [node.material];
      for (let i = 0; i < materials.length; i++) {
        const material = materials[i];
        if (material.name === "Screen") {
          material.map = videoTexture;
          material.needsUpdate = true;
        }
      }
    }
  });

I tried asking chatGPT in the idea that it would help find the material I needed to replace but that didn't exactly work, the scene.traverse is what it gave me to try but currently I still don't see the video.

0

There are 0 answers