Modify Mesh faces and UV mapping at runtime

[Yrucoo]

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

[prisoner849]

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

Picture:

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

[hofk]

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.