Strategies for building an Interior Design App?

I am researching ways to build an interior design app and I am having some trouble getting started since I am a beginner in both programming and 3d programming in general.

When it comes to drawing the room walls I like the approach from Wanaplan - easy 2D / 3D house solution. I read somewhere in the old forum that its build with Babylon.js? On a side note, how can I check what libraries are used?

How does that work?

For the 2D part, do I have to use a different library or can I use Babylon.js?

Features I am looking to add in the begin are:

  • User can choose different room shapes
  • User can resize the room by dragging the walls or their corners
  • Drag n drop windows/doors on the 2D plan
  • Convert 2D to 3D

How do I convert the plan from 2D to 3D? Do I get all the vectors for the room corners, windows & doors and input them in this function by @JohnK https://www.babylonjs-playground.com/#4GBWI5#272 from Developing Build a House from a Floorplan - Babylon.js Documentation?

1 Like

This is a good starting point to learn about Babylon but please remember that Build a House from a Floor plan shows some techniques and is not a fully formed application. It is limited to the outer shell of a building and not for designing the whole.

If it is useful for you all well and good but because of its simplicity you will find that to build something along the lines of Wanaplan once you have learned you will be better off starting your major project from scratch. The limitations of the simple approach will cause headaches if you try to build by adding to it.

As for 2D to 3D here’s an app I did a few years back Lathe. If I started again I would probably code it a little differently so I am definitely not recommending the coding. It does show that Babylonjs can be used for 2D work, it all depends on the camera. The data created in the 2D window is transferred to the 3D window.

Since like the cubees app your project will be all contained within an overarching Javascript code it is easy to transfer data from the 2D part to the 3D part.

This Line2D of Given Width - Babylon.js Documentation might be useful as a start in building the room shapes.

This is a major project you have in mind. IMHO think about

  1. the data structure you will need to describe the 3D house
  2. the way the creation of the 2D plan feeds the data structure
  3. the design for the 2D creation app

By definition, a house is a closed room with openings for going in and out and looking out (mostly).

Thus we can write an algorithm that changes its parameters - by trial and error - until the above definition applies.

If this results in something beautiful, then it is also called art. :slight_smile:

Once again I took my turtles out of the drawer and now use two. One is responsible for the x-y-axis and the other for the x-z-axis.

This is the current result after three attempts:

I’m not sure if I should look at this as walls or as the formation of a new utopian city.

Anyway, there is a lot of harmonic vibration in the construction.

https://playground.babylonjs.com/#G1AKIG

3 Likes

@JohnK I am thinking to use Pixi.js for the 2D part. Any thoughts on this? I will still be able to transfer the x,y dimensions over to Babylon.js right?

@Necips that’s very interesting but not what I am looking for :slight_smile: And a bit complex for me.

@constantinos there’s a lot of these types of apps around. If you want a starting point you could take a look at the open-source blueprint3d which uses Three.js but could be adapted to Babylon.js. It’s a decent example of how to approach such an app.

There’s also Sweet Home 3D which is another open-source home design app but it’s desktop software not web based, and it’s written in java not javascript, so may be of less use to you.

3 Likes

Regarding 2D vs 3D, I would honestly try to stick with one library like Babylon.js that can do both. Just use an orthographic camera in plan view for the 2D. Why complicate things?

1 Like

Hi constantions, do you know the programming language LOGO? The commands are so simple as A,B,C.

Imagin you have turtle with a pencil on its bottom. You can command him to go forward 10 steps or backward or turn 45 degrees to left or right and you can say him to draw lines on forwarding or not.

Know imagin next that the turtle is drawing a wall and you have your simple language to create aweful constructions.

Play a bit around with my turtle class:

var t = new TTurtle(scene, 1,1,1);
t.fw(10).lt(45).fw(10).lt(45).fw(10).lt(45).fw(10);

Imagine that every turtle is a hinge of a wall… you construction will get more dynamically … moveable walls, openable doors and windows…

It’s worth to take a deep breath and dip in this language! :slight_smile:

I’ll extend in the next days my turtle class to use it as a bulldozer to build constructions with easiness.

@constantinos - agree with @inteja about using Babylonjs for both

@Necips - whilst LOGO is an interesting tool and I love your constructions I do not think it is the appropriate tool for the application asked about and since Constantinos has said

and specifically wants to do a 3D house design app in Babylonjs then posts in this topic about the power and use of LOGO are just confusing.

Would want to see more about the use of your turtle in Demos and Projects :slightly_smiling_face:

1 Like