Search code examples
javascriptthree.jsthreejs-editor

Three JS adjust texture on GLTF model to show entire texture

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:

Texture Used

Example of texture applied to child within GLTF model: Texture applied to GLTF

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

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