Building a 3D app design

Question
1

Hi Everyone!

New bubbler here. Just wondering if bubble had the ability to create a 3D home design app similar to the app called “Design Home” (photo as attached)? I’m just looking to create a lean build but want to have the features of:

  • furniture placement/movement around room/space
  • ability to change the furniture with other styles/types

image
image1892×1686 520 KB

I just want to know if its possible to create something like that before commencing. Any help would be greatly appreciated!

Thanks all!

-Joseph

2

Hey, have you manage to build an app like this in Bubble, or has anyone tried to make this in Bubble?
I have a similar idea and I’m also looking for a right tool in which I can make it.

3

One way of doing this, even if it’s not optimal, and assuming that you don’t want to move the elements would be to prepare all the cases for the pictures. I mean for your example:

Picture + sofa 1
Picture + sofa 2
Picture + sofa 1 + plant + light
…
And on click on your elements update the image with the right set up.

4

Thanks a lot!
I had that in mind, to change colors or place when clicking, but what if I want to move through room with cursor, is that possible?

5

Others might advise you better on this, but I’m pretty sure that natively with Bubble, you can’t do it. You might need to build a plugin that could help you achieve that.

6

Okay, thanks!! :slight_smile:

7

A lot is possible with Bubble. Example, create a group (type fixed) with an image element in it and place a couple of groups at the locations where you want the user to be able to click. Show a GroupFocus when the user clicks one of those groups with a repeating group which show the furniture options for that group/location. When the user clicks on one of the options, replace the original image with a new one which includes the chosen furniture, example

Result:

chrome_zxn5mGU7LU
chrome_zxn5mGU7LU1470×1062 1.33 MB

Together with the suggestion from Licorice a couple of posts back in this topic you can get pretty far.

Note: To prevent using a lot of groupfocusses, you can use the drag/drop group (with the furniture options for a certain location), part of the Bubble draggable elements plugin. This group has the workflow action “move draggable group”. Together with the Bubble plugin Mouse & Keyboard interactions, you can show the group at the location a user has clicked.

8

I Assumed this is an AR App, augmented reality? It would be such a waste if your not doing it as AR…
Furniture 3D model can be place INTO the scene.

It would be much easier to do with AR, because there already have such plugin and its ecosystem.
Example here AR Product Demo Plugin ( Mobile )

To build Such Apps, what “difficuties” you will face BEFORE Bubble’s Limitation.

  1. To construct the 3D Model for EACH product.

but with the help of External Plugin ( AR Product Demo ), i see no problem to build it with Bubble.
But to build the entire AR functionality within Bubble…

You have to write your own plugin…

1 Like
9

Thank you all for the tips!

I found this plugin which can help: 3D Model Viewer for web and AR Plugin | Bubble
I’m glad that everyting is possible in Bubble :smiley:

1 Like
10

So, if i had to make something like that, i would just host an Unreal, or Unity web scene (Unity is even more web friendly) and embed it in bubble.

  • Or you could tackle it using JS: https://threejs.org/, but it gets a bit more technical this way.
  • Bubble would just do the user management, pricing and whatever else you need.

There are similiar things for car configurations: Unreal for Web | Animech

  • Unreal has good low code blueprints to created “widgets” and UIs.
  • The drawback is that it requieres some GPU power on the clients side.
1 Like