Giving a .glb a texture in code

Hi guys, i’m completely new to three.js and using .glb type models. I have searched for a few days now on how to get the .png texture attached to the model in the code and im now desperately asking this here.

how do i attach the loaded texture .png on to the loaded model in the code. i have seen many close examples but nothing has worked.

i tried in the function to call gltf.scene.children[0].material.map = texture; but it gives me and error saying property material does not exist on object3D. Would be nice to get what im not understanding here xD

var textureLoader= new THREE.TextureLoader();

var texture = textureLoader.load("models/ninja.png");

texture.encoding = THREE.sRGBEncoding;

texture.flipY = false;

const loader = new GLTFLoader()

loader.load(

    '/models/cibus_ninja.glb',

    function (gltf) {   

    },

    (xhr) => {

        console.log((xhr.loaded / xhr.total * 100) + '% loaded')

    },

    (error) => {

        console.log(error);

    }

);

Any help is appreciated, thanks :slight_smile:

You have to traverse through loaded glb since it always represent a hierarchy of 3D objects:

gltf.scene.traverse( function( object ) {

   if ( object.isMesh ) object.material.map = texture;

} );

I tried this before and it’s giving me the error of : "Property ‘isMesh’ does not exist on type ‘Object3D’ ".
Is it possible that the trouble im having is because there is something wrong with the .glb? It loads just fine in to the scene though.

if (object instanceof THREE.Mesh ) object.material.map = texture; worked for detecting the material. now it’s an error of :
Property ‘map’ does not exist on type ‘Material | Material[]’.
Property ‘map’ does not exist on type ‘Material’

I dont have an seperate @types/three.js in node_modules as i think i read somewhere it was no longer needed as its integrated in the normal npm three.js install. But am i wrong in this? Found this for refrence(https://github.com/mrdoob/three.js/issues/10681).

I’ve tried to load it into a glTF viewer and it looks wrong. It seems you have converted it from FBX to glTF, right? Maybe something went wrong during this conversion.

Regarding the TS issue. Does the following thread at stackoverflow solve your problem?

I have no idea about the 3d model on how it was created. it was given to me since i have no clue about 3dmodeling.

And no that didnt help. I found that earlier and found the instanceof part that worked up to the .material part. what is weird here that if i write object.material.m intellisence gives the option for .map and when it is .map it gives the error. (Property ‘map’ does not exist on type ‘Material | Material[]’.
Property ‘map’ does not exist on type ‘Material’)

i have no idea how that is possible…

By sheer dumb luck i managed to solve the issue and its texture is now working.

    var mat;
    var model;
    var mixer = null;
    var geo;
    const loader = new GLTFLoader();
    loader.load
    (
        '/models/cibus_ninja.glb',
        function (gltf) 
        {   
            model = gltf.scene;
    
            gltf.scene.traverse( function( object ) 
                 {            
                   if ((object instanceof THREE.Mesh))
                    { 
                          mat = object.material;
                          geo = object.geometry;
                          mat.map = texture;
                    }
                });

            scene.add(model);
            
            //Animation activation
            mixer = new THREE.AnimationMixer(model);
            mixer.clipAction(gltf.animations[4]).play();     
        },
        (xhr) => 
        {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded')
        },
        (error) => 
        {
            console.log(error);
        }
    );

I genuinely have no idea why but creating the variables outside the loader for some reason managed to get the texture mapping working. If someone wants to explain why be free, but thanks for the help !@Mugen87
Now to tackle how to add movement controls to this thing xD

1 Like

I had the same problem and this solved the issue. AND I DONT KNOW WHY !!! :grin::rofl::rofl:

By sheer dumb luck i managed to solve the issue and its texture is now working.

THANKS

Note that you’ll also need to set texture.flipY = false; when doing this, or the texture will be upside down.