Garden Room Planner

Here’s a project I’ve been working on. Its purpose is to let users to design garden rooms. Garden rooms/offices are quite popular in the United Kingdom.

Any feedback or suggestions appreciated :slight_smile:


Awesome project! :love_you_gesture:

Keep on being amazed at how skilled the folks that frequent this board are: constantly in awe!


Very nice! I would love one of these for an office.


This is really great! I love how you’re resizing the geometry with a simple click-drag. Although for some reason, when I try to add an awning-style window, the ceiling disappears!

The roof & walls are supposed to hide depending on the type of object you are interacting with. There is a “view” button to show and hide these manually.

Thanks, this is useful feedback. I guess it might seem confusing to users. I will need to thing a little bit more about the controls :slight_smile:

Excellent work!

Looks great! :blush:

I have found a few issues I think, but I assume you are still working on this:

  • There are text fields to input the sizes, but I can’t input a number in them.
  • Moving objects around on the walls seems to cause issues when there are multiple on the same height. The windows could not be moved around sometimes, until I moved them down.
  • It might be a good idea to let people know before removing a door on the side, when you make it too small they just dissappear, maybe you can prompt them or at least let them know it will be removed.

I also have a few more technical questions, but along with that I would like to request if I can read through the source code, it seems like a great learning opportunity. (Of course you don’t have to, but I have nothing to lose by asking). If its not allowed I would love to ask some questions, sine I need to create a similar concept for a different product.

Thanks for your feedback. It’s useful.
I’m using the engine in several commercial projects and I’m not able to open source it at this time :frowning:

Same applies for me, I won’t hold that against you.

I actually have one question that bothers me that I can’t figure out how you did it.

  • How did you manage to get the objects in the walls to fit in them? Are you generating the buffergeometry around them?
  • How did you get drag and drop to work so smoothly between your HTML and the threejs? I’ve been stuck on that for a good while now…

Again, no obligation to answer, but if you could give some pointers into how that works I would be very grateful!

And a bit more feedback I found:

  • your height slider in the 3D space is very hard to find. You could probably use the same slider you use on the ground for a better effect.
  • Maybe your view button on the left should toggle between the different ones and show a representation in the UI.

Many congratulations on your work it’s wonderful.
I am trying to make a room and add some furniture inside same as any other home design app. But not able to figure out how the look inside technique works. Like in your first two walls become transparent and the other two are the same as the original and will change on camera movement (same as you did). If you could suggest something or give a few tips then it’s very helpful for me. Thanks in advance :slightly_smiling_face:

Hello @azijul, the principal is quite simple, each wall is a separate mesh and as the view rotates I set the two walls closest to the camera to transparent.


This is really great! Well done :smiley:

Actually, every wall is having studs as well, so when I try to increase the dimension like changing room dimension from user action control it stretched the studs as well. So I am using an outer cube and a slightly small inner cube (the inner cube is subtracted to create a room). In this case even depthWidth also not working.

here material of the cube is set as transparent to view inside studs.

I don’t know if it is the right approach or not.

Now, how to deal with it, all suggestions and ideas are welcome.

On first site I was wonder if this was a group effort and if not how long have you been working on this?
Its very informative and I can see how a customer would get enough information (from designing their garden room) to make a selection/purchase.

It’s all done by me. The engine is used in several projects. The project has gone on and off for years. It could be probably developed from scratch in about 2-3 months if the developer knew what the final result should be at the beginning :slight_smile:

Hello @azijul. I would say in general you will need to do much more work by hand to get the result you need. From what I understand you are trying to create the final geometry by subtracting. The general direction I recommend is that you create all elements individually. For example you add each vertical stud one by one, they you add the top and bottom timbers (i.e. each of these will be a separate cube). This way you will get a more granular control over the elements are will be able to transparency to the closest ones.

Really awesome!!! @Immugio