Calculate meshSize and textureSize for repeat in material

Questions
, , , , ,
1

Hi guys.
I want to map my texture like tiles on different walls. We have different textures and different wall sizes.
I think the best way to have. a good result is to calculate the mesh size and then divide it by the image texture size.
I have some problems I use bounding to understand mesh width and height but sometimes x,y are width and height, and sometimes x,z.
What should I do?

 const meshSize = new THREE.Vector3();
        selectedObject.geometry.computeBoundingBox();
        selectedObject.geometry.boundingBox.getSize(meshSize);
  const textureLoader = new THREE.TextureLoader();

        const textureـbaseColor = await textureLoader.loadAsync(item.baseColor);
        textureـbaseColor.wrapS = THREE.RepeatWrapping;
        textureـbaseColor.wrapT = THREE.RepeatWrapping;
         let aspecRatio= textureـbaseColor.image.width/ textureـbaseColor.image.height;
    
        const repeatX = meshSize.x / (textureـbaseColor.image.width/aspecRatio* 0.0254)
        const repeatY = meshSize.y / (textureـbaseColor.image.height/aspecRatio* 0.0254);
        textureـbaseColor.colorSpace = THREE.SRGBColorSpace;

another is that I do not know Is “textureـbaseColor.image.width” in pixel or meter.I have tried to convert it to meter but result is too big not ok.
Do you have any solution to find repeat upon meshsize and imagetexturesize ?

2

For walls:

  • the best is if your objects have metadata that define their “default” orientation, in this way you could rely on this info to get which direction are width and height
  • alternative - get all 3 sizes and the two largest are (most likely) the width and height of a wall – this assumes that the thickness of a wall is smaller than its width or height

For images:

  • if there is metadata about the actual size of the image in some physical units, you can use it
  • if you have some preexisting knowledge about the texture, you can use it
  • if there is data about DPI (dots per inch) you can use it, but it still does not provide any reliable info on how big is the object which image is in the texture
  • otherwise, you have no reasonable way to get the size, it could be any size, because pixels and meters are unrelated

For example, a tile for a bathroom could be from 1x1" up to 32x32". If you have an image of a tile and no other information, there is no way you could guess the size of the tile in inches.

PS. To understand what I mean, try to guess the size of the arrow head:

image

It is approximately 55 mm and I know this only because of this photo:

image
image779Ă—512 76 KB

3

Triplanar mapping for straight walls

image
image1761Ă—870 124 KB

1 Like
4

The 2 largest numbers are the width and height of that mesh but how can we understand which of them is height?
We need to understand it because we want to use it in calculating repeat.

5

what do you mean by metadata?
Do you mean we can not calculate it ourselves?

and for image size. I use width/height to understand the ratio and I use it for dpi. Correct?

Finally, you said that we can not understand sizes? So There are a lot of home interior design websites created by three.js.What did they use?

6

Would you please explain more?

7

I made example of triplanar:

1 Like
8

Or you can go unwrap uv mapping in a 3d package software! Like, blender or so. :nerd_face:
What you try is procedural way, i wouldn’t go for this.

9

ok.but I have to create a uv that should work for different texture size in threejs.
my software is not static.It is dynamic.
model will created once.
and different textures with different size should be able to load like real world view.
Imagin we have a house we have walls.We have built the walls once.But whenever we want we can change wall by wallpaper,color,tiles,…
How Can we handle it in threejs?

10

whay do you use shaders?

11

I use changed shader for triplanar mapping of straight walls just as example. Triplanar can be applyed for uv in geometry without shader if walls straight. It will be like box mapping. Maybe i missunderstood topic.