THREEJS - GLB Import & Mapping Image Texture

667 views Asked by At

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;
            }
        });

enter image description here

** Added the texture to :-

child.material.map = texture

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

enter image description here

1

There are 1 answers

4
Mugen87 On

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;