Jump to content

issue while creating custom rectangles using lines


masterdon
 Share

Recommended Posts

Hi Team,

I have a requirement to create a custom shaped rectangle. I am using Lines2D as the shape may not be standard rectangle. however the lines are not rendering for rectangle. 

http://www.babylonjs-playground.com/#2AVSFH#259

My goal is to make this rectangle as container and other objects which are represented as lines can be dragged and dropped on it. Any help would be appreciated.

Thanks..!!

Link to comment
Share on other sites

Hi again, M.  Sorry for the slow replies.  We've talked in your other threads, now... so some decisions can be made, after reading those.

I think you should avoid canvas2d for this.  Just use basic rectangle wall sections, planes.  If you were thinking about a "wall" as a container, and the segments get dragged into the full-wall container, we can also do that with the rectangles.  You want to be able to drag the entire wall, at times, yes?  *nod*.

And perhaps the overall wall length (the wall container/group/parent)... automatically adjusts its length, whether inserting a segment in the middle of a wall, or when adding segments to either end, right?  You bet.  You're lookin' good... we CAN create a "flexible" wall container like that.

I'm glad, now, that our demo from that other thread... has drag-features.  It is a good testing playground.  We can make some wall segment rectangles (completely without linesMesh or canvas2D)... and start trying to drag/snap them into the flexible wall container.

The whole building might also be inside-of a group/container/parent flexi-box, too.  It could also be dragged as a single entity, and expand/shrink to fit.  Cooooool.  We'll talk.  :)  I have FRESH knowledge about mesh bounding boxes.  :D  (see Wingnut Chronicles heightMap physics adventure, as wanted)

Link to comment
Share on other sites

Hi Wingut, Thanks a lot for helping out in all threads. I have started creating planes on top of ground. here is the demo http://www.babylonjs-playground.com/#7EJ4CM#4

 

Following are the issues i am facing now in above demo:

 

1) how do i position such planes on top of ground. currently they are perpendicular to it. I have also tried using .rotation. however its not working.

2) how do i set dotted borders to such planes. Do planes have property to set border. If not then should i use lines here?

3) how do i position the camera to show only the top view. i.e. to give look and feel of 2d modelling.

 

Thanks.

Link to comment
Share on other sites

Hi M.

http://www.babylonjs-playground.com/#7EJ4CM#7

A little starter kit - no lines involved, no canvas2d involved.  :)  Just good ol' mesh.

Change to camera2 in line 11, if wanted.  Perhaps you can put another little box in scene corner... click it to switch cams.  :)

We might need to modify the free camera (camera2) so that up/down cursor... doesn't zoom, but instead, moves up/down (+/- z) over floor-plan.  We might want to parent the camera to an invisible box, and then use cursor/arrow keys to move the box itself, and the camera will come-along, because it is a child of the invisible box.  (sneaky camera trick) :)

I have a small automated "wall drawer" in lines 52-61... all using createInstance's of the master box.

Later, you might want to set box.setEnabled(false); to hide it from user. 

Box is your "segment_master", and should not be used in the actual floor-plan.  Soon, you will have a window_master and corner_master and half_segment_master and quarter_segment_master and half_window_master and door_master... slowly building your toolbox-of-masters... to make instances-from.  :)

With me?  I hope so.  By the way, mesh.rotation = new BABYLON.Vector3(1.57, -Math.PI, BABYLON.Tools.ToRadians(90));  :) 

Rotation prefers having RADIANS.  Math.PI/2 == 1.57 radians == 90 degrees.  And -Math.PI == -3.14 radians == -180 degrees. 

Let's pretend you keep adding more rotation to a mesh... until the mesh has rotated 360 degrees (6.28 radians).  You can keep-on adding rotation... no problems.  Rotations of 9.0, 15.8, 2049.0, no problems, but it is a waste of excess numbers when value > 6.28 (Math.PI*2) or value < -6.28 (-Math.PI*2).  Rotations in radians, positions in units, and scaling in multipliers.  (mesh.scaling = new BABYLON.Vector3(2, 2, 2) ... doubles its size.)

Automated/animate rotator code (often seen inside a registerBeforeRender function)... almost ALWAYS go WAY WAY past 6.28 radians.  The mesh rotation continues just fine.  Here's a demo, rotating your box, with a render-loop function... in lines 63-69;  Automated rotator, without using a BABYLON.Animation class.  Easy. 

I had some fun with random colors, too, but I had to say goodbye to createInstance (line 56 area).  CreateInstance() uses box material for materials on instances (so if you change instance.material.diffuseColor, it changes ALL segment diffuseColors, including box). 

To make each segment be a different color, I needed do it differently.  I used clones instead of instances, but I needed to put separate materials on EACH clone.  [demo]  Our renderloop code got bigger, but still runs fast (important).  Colorful floor-plans are sort-of NEW to the world, eh?  Old habits die slowly.  Thank goodness for innovators like Masterdon.  :)

We'll talk about dragging and snapping-into-position, a bit later.  Take some time to play-with the starter kit... see if it "feels ok".  :)  Hope this helps.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...