I am working on a project where users need to design structures (like walls, windows, and doors) in a 2D-floor plan and then view the same design in 3D. I’m trying to figure out the best approach to implement this functionality.
Which of the following methods do you think is the most efficient and practical for this purpose?
1.Use Three.js for both the 2D and 3D views:
Manage both 2D (Orthographic view) and 3D (Perspective view) within the same environment using Three.js.
Users can draw walls, adjust dimensions, and create holes for windows and doors in 2D, while seeing the results immediately in 3D.
How can I handle drawing walls and create holes?
2.Use a 2D Canvas (like Fabric.js) for drawing and Three.js for 3D visualization
Which option would you prefer, and why? Or do you have a better alternative?
Both options are valid, but since performance isn’t a concern and you won’t be dealing with shaders or complex rendering logic, using Fabric.js for the 2D part is the more straightforward choice. There’s no need to handle raycasting, materials, textures, or geometries. You’ll mostly be working with native browser APIs and the Canvas 2D context.
I mostly agree with @Fennec 's take, but there will be some overhead in keeping the 2 models in sync.. and translating the fabric model into your threejs model (and vice versa?)
Fabricjs isn’t really going to help you draw walls or detect floors/room boundaries etc. and to really be useful, you’ll want walls and holes/doors etc to be representable as a network of some kind so you can tell what corners are connected and other structural stuff.
In blueprint3d they have an ortho/canvas wall editor, but its exclusively for placing walls, and has the ability to snap edges and join walls at corners, etc. and it then figures out the floors from this graph of nodes. ( click the edit floorplan button here: Blueprint 3D - Example )
items/doors/windows are all handled in the 3d view.
Implementing that in fabricjs isn’t trivial.. since its more of a vector/art editor. It doesn’t really model the relationships between the primitives you drag into/draw in the scene. So idk.. its a big topic.
What about pure HTML and CSS? The DOM already provides a native hierarchy and graph structure. Neither library includes built-in support for this kind of app, so you’ll have to implement those features either way, and you’ll still need to manually sync the 2D and 3D views regardless of the approach.
That said, three.js offers useful math classes like Vector2 and Matrix3 that work well in 2D even outside of the three.js ecosystem.
What is your idea about using 2D orthographic camera in threejs and switch to 3D perspective camera for 3D?
I have done similar project that you can see some detail in this link:
but that project did not include draw walls:
That’s how I would do it personally.
2d is just switching to an ortho camera pointing down…
Wall drawing you do by having an invisible plane that you raycast against, and treat it like a drawing surface… and you drag out boxes or line primitives onto that surface to represent your floorplan..
The same logic can be used in 3d.. It’s all do-able.. It’s just not small amount of work.
Abode Layout: 2d Creative, 3d Professional, or Best-Offer
Support for serious engineering apps (especially on smaller mediums) is not broadly trivial. A theoretical follow-up to you (or your clients) would be: will you be placing stained-glass windows… on an iPhone… regularly? 2d or intelligent sculpting may be useful for previsualization but not transferrable to an assembly production which dictates a 3d precision in tolerances to the mm. Save time by addressing these points:
2d Modern architecture boasts “new materials” with technical advancements which permit structural stability surpassing traditional construction techniques. However, these fabrications incur a premium expense. Best-practice may be an omnibox approach to tokenize material, proximity, and function… offloading the creative layer to a surrogate API. Strategic partnerships often work to explore broader markets, but select a license which won’t cause misfortune.
3d Generally, contractors maintain standards-compliant supply. These constrain regional factors such as safety and load-bearing tolerances. Best-practice may be to obtain approved prefab files (or their approximation in 2d/3d)… allowing the professional process to determine your working space. This may reveal any necessary conversion to interchangable vendor format(s), or if a presets list is more practical (and user-friendly).