I’ve been building a door configurator for a while now and for the whole time i stuck with a working door model for one specific thickness. Here is what i can build right now:
Basically a boxGeometry for a flush door (no lips, left in the image) and a boxGeometry plus a seperate lip geometry that is set on top, left and right for a lipped door (with lip, right in the image). There are also cases where the lip has some roundness so i just use other blender models for the lip like this:
For now it was enaugh and i knew the day will come when i need to kick this implementation and search for something more flexible.
Spoiler: The day has come:D
so right now i am trying to build a door model that is very flexible and has a nice uv unwrapping. Plus it can display different lips on the outside. Obviously i have a lot more experince in threejs now but the task still is tricky as hell. I investigated a lot for this and with a huge knowledge of shaders that would probably be possible right?
But i do not have enaugh experience with it so i am trying simpler stuff. My first idea is to build 2D shapes with shapegeometry and extrude them for the basic shape and that works for the geom but not for the top part obviously…
Right now my idea is to use the extrudeGeom and cut the top part (with csg operations) to get the same lips as on the sides of the door leaf. Sorry for this complex description.. here is a codesandbox of what i mean:
The codesandbox is inaccessible. My expectation is that lips (with or without roundness) should be procedurally made-able. The following two quotes are something that I cannot visualize (I’m not familiar with door terminology), so: what is the basic shape, what is the top part, why lips on sides are different and need cutting, what is the negative of a lip? Also, what does very flexible mean?
So here are some images to explain my current idea a bit better. The process starts with a threejs shape (i made the images in Blender to demonstrate). In this case this would be a lipped door because of the overlap on the top.
What i want to do next is a extrusion of this shape. This extrusion value will be the door height. In the image below you can see what i mean with top part:
And thats the result i want to get. But of course there is not only this lip, there are other shapes and even roundness in the mix.. and now here are 3 examples of what i mean as subtract negative shape from the top. Basically, a negative is a kind of stamp that you then have to remove from the top part of the door leaf. The first one is exactly what we saw in the images above:
Thanks. It is much more clear now. I have classes now, in 6-10 hours I will have a look. So you want a door with lips on some sides (not just 2, but more, e.g. left, right and top). And some lips have rounded fragments
thanks for the support, take your time! In the mean time ill try some other approaches myself and provide them. So your understanding might get better of what i want to achieve.
So, after spending some thinking time during the subway commute, I got several ideas. The easiest of them is to use miter cuts and join door lips as a picture frame. I tried with an imaginary lip profile, not realistic, but has positive and negative parts plus curves.
In addition to the great techniques presented so far.. I’m gonna throw in my vote for the technique you mentioned initially, using the basic extrusion, then some CSG for the custom bits, like bevels, mitre, cutouts. That way, adding new cutouts etc, is mostly reduced to generating the cutting geometry, rather than dealing with extrusion paths and complex parameters. And you can still use the more complex extrusions to generate your cutting geometries.
I like that approach a lot because it is very near to the real world on building a door Leaf. But in the real world you would not use this 45 degree cut in the corners between the horizontal and vertical elements. Here is how it would be done in the real world:
front surface thin layer that has the material of the door
2 vertical elements left and right that can have different shapes (flush, lip, …)
1 horizontal element at the top that also has the shape
1 horizontal element at the bottom that is just a box to fill the bottom
back surface thin layer that has the back material of the door
For flush doors it would look like this (very simple to build):
Of course this is just a demo but i am trying to describe what i need as best as possible because that helps every reader and even myself of what i need:)
What is great about your approach is that basically every lip would be possible around the door without any csg!! What is not possible with this approach would be different lips on the left and the right. I have to think about this further.. Agian thanks @PavelBoytchev that helps a lot already!
Thats a great point actually!! For most doors that would work.
With that in mind i could actually create the real structure of the door and use Pavels approach not for the lip but for the cutter that shapes the lip. This would also have the problem, that i could not create different lips for left and right but then ill have to split the cutter for those cases.
Thank you too @manthrax for thinking about my problem.
I will build a demo of that aswell and look what approach will be more flexible
Could you make a GLTF (with Blender, e.g.) that shows a door with different lips? If there is no top lip, the left and right could be different lips without any problem.
As for textures, you have to either fix the texture coordinates, or to use UV-less texture (that doesn’t care about UVs).
uhh i do not know how this works but is it like using the vertice position of the generated object to apply textures just like in blender when i use generated instead uv?
here are two glbs representing the ‘real world‘ door structure. I did not compress them so there are no problems with presicion. In the glb files the doors have different layers as described earlier plus a chip layer on both sides. I added it because in some cases the chip board would be visible:
The first door can be made - the class for creating a lip has parameters whether the miter cut ends, so if they are not cut, the result is as in the model.
The second door has one corner that is not cut at 45 degrees , so this corner cannot be made with the current class.
But both doors can be made of boxes. With good UVs two attached boxes are indistinguishable perceived as a single object.
But as i thougth this is really buggy.. i dont know what exactly is the problem. In my local code i can use multiple materials for the base (door leaf) and the subtraction in the codesandbox it does not work..:
But you can play with the values in leva to see it somehow works but is buggy.. also i cannot use multi material in codesandbox for some reason so i gave the whole mesh a testUV material.
It looks like this approach also is not the best..
Edit: the problem here is that i created the lip parts in blender and uv mapped them perfectly so i do not have any issues. for different lip types there is a lot to do in blender thats why i want to do it procedurally
My last post in this thread, just for completeness:
The previous demo was for procedurally fixed UVs. Of course, there are flaws, as UV mapping is art and sometimes it needs manual intervention. But for many cases automatic mapping is visually acceptable.
Below is a completely different approach - using 3D textures that do not care about UV coordinates. Here is a demo with artificial procedural wood. There are two doors, the darker one is made of several parts, the brighter one is made of two plates. The 3D texture tries to keep pattern continuity across edges. This is vanilla Three.js, so I’m not sure whether it is easy to react-ify it.
thanks a ton for helping me out here! Although i am not 100% sure which approach i want to go for, your approach / code helped me a lot to understand more how i get where i want!!
I marked your code as the solution because it does basically everything that i asked for!
I will check for all the small edge cases there are in the real world and build a mix out of your code and my csg version to adress all possible cases there are!
Again i cannot thank you enough for the help and the new possibilities i learned <3
