CODEWITHSUNDEEP
javascriptthree.jsthreejs-editor
StMartin
StMartin

Reputation: 89

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!

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

Upvotes: 1

Views: 458

Answers (1)

Mugen87
Mugen87

Reputation: 31026

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

Upvotes: 2

Related Questions