Modify Mesh faces and UV mapping at runtime

Questions
1

Hello everyone!

Is it possible to change a Mesh and it’s UV mapping at runtime? For example what I would like to do is create a simple box, but then make sure that each side is comprised of nine regular square faces instead of a single face and then adapt the UV mapping such that those faces shows a part of a texture map containing for example different walls and windows.

I know how to create such a model and texture in Blender and import the resulting .glb file, but I was hoping there is a way to do something like this programatically.

I am new with Three.js and would appreciate any hints and tipps on this issue!

Thanks in advance and happy hollidays!
Patrick

2

You can build the desired geometry procedurally, merging and rotating PlaneGeometry:

Picture:

изображение
изображение940×860 67.9 KB

Demo: https://codepen.io/prisoner849/full/emORZQB

6 Likes
3

Another option is to modify BoxGeometry.js.
three.js docs

It is quite well documented in the code.
three.js/src/geometries/BoxGeometry.js at 2898f5b1ba10b1e94174c0a62d072f5f7b80442c · mrdoob/three.js · GitHub

You must ensure that the number of segments can be completely divided by the desired subdivision.

The number of material groups must be increased.

From line 75, more precisely 105, the uv calculation can be manipulated.

To do this, the variables groupStart, groupCount ( Lines 40, 71, 140, 148, 152 ) must be calculated accordingly.

3 Likes
4

Hello @prisoner849, hello @hofk!

Sorry for the late reply, I was away during the hollidays.

Thank you both very much for your answers, that looks just like what I’m trying to acomplish and it helped a lot for my understanding!

I wish you an early happy new year and best regards,
Patrick

2 Likes
5

Hello again!

Thanks again @prisoner849 for the example, that does exaclty what I need and it really helped a lot!

I do have a follo-up question and was hoping, that you could point me in the right direction again.

I would like to be able to rotate certain faces of the resulting mesh by 90 degrees (for example the light green part in the lower right corner of the top face in your example image). I have tried changing the order in which the values for the UV mapping are generated, but best I could do this way was drawing them at an angle of 45 degrees instead of 90 degrees.

I also tried rotating the respective plane mesh bevore merging, but then it just disappeard. I suspect that the currG.translate() call must accomodate for the rotation as well, but I could not figure out how yet.

I would be very thankfull for any tipps you might have for this!

Thanks in advance and best regards,
Patrick