CODEWITHSUNDEEP
javascriptthree.js
user10322453
user10322453

Reputation: 81

I need to repeat a texture depending on unique object sizes

Let me explain.

I need to deal with having multiple textures, I know how to do this, or rather which method to use when doing it.

The solution to that was UV mapping on geometries to repeat textures.

The problem with that is I have no idea how to do that, and the documentation on UV mapping in THREE.js is super complicated to me.

Let's say I have three different objects with the same texture. These are the sizes:

(1,1,1) - I will need this one to have a 2x2 UV grid thing. AKA 4 repeats on each face. (1,2,1) - I will need this one to have a 2x4 UV grid on the sides, not the top or bottom. (3,1,3) - I will need this to have a 6x6 UV grid on the top and bottom, but not the sides.

How would I go about not loading in 3 different clones of the texture, and using UV maps on each specific geometry to repeat the texture based on it's respective size?

EDIT: I have set the segments of boxbuffergeometry, but the texture does not repeat based on the uvs. This is a pretty annoying issue now. I need to set the texture repetition/segments/uvs in the geometry.

Upvotes: 0

Views: 96

Answers (1)

Don McCurdy
Don McCurdy

Reputation: 11980

UVs may be scaled as followed, assuming you're using some sort of BufferGeometry. Scaling UVs by 2X will cause a texture to be tiled twice.

var uvs = mesh.geometry.attributes.uv;

for ( var i = 0; i < uvs.count; i++ ) {

  uvs.setXY( i, uvs.getX( i ) * 2, uvs.getY( i ) * 2 );

}

Once you've done this, you can safely merge geometries that share a material, even if textures are repeated different numbers of times.

See https://threejs.org/docs/#api/en/core/BufferAttribute, as of three.js r96.

Upvotes: 2

Related Questions