# Texture Not Displaying After Loading it unto gltf model

**URL:** <https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057>\
**Category:** Questions\
**Tags:** gltf-loader, textures\
**Created:** [June 19, 2024, 9:42pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057 "2024-06-19T21:42:21Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fizzy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fizzy/32/52197_2.png) [@Fizzy](https://discourse.threejs.org/u/Fizzy)\
**Post date:** [June 19, 2024, 9:42pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/1 "2024-06-19T21:42:21Z")

</div>

Hey guys, I am quite annoyed at this, but I am trying to change the texture of my model but I cannot see the chnage on the model, I am not getting any error or any issue in my console and even the console.log gives me the correct response so has anyone ever dealt with this issue before?

```javascript
const tile = new THREE.TextureLoader();
    const taylorTile = tile.load('./texture/Tile.jpg');
const loadGLTFModel = () => {
      const loader = new GLTFLoader();
      loader.load(
        'Buggy.gltf',
        (gltf) => {
          const model = gltf.scene;
scene.add(model);
          model.traverse((child) => {
            if (child.isMesh) {
              
              if (
                child.isMesh &&
                child.userData.name
              ) {
                console.log("Applying texture to:", child.userData.name);
                child.material.map = taylorTile;
                child.material.needsUpdate = true;
}
}
}
              }undefined,
        (error) => {
          console.error('Error loading model:', error.message, error.stack);
        }
      );
    };
    loadGLTFModel();

```

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [June 20, 2024, 1:18am UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/2 "2024-06-20T01:18:59Z")

</div>

And you’re seeing your logs, etc?

Can you try moving the gltf loading Inside the loaded callback of the texture?

```javascript
new THREE.TextureLoader('./texture/Tile.jpg',(tex)=>new THREE.GLTFLoader().load('Buggy.gltf',(gltf)=>gltf.scene.traverse(e=>e.isMesh&&(e.material.map=tex)));

```

Or the async variant:

let tex = await (new THREE.TextureLoader()).loadAsync(“./texture/Tile.jpg”);

let glb = await (new THREE.GLTFLoader()).loadAsync(“Buggy.gltf”);

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [June 20, 2024, 11:55am UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/3 "2024-06-20T11:55:48Z")

</div>

Would also try:

```javascript
taylorTile.flipY = false;
taylorTile.colorSpace = THREE.SRGBColorSpace; // if it's a color (not data) texture

```

It shouldn’t be necessary to do `.needsUpdate = true` on the material.

---

<div class="post-metadata">

**Author:** ![Fizzy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fizzy/32/52197_2.png) [@Fizzy](https://discourse.threejs.org/u/Fizzy)\
**Post date:** [June 20, 2024, 3:02pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/4 "2024-06-20T15:02:44Z")

</div>

I tried this but nothing occurred. Also for reference, the texture and gltf loader is in a useEffect bracket.

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [June 20, 2024, 4:33pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/5 "2024-06-20T16:33:30Z")

</div>

are you creating this model in React?

---

<div class="post-metadata">

**Author:** ![Fizzy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fizzy/32/52197_2.png) [@Fizzy](https://discourse.threejs.org/u/Fizzy)\
**Post date:** [June 20, 2024, 5:01pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/6 "2024-06-20T17:01:11Z")

</div>

Yes I am creating this using react with javascript

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [June 20, 2024, 9:04pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/7 "2024-06-20T21:04:05Z")

</div>

Instead of using Vanilla `GLTFLoader` and `TextureLoader` provided by three.js use [`useGLTF`](https://github.com/pmndrs/drei#gltf--usegltf) from react three drei.

First you should convert your model into a jsx component to make it compatible and work better with React-Three-Fiber to do that just follow the steps on the [gltfjsx](https://github.com/pmndrs/gltfjsx) site.

When you will convert the model using `gltfjsx` the jsx compnent will have all the seperate children and parent objects, making them all individually customisable. There you can easily attach the texture you are trying to apply on to your model using [`useTexture`](https://github.com/pmndrs/drei#texture--usetexture) which will make it easier to load and use the textures.

---

<div class="post-metadata">

**Author:** ![Fizzy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fizzy/32/52197_2.png) [@Fizzy](https://discourse.threejs.org/u/Fizzy)\
**Post date:** [June 21, 2024, 6:13pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/8 "2024-06-21T18:13:24Z")

</div>

Thank you I am trying it now. Will update shortly!

---

<div class="post-metadata">

**Author:** ![Fizzy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fizzy/32/52197_2.png) [@Fizzy](https://discourse.threejs.org/u/Fizzy)\
**Post date:** [June 21, 2024, 8:24pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/9 "2024-06-21T20:24:35Z")

</div>

So I tried that and it still does not work this is the texture I am trying to add to it.

I am somewhat getting to see the color but not the actual texture as depicted in the image.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/8/a800cd61cb8b3240143f783c56b34f2b7e4f952c.png)

I basically just went online and downloaded an image i wanted to use for the texture.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [June 21, 2024, 9:39pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/10 "2024-06-21T21:39:30Z")

</div>

Does your model have UVs? You’ll need UV layouts to add textures to models, usually the model and the texture are designed to be used together – if not, you’ll probably want to use something like Blender to do the UV layout.

Also, make sure the scene has lighting. A demo may be helpful if you still can’t see any result.

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [June 22, 2024, 6:57am UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/11 "2024-06-22T06:57:17Z")

</div>

Can you share any JSFiddle, codepen or codesandbox so that we can see in detail what the problem in your code really is? If not what about the model and the part where you want to apply the texture.

---

<div class="post-metadata">

**Author:** ![Fizzy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fizzy/32/52197_2.png) [@Fizzy](https://discourse.threejs.org/u/Fizzy)\
**Post date:** [June 24, 2024, 4:14pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/12 "2024-06-24T16:14:34Z")

</div>

No my model does not have UV’s. But my scene and my lighthing are already created and defined.

This is what the texturing looks like before I have applied it  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/d/ad7246a5be5a30c34532db58be13816570fbcdd6.png)

This is what the texturing looks like after I have applied it

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/e/ae2df95c108233fbc4eb61bb912f94c4e8a32155.png)

---

<div class="post-metadata">

**Author:** ![Fizzy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fizzy/32/52197_2.png) [@Fizzy](https://discourse.threejs.org/u/Fizzy)\
**Post date:** [June 24, 2024, 4:20pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/13 "2024-06-24T16:20:25Z")

</div>

Sure here is the whole code.

```javascript
import { useEffect } from 'react';
import { useThree } from '@react-three/fiber';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

export default function LoadModel() {
  const { camera, scene, gl } = useThree();

  useEffect(() => {
    // Set camera position and orientation
    camera.position.set(30, 30, 30);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    camera.fov = 60;

    // Add ambient light
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);

    // Add directional light
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(0, 20, 10);
    scene.add(directionalLight);

    // Set scene background and fog
    scene.background = new THREE.Color(0x2b2b2b);

    // Load texture
    const hardwoodTexture = new THREE.TextureLoader().load('./texture/HardWoodOak.jpg');
    hardwoodTexture.flipY = false;
    hardwoodTexture.encoding = THREE.sRGBEncoding;

    // Create materials
    const hardwoodMaterial = new THREE.MeshBasicMaterial({ map: hardwoodTexture });

    // Function to traverse and texture the model
    const loadGLTFModel = () => {
      const loader = new GLTFLoader();

      loader.load(
        'buggy.gltf',
        (gltf) => {
          const model = gltf.scene;
        let child;
          // Traverse through the model to find parts named "floor"
          model.traverse((node) => {
            if (node.isMesh && node.userData.name.includes('Floor')) {
                node.material = hardwoodMaterial;
                child = node
            }
          });

          scene.add(child);
        },
        undefined,
        (error) => {
          console.error('Error loading model:', error.message, error.stack);
        }
      );
    };

    // Load the GLTF model
    loadGLTFModel();

  }, [scene, camera, gl]);

  return null;
}

```

This is what the material looks like:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/f/3f6e914144c65a3cc0ee3dbefa2c96aae1188361.jpeg)

This is what I am getting shown:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/a/0a48fea7158310c958d0f37336a91abfae81063a.png)

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [June 24, 2024, 7:36pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/14 "2024-06-24T19:36:14Z")

</div>

UVs define how a texture wraps onto a model. Without UVs (or something like them), the texture cannot be wrapped on the model — you may just be seeing pixel 0,0 from the texture here.

If the model is just a box or plane, you can use built-in three.js geometries, which come with basic UVs. To add UVs and a texture to your model, you would want to use something like Blender I think. Or something like a triplanar projection, which is (currently) more difficult to do in three.js.

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [June 25, 2024, 10:29am UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/15 "2024-06-25T10:29:26Z")

</div>

First of all since you are making your project in `R3F` and not in `three.js` instead of using `GLTFLoader` you can use [`gltfjsx`](https://github.com/pmndrs/gltfjsx) to convert the model into a React component, that would make modification of children nodes easier. Also you should take a look at [`React-Three-Drei`](https://github.com/pmndrs/drei) an awesome R3F component library that could save you loads of time, and I would prefer you to specially take a look at the [`Texture / useTexture`](https://github.com/pmndrs/drei#texture--usetexture) helper of `drei`

Currently, there are only 2 possible solution for applying this texture on your geometry.

1. To is to define the UVs to the texture as already stated by @donmccurdy that would make the texture to wrap on the model just as you want in a customised manner.

2. To convert the geometry into a `jsx` component using the [`gltfjsx`](https://github.com/pmndrs/gltfjsx) cli that would give you the component of the model containing all the geometry nodes that can be modified separately and if the geometry have all the faces of the floor as a separate node you can easily map the texture on each node using the [`Texture / useTexture`](https://github.com/pmndrs/drei#texture--usetexture) helper

There is also an online [`gltfjsx`](https://github.com/pmndrs/gltfjsx) converter that can instantly convert the model as well as provide the code: [Poimandres gltf](https://gltf.pmnd.rs/)

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [June 25, 2024, 2:13pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/16 "2024-06-25T14:13:44Z")

</div>

> [@AshhadDevLab](#):
>
> if the geometry have all the faces of the floor as a separate node you can easily map the texture on each node using the [`Texture / useTexture`](https://github.com/pmndrs/drei#texture--usetexture) helper

Note – this approach will still require that the meshes have UVs.

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [June 25, 2024, 3:19pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/17 "2024-06-25T15:19:42Z")

</div>

Correct me if I am wrong cause I am still learning too, but I worked on a project in which I had a roof model which was made in [SketchUp](https://www.sketchup.com/en) by the client and he wanted a texture on it, so I imported the model in blender and observed that the model had its all nodes separated, what I did instead of defining the UVs I applied the same texture on all the separate nodes and it did the work just fine.

So this was the model with this jsx code:

 ![Screenshot 2024-06-25 at 8.17.55 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/5/750c627df78078cdf293d5aee398dd2b56f609a5.jpeg)

And I modified the code like this:

 ![Screenshot 2024-06-25 at 8.18.52 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/0/0077eb0822ed9bfe9f42016b013a3ccc84c6ffb6.png)

And got the texture to wrap on the object just fine.

---

<div class="post-metadata">

**Author:** ![Fizzy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fizzy/32/52197_2.png) [@Fizzy](https://discourse.threejs.org/u/Fizzy)\
**Post date:** [June 25, 2024, 4:04pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/18 "2024-06-25T16:04:16Z")

</div>

Did you load roof textures the same way as above?

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [June 25, 2024, 8:20pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/19 "2024-06-25T20:20:17Z")

</div>

As in the SS I have attached? Yes!

---

<div class="post-metadata">

**Author:** ![Fizzy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fizzy/32/52197_2.png) [@Fizzy](https://discourse.threejs.org/u/Fizzy)\
**Post date:** [June 25, 2024, 9:38pm UTC](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057/20 "2024-06-25T21:38:52Z")

</div>

So I did all that there was some issues so I had to create it as glb rather than gltf but this is my code

```javascript
import { useEffect } from "react";
import { useThree, useLoader } from "@react-three/fiber";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { TextureLoader } from 'three/src/loaders/TextureLoader'

export default function LoadModel() {

  const gltf = useLoader(GLTFLoader, "./buggy.glb");
  console.log(gltf)
  const colorMap = useLoader(TextureLoader, './texture/HardWoodOak.jpg')
  return (
    <>
      <mesh geometry={gltf.nodes[`IfcSlabFloorFloorFloorWood_Truss__Joist_12"_-_Carpet_Finish`].geometry} >
        <meshBasicMaterial map={colorMap}/>
        </mesh>
    </>
  );
}

```

```javascript
// App.js
import { Canvas } from '@react-three/fiber';
import LoadModel from './LoadModel';
import { OrbitControls } from '@react-three/drei';
import './App.css';

function App() {
  return (
    <div className="canvas-container">
      <Canvas>
      <ambientLight intensity={0.1} />
      <directionalLight
        position={[5, 5, 5]}
        intensity={1}
        castShadow
      />
      
      {/* Second directional light */}
      <directionalLight
        position={[-5, -5, -5]}
        intensity={0.5}
      />
      <OrbitControls
                    enablePan={true}
                    enableZoom={true}
                  />
        <LoadModel />
      </Canvas>
    </div>
  );
}

export default App;

```

Here is the result:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/8/2876521a64440dff58893c1c6d7c13307a3682e6.png)

Here is a link to the glb model:

> **[buggy.glb](https://drive.google.com/file/d/1WfS0RbIhuEG3oAkgxJrXecKvo7vAoxcw/view?usp=sharing)**
>
> Google Drive file.

Here is a link to the img texture:

> **[HardWoodOak.jpg](https://drive.google.com/file/d/1Yd5k6MUa7lGvsLU6P4SMqyXp9bPrb0cH/view?usp=sharing)**
>
> Google Drive file.

I tried transforming it but it was already in a glb format so I decided no to transform,it I played around with the lights and yet no changes. Thus I have provided my entire functions and material in hopes that someone can tell me what else I need to do. Thank you all again so very much!!!

[Next page](https://discourse.threejs.org/t/texture-not-displaying-after-loading-it-unto-gltf-model/67057.md?page=2)