THREEJS - GLB Import & Mapping Image Texture

Question

I'm trying to map an Image onto my GLB import, however the GLB is just showing up as black. Not really sure where I'm going wrong here.

    let textureLoader= new THREE.TextureLoader();
    let texture = textureLoader.load("images/pexels-luis-quintero-2471234.jpeg");

    texture.flipY = true;

    gltfLoader.load( file.path,  (gltf) => {

        gltf.scene.traverse( (child, key) => {
   
            if(child.isMesh){
                child.material = new THREE.MeshBasicMaterial();
         
                let material = new THREE.SpriteMaterial( { map: texture } );
                let sprite = new THREE.Sprite( material );

                child.material.map = sprite;
            }
        });

** Added the texture to :-

child.material.map = texture

However the image does not fit to the dimensions of the GLB

Answer 1

An instance of THREE.Sprite is a 3D object similar to THREE.Mesh. You can't assign a sprite to the map property of a material. Do this:

child.material = new THREE.MeshBasicMaterial();
child.material.map = texture;

Besides, if you add a manually loaded color texture to a glTF asset, make sure to add:

texture.encoding = THREE.sRGBEncoding;