Can't add Video texture in the mesh in React Three Fiber

Questions
1

I’m loading the GLB model and trying to apply a texture to its Screen mesh. I updated the map property, but the texture still doesn’t appear :slight_frown:

const Mobile = () => {
    const gltf = useLoader(GLTFLoader, "/glbs/Mobile.glb")
    const texture = useVideoTexture("/video.mp4")
    useEffect(() => {
        gltf.meshes.Screen.material.map = texture
        gltf.meshes.Screen.material.toneMapped = false
        gltf.meshes.Screen.material.color = new THREE.Color("blue")
        console.log(gltf)
    }, [gltf])
    return <primitive object={gltf.scene} />
}

image
image1920×1080 145 KB

2

Do you have lights in your scene?

3

Yeah Ambient Light

4

Your original code wasn’t wrong in logic, but the reason it stayed black is because the “Screen” mesh in the GLB was using a material that doesn’t support video textures.

  const gltf = useLoader(GLTFLoader, "/glbs/Mobile.glb");
  const texture = useVideoTexture("/video.mp4");
  useEffect(() => {
    const lake = gltf.scene.getObjectByName("Screen");
    lake.material = new THREE.MeshStandardMaterial({
      color: "red",
      metalness: 0,
      roughness: 1,
    });
    lake.material.map = texture;
    lake.material.toneMapped = false;
    lake.material.color = new THREE.Color("blue");
    lake.material.needsUpdate = true;
  }, [gltf, texture]);

Also make sure the video file is inside /public (or imported), otherwise the texture will load black.

2 Likes
5

Yeah it worked, Thanks!

1 Like