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

Mugen87 · Accepted Answer · 2023-01-23 10:28:17Z

2

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

answered Jan 23, 2023 at 10:28

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jerther Over a year ago

I generate my own glTF data procedurally (points, triangles, buffers, everything). No Blender or anything. How do I generate texture coordinates??

Mugen87 Over a year ago

There is no general solution for this. You usually author texture coordinates in a tool like Blender. Otherwise you have to do it analytically but that means you need knowledge over the geometry. E.g. if you generate cubes, it's easy to generate texture coordinates. This is not true for arbitrary geometries. That usually requires a uv-unwrapping algorithm. three.js does not support such routines by default though.

Jerther Over a year ago

Well after some digging around, it's quite easy actually. I just have to map each 3D point of the geometry to a 2D point in the texture, where the texture size is normalized to 1x1. So for example, let's say I have a triangle made of three points: (0, 0, 0), (10, 0, 0), (0, 10, 0), then a UV map could be (0, 0), (1, 0), (0, 1). I agree this is not as easy for arbitrary shapes!

Collectives™ on Stack Overflow

Three JS adjust texture on GLTF model to show entire texture

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related