Drawing Lines to Create Walls

Hi Guys, I’m new to babylon, so please be gentle. I am interested in creating a function that I can draw a floorplan by picking points on the ground with lines. Like this…


Hopefully, the gif above renders properly. If not, use this link Wall Sample

I know there is a walls playground in the docs. that is clear. What I am unsure about is how to do this by picking the points and seeing it render as you click the points. Is there another playground similar to what I am looking for?

Thanks in advance

This is more of a software architecture questions than babylon question but you can do any number of things. If you’re just making a box then just get the position where mouse went down on your 2d plane and then adjust the vertices of the box as the cursor position changes (using setVerticesData)

I suggest reading this page so you can understand how meshes and geometry works: Create Custom Meshes From Scratch | Babylon.js Documentation (babylonjs.com)

I don’t have an issue creating a static/custom mesh. My issue resides more with the scene animation and picking

Here is a starting point

1 Like

i started a playground, but was not successful in getting any line to render. my goal with this playground was to click 3 points in space and have 2 lines rendered

I did not do it all but got the lines drawing at least for you

Keep in mind scope for things like options and vector. you were defining them inside the callback. That would be a new array of points every time, had the rest worked. Aside from that, you need to use scene.pick with those mouse positions you had

Perfect thank you! I also improved it a bit.

I could use a little help again. I made some changes. My goal is to have a stringer that follows the mouse hover until you click and set the final point. I believe I’m close, however, its adding quite a bit of lines. How can I access the “lines” to remove them in a similar fashion than I am in the vertices. Here’s my latest playground

Also, why am I getting this error in console?

It’s pretty strange behavior to me, I spent far too long trying and https://playground.babylonjs.com/#1J7VXZ#9

This works once like desired but then stops showing new points added. If you add options.instance = lines between lines 48 and 49 like I suspect should be done, never works at all.

Can someone more familiar with lines help out ? :slight_smile:

This is because you can only update existing points, not extend the array for perf concerns.

So you either need to delete/recreate or to prepare enough points first to be sure you will have enough space to update.

1 Like

Oh thanks @sebavan

It should look more like this then @gladiator-media https://playground.babylonjs.com/#1J7VXZ#11

1 Like

that’s exactly what I was looking for. Thank you! You guys rock!

1 Like

@br-matt I finally got this routine added to a button so that I can draw lines. The problem I am encountering now is that when I click the button to draw my first set of lines, everything works perfectly. I end the command by removing the observable (not sure if that’s the best approach). If I hit the button again to draw another set of lines, the points resume from the last point that was clicked in the previous set. I need it to start a new set of lines instead. What do i need to modify

Hmm I can take a look, a PG would help though to understand more

@br-matt I created a new PG in typescript. Trying to wrap this routine up but still having an issue. The issue now is when I right click after selecting my lines. I’m trying to delete the stringer that was not committed as a valid point. The problem is, i am updating the vectors array, but the actual lines are not updating. Not quite sure why.

Here’s a video explaining