How to keep a constant texture size?

Questions
, ,
1

ok, so I’m going to give my question another shot now that I understand my problem a Lil clearer. I want to know if it’s possible to keep a texture the same size regardless of the mesh it is applied to. The black and white mesh is the scores mesh that I want the smaller meshes to sample the texture from. In other words, I want to keep the same size texture on the pink and green mesh so that it looks like one texture regardless of the pink and green mesh position. as if displaying the part of the texture it covers.

I would greatly appreciate some help thanks

the code: https://codepen.io/miguel007/pen/rNKMLwK?editors=0011

sampling
sampling685×742 46.6 KB

2

If I understand it correctly, the smaller areas on the top right are supposed to be exactly the section of the large area (black/white) as a texture.

To do this, one must calculate the uv values of the smaller areas according to the relative size. I would use a custom geometry to do this.

For this you can use the PlaneGeometry three.js/PlaneGeometry.js at f021ec0c9051eb11d110b0c2b93305bffd0942e0 · mrdoob/three.js · GitHub
to do this.

You can bring the relative dimensions as parameters into the modified PlaneGeometry.


for ( let iy = 0; iy < gridY1; iy ++ ) {

	const y = iy * segment_height - height_half;

	for ( let ix = 0; ix < gridX1; ix ++ ) {

		const x = ix * segment_width - width_half;

		vertices.push( x, - y, 0 );

		normals.push( 0, 0, 1 );

		uvs.push( ix / gridX );         // Calculate according to your needs
		uvs.push( 1 - ( iy / gridY ) ); // Calculate according to your needs

	}

}
1 Like