Strategies for building an Interior Design App?

Questions
1

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
2

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 https://doc.babylonjs.com/snippets/line2d 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
4

@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.

5

@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
6

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
8

@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