Fixed texture size in Three.js

Question

I am building quite a complex 3D environment in Three.js (FPS-a-like). For this purpose I wanted to structure the loading of textures and materials in an object oriënted way. For example; materials.wood.brownplank is a reusable material with a certain texture and other properties. Below is a simplified visualisation of the process where models uses materials and materials uses textures.

loadTextures();
loadMaterials();
loadModels();

//start doing stuff in the scene

I want to use that material on differently sized objects. However, in Three.js you can't (AFAIK) set a certain texture scale. You will have to set the repeat to scale it appropiate to your object. But I don't want to do that for every plane of every object I use.

Here is how it looks now

As you can see, the textures are not uniform in size.

Is there an easy way achieve this? So cloning the texture and/or material every time and setting the repeat according to the geometry won't do :)

I hope someone can help me.

Conclusion:

There is no real easy way to do this. I ended up changing my loading methods, where things like materials.wood.brownplank are now for example getMaterial('wood', 'brownplank') In the function new objects are instantiated

yaku yaku · Accepted Answer · 2013-07-09T15:01:12

You should be able to do this by modifying your geometry UV coordinates according to the "real" dimensions of each face.

In Three.js, UV coordinates are relative to the face and texture (as in, 0.0 = one edge, 1.0 = other edge), no matter what the actual size of texture or face is. But by modifying the UVs in geometry (multiply them by some factor based on face physical size), you can use the same material and texture in different sizes (and orientations) per face.

You just need to figure out the mapping between UVs, geometry scale and your desired working units (eg. mm or m). Sorry I don't have, or know a ready algorithm to do it, but that's the approach you probably need to take. Should be quite doable with a bit of experimentation and google-fu.

Fixed texture size in Three.js

1 Answers