Procedural/Parametric furniture in Threejs

Hi, I’m looking for code examples of procedurally generated meshes. Specifically to create custom furniture. So things like creating geometry from scratch, moving vertices along an axis (and also moving their UV coordinates to avoid texture stretching), etc.

Is there an open source library that exist? Basically I don’t want to reinvent the wheel and could make use a higher level set of functions.

Any tips related to this topic are welcomed.

Thank you :slight_smile:

I have an on-going project about procedural 3D assets. Not focused specifically on furniture, but on everyday items. The only furniture so far is a chair. Tables, wardrobes, beds and other items will be added later this year.

https://boytchev.github.io/3d-assets/

6 Likes

Hi there.
I can make this furniture as like screenshot.
My Discord : blueocean7335

it exists x.com

they use threejs + react-three-fiber, check his twitter out, they go into some detail. you would want this combo for visuals, making stuff look good, and for easier access to eco system components and the sheer amount of pre-existing helpers and tools.

one possible means to achieve this could be CSG https://codesandbox.io/p/sandbox/csg-house-y52tmt?file=%2Fsrc%2FApp.js

1 Like

Hey Mr @drcmda,

i looked through the configurators you linked via X. I wondered if the table configurator (Configurator - Hulo) is Procedural/Parametric as the OP asked? I do not get how they are able to scale the table in irregular shapes without texture distorsion… see images:


Any ideas, i dont think csg is the solution here is it? Maybe something like texture projection, but that would not be possible for the edges

if these shapes are cut out of a rectangle i do believe the uvs should remain intact. i have not tried but i don’t see why not. if they do use csg i don’t know. to some extend you can open react dev tools and look into the component tree.

1 Like

Yes you are right for the top/bottom, but for the edge there would be messed up UVs, alright i’ll dive into it! Thanks for the great ressource, they make awesome configurators

it might have special uv transforms. i’ve collected a few here GitHub - pmndrs/maath: 🪶 Math helpers for the rest of us applyCylindricalUV could maybe work. here’s an example for that https://codesandbox.io/p/sandbox/cylindrical-decal-projection-z4y23z

but if it’s more complex than that i’m afraid you’ll have to be very good at math.

If you use traditional textures, you can update UVs while you update the vertices of the table top.

Alternatively, you can use 3D TSL textures, so that you do not care about any UVs – the shape is “cut out” from infinitely large piece of wood. Here is a demo:

https://codepen.io/boytchev/full/oNrZdve

image

3 Likes