Would you have a idea to fix the texture size on different size shapes?

[matthieus]

Hi !

I want to put the same texture on different size shapes. I would like the texture to appear with the same aspect depending on the size of the shapes.

I first wanted to correct this by playing with the repeat property of the texture:

texture.repeat.set(geometry.width / window.width, geometry.height / window.height)

However, the values to give to the repeat are different depending on the size of the shape. So I can’t share the same texture for each shape.

So I decide to clone the texture for each shape in order to make the repeat property evolve independently for each texture of each shape:

const textureProperties = renderer.properties.get(texture)
const clonedTexture = texture.clone()
renderer.properties.get(clonedTexture)
for (var key in textureProperties) {
    renderer.properties.update(clonedTexture, key, textureProperties[key])
}
clonedTexture.needsUpdate = true

This works perfectly well. But I think this is not a good practice. Every texture clone is mounted in memory. There must be a better solution.

[prisoner849]

Specifially for such pattern, I would go with shaders: https://codepen.io/prisoner849/full/ZEvQZYx

[weijian-zhu]

Based on this example, is it possible to do the gradient for each graph

[prisoner849]

@weijian-zhu These graphs are meshes, so you can use a texture with a gradient