Three JS adjust texture on GLTF model to show entire texture

Question

When applying a texture to a flat GLTF model (Floor) I only get a single colour from the texture rather than the desired yellow & black stripe effect. Any help is much appreciated!

Could it be a UV map is required or an adjustment to the actual mesh.
Tried it with various repeat parameters with no luck

Texture used:

Example of texture applied to child within GLTF model:

new THREE.TextureLoader().load( textures[2], function(texture){
                    texture.flipY = false;
                    var material = new THREE.MeshBasicMaterial({map: texture});
                    child.material = material;
                });

score 1 · Accepted Answer · answered Jan 23 '23 at 10:28

When this happens it usually means there are no texture coordinates defined. It's best to check this with a tool like Blender and add add texture coordinates if necessary.

Besides, if you replace or add a color texture to a loaded glTF asset in three.js, you have to add an additional line of code:

texture.flipY = false;
texture.encoding = THREE.sRGBEncoding; // define color space
const material = new THREE.MeshBasicMaterial({map: texture});

Three JS adjust texture on GLTF model to show entire texture

1 Answers1