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

**URL:** <https://discourse.threejs.org/t/cant-add-video-texture-in-the-mesh-in-react-three-fiber/88544>\
**Category:** Questions\
**Created:** [December 9, 2025, 3:17pm UTC](https://discourse.threejs.org/t/cant-add-video-texture-in-the-mesh-in-react-three-fiber/88544 "2025-12-09T15:17:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sakshamwithweb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sakshamwithweb/32/64796_2.png) [@sakshamwithweb](https://discourse.threejs.org/u/sakshamwithweb)\
**Post date:** [December 9, 2025, 3:17pm UTC](https://discourse.threejs.org/t/cant-add-video-texture-in-the-mesh-in-react-three-fiber/88544/1 "2025-12-09T15:17:54Z")

</div>

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 🙁

```js
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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/8/98766d9741ea9dcb555750c44d51350a9bfbb78a.png)

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [December 9, 2025, 10:02pm UTC](https://discourse.threejs.org/t/cant-add-video-texture-in-the-mesh-in-react-three-fiber/88544/2 "2025-12-09T22:02:36Z")

</div>

Do you have lights in your scene?

---

<div class="post-metadata">

**Author:** ![sakshamwithweb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sakshamwithweb/32/64796_2.png) [@sakshamwithweb](https://discourse.threejs.org/u/sakshamwithweb)\
**Post date:** [December 10, 2025, 2:30am UTC](https://discourse.threejs.org/t/cant-add-video-texture-in-the-mesh-in-react-three-fiber/88544/3 "2025-12-10T02:30:27Z")

</div>

Yeah Ambient Light

---

<div class="post-metadata">

**Author:** ![Amr\_Khamis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amr_khamis/32/60400_2.png) [@Amr\_Khamis](https://discourse.threejs.org/u/Amr_Khamis)\
**Post date:** [December 10, 2025, 4:40am UTC](https://discourse.threejs.org/t/cant-add-video-texture-in-the-mesh-in-react-three-fiber/88544/4 "2025-12-10T04:40:19Z")

</div>

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.

```javascript
  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.

---

<div class="post-metadata">

**Author:** ![sakshamwithweb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sakshamwithweb/32/64796_2.png) [@sakshamwithweb](https://discourse.threejs.org/u/sakshamwithweb)\
**Post date:** [December 10, 2025, 6:45am UTC](https://discourse.threejs.org/t/cant-add-video-texture-in-the-mesh-in-react-three-fiber/88544/5 "2025-12-10T06:45:48Z")

</div>

Yeah it worked, Thanks!