Elements to be used for designing 2d content

[masterdon]

Hi Team, I am trying to create a custom design to give look and feel on modelling a house in 2D(we have implemented this in some other js currently). The requirement for same are:

1) Walls should be constructed using small rectangular segments. horizontal one having dimension 2*8 and vertical 2*6.In attachment they are represented using dashed lines.

2) these small rectangles should have ability to add components as children elements. In attachment, you can see some segments have darker shade or some object being added to it.

Please let me know what is the correct approach i should use.

 

Thanks.

[Wingnut]

Hi masterdon, good to see you again.

https://www.babylonjs-playground.com/#DZI3R#1

Essentially, that's ONE wall section.  I decided to test the "viability" of a BabylonJS LinesMesh.  

It is not in any tutorial (not as 'linesMesh' at least), but a few demos exist.  It might also be wise to tour demos for createLineSystem (a related-system which I know nothing about - sorry)

I think linesMesh (createLines) would allow other linesMesh to be parented to it... no problem.  I think it would also allow pivot-point offsetting, so doors and windows could open/close... in floor-plan view.  Coooool.  Those pivot points could be passed-on to 3D, via custom extrudeShape wrapper func (it would check if a linesMesh has a .adjustedPivotTranslation value, for example - a property you would add to wall sections that needed offset pivot points.  If it does, it would apply that same pivot point... onto the extrudeShape FOR that linesMesh).  Nice.

But linesMesh has another EXCELLENT feature.  They are update-able ANYTIME.  So, you can add more lines to already-existing linesMesh and do live-updating. 

Notice code line 111.  The last parameter/arg... is the name of ANY linesMesh that you want to "add-to"... with these newly-made lines.  A handy feature!

Currently, that feature is being used... to allow the red spheres to be pointer-dragged, and the lines do instant-updating.  Nice, huh?  Sorry, my wall extrusion doesn't auto-update with the lines, but could probably be TOLD to do so. 

You don't really need dragging features, but dragging was already activated in this borrowed playground that I used for this demo. 

The part that I really wanted to test... was using a linesMesh PATH points... as the shape of an extrudeShape command.  I was looking for a way to make 2D (floor plan)... into 3D... easily (by simply extruding all your "wall sections"). 

It seems to work quite well.  You may want to use "instances" of the linesMesh wall section... wherever possible, to keep performance fast.  Also, this solution seems workable for making your corner wall sections, too.  And for your doors and windows.

AND, I'm quite sure dashed-lines are possible.  And line colors.  I think... it's all good.  (You can drag purple extruded shape, too.)   

Another approach (perhaps better)... just use little semi-transparent rectangular planes for each 2D wall segment (made exact size with meshBuilder height, width, depth parameter values).  When it is time to go 3D... just scale them all +y to wanted height.  Simple.  (Windows may need special handling, as they do not usually extend from floor to ceiling.  They need SOME wall above and below window, usually.  Often, they need SOME wall on each side of them, too.)

Although "edge makers" such as showBoundingBox, outlineRender, edgesRender, and highlightLayer... all happen in post-processing (they are effects)... one of them might be perfect for putting lines around a transparent rectangular plane... making it look EXACTLY like one of my linesMesh rectangles... and at twice the performance speeds (maybe).  hmm.  I like THIS idea better than the linesMesh idea, actually.  Easier to deal-with.

Anyway, others may have ideas... so let's give a listen. 

[Wingnut]

Hi again.  You might want to look at this liteBrite thing.  In lines 68-85, there is an... um... "template"?

It is a "map" to use... for placing things... such as colored spheres and rectangular-plane wall-segments.

In your demo floor plan, we could "read" that top wall of "text", right?  Let me try it.

"gap gap gap, span span span span span, black, spanx5, black, spanx6, gap"

Or... "gggsssssbsssssbssssssg"    Use capital letters for half-spans, half-gaps, half-blacks, and half-span-windows.   

I see you have some 1/4 span (width) things on each side of some tiny windows.  Not sure HOW you would want to "text map" those.  I'm not even sure WHY anyone would bother with text-mapping like that. It is a bit goofy and old-school, huh?

Still... for automatic positioning and quick-floorplan-making... it might be something to consider.  But perhaps, your floorplan server is sending-over a nice precision json file, and quick-mockup in-scene... is not important at all.  Just thinkin'.    You're welcome to use that "map reader" position code from that litebrite thing... for positioning some rectangles into a floorplan.  Have fun, I'll watch. 

We need ideas from others.    I need to shut the heck up.