Jump to content

Create Something like Room Sketcher


Recommended Posts

Hi Swaztx, welcome to the forum.

  In my opinion, I say YES!   Understand that BabylonJS would be handling only the "Live 3D" portion.  The rest is done in 2D.  So each 3D model... also has a 2D image associated with it (for when doing floorplan layout).  A careful model-scaling plan will be needed.  Possibly, our friends at Phaser could help with the 2D. 

Many web 2D toys (such as Phaser)... use a HTML canvas with 'context2D'.  The BabylonJS HTML canvas uses 'context3D'.  You will need to figure out a 'sync' method.  Your 2D floor plan is the boss, and when it's time to render a Live 3D view with BabylonJS, your floor plan will "marshall" which 3D models need to be imported, scaled how, rotated how, and positioned where.  If you are in proper 'sync', your 3D scene will look perfect.

You can see how a room with furniture will look... by visiting these:


Although wanaplan is a third party website, their site is listed on our BabylonJS main website.  So, I suspect they use BJS for their 3D views.

Ask more, as wanted.  Perhaps others will comment.  Maybe they will have more experience and better thoughts.  :)

Link to comment
Share on other sites

Its definitely possible. I'm working on a framework for applications like this at the moment.
What i have so far (only BabylonJs related things):
- support for multiple views
- custom camera control for better multiple view and orthographic camera support
- move and rotate operations which work in all views (2D, 3D, orthographic, perspective ...)
- everything works on desktop and mobile/touch devices
In my case i don't need to sync 2D and 3D because everything is done in 3D anyway.

attached a screenshot of my debug application (everything still in very early stage, thats why the UI is ugly :) )


Link to comment
Share on other sites

@Kesshi - I think it's beautiful!  Would you be willing to zip-up some/all of your project, and offer it to the public?  If not, I understand.  I think lots of people would love to have a copy of it just the way it is... with the basics complete.  Kesshi's Scene Layout Editor Starter Kit v1.0.  :)  I would be glad and honored to have a copy, and perhaps @swaztx would like a copy, too.  Possible?  Thanks either way, good luck on your project.

Link to comment
Share on other sites

@Wingnut sorry i can't make it public. This is a commercial project. If the project is more evolved we will create a public demo for our customers. I can post the link here in the forum then, so you can play around with it.
In the meantime if someone has some questions about how i solved some things i try to help and maybe could post some small code snippets.

Link to comment
Share on other sites


Hi alll,

i'm still new in babylonjs, and i see some interesting thing here and i think i need it.
Mr kesshi, it's so nice to see your project, i am interested with how you could sync every action in three canvas (perspective, top, front) in one page html.

is there some simple playground example maybe how to sync every action in more than one canvas like in the picture you show above ?

what i mean is, if you do some event(like rotate) of some object(chair) at "top" section, the other two section(perspective & front) will change too (chair at perspective & front section rotate too)


thanks a lot,

Link to comment
Share on other sites

@wayan I have only one canvas. I don't need to sync anything.
With babylonJs you can create multiple viewports to show multiple cameras in the same canvas. Here two examples:



The only thing i'm doing special is the camera navigation/control. Because all pointer/mouse events are attached to the canvas, all of the cameras will react at the same time. You need to add some special handling to make sure that only the camera/viewport which is currently under the mouse will handle the events.


Link to comment
Share on other sites

@wayan Maybe you don't need that special handling. It depends on your use case.
In my case all views have a controllable camera but i want to control only one camera at a time. So added some handling to disable/enable the camera controls depending on the position of the mouse/pointer.

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.

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.


  • Recently Browsing   0 members

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