Seeking advice on how to create a 3D room configurator using Three.js

I’m trying to implement something like EEFA, but in 3D.
In EEFA, you select your environment—such as a room, kitchen, or other space—and then add tiles to the walls and floor, like this:

The fact is, I managed to implement the texture-adding functionality and more, to present it as a basic demo to my client:

But there’s a big problem:
The client needs more than just one environment, and each one should feel like a real room, kitchen, etc.—not just a collection of random models downloaded from the internet and placed together (like what I did).

My question is:
Are there any websites that offer free or paid 3D environments?
By ‘3D environments,’ I mean complete scenes—like rooms or kitchens—made up of multiple models, where I can control the walls and map textures (i.e., add tiles) to them.

Have you tried sketchfab?

1 Like

Not really… are there some 3D rooms, 3D kitchens, etc there, so that I can controll the walls of it?

I’m not sure I understand the question, do you mean change the dimensions and textures of the walls? If so you would do this programmatically, some assets can be messy but typically (semi) game / Web ready with OK UV’s… If you wanted to modify the walls of a pre-built and loaded model you can use a naming convention for each wall in blender and retrieve them for modification in three.js, alternatively you could remove the walls to replace them with PlaneGeometry in three and modify accordingly from there…

1 Like

Oh god, why didn’t I open up the link you sent!!
I think this is a good choice.

1 Like

First of all, thank a lot for your answers.

And yep, I need to add texture on the walls of every scene dynamically, so that the user selects the texture, and then it’ll be mapped on the wall. Plus, the user has the ability to resize the wall.

1 Like

This is also a good resource for ideating about roombuilding style apps.. it’s a project that went open source a long time ago, so the codebase is quite dated, but it’s been used as a foundation for a lot of projects:

3 Likes

My goodness! What a cool demo! Thanks a lot!

So is it a good pratice to use it these days, as of my project’s base? It’s almost perfect!

I’d say it’s safe to use, but you might want to see if there are downstream forks that are more up to date… and there are certain parts of it that may need to be updated to work with latest threejs. Also the low framerate in the viewport is entirely arbitrary, since the app was developed before webGL performance was as good.. so they throttled the heck out of it to make sure it ran on slow devices. Nowdays you probably don’t need that, or you could do it based on browser/hardware sniffing. It’s like a one line change to remove that throttling and have it run smooth.

By itself though it solves a couple important problems like.. figuring out floor/room regions based on the edited wall perimeters, generating the floor polygons.. handling window and door cutouts, ,keeping props on the floor areas.. mitering of the walls/corners.. mapping a default diffuse texture on the walls, load/save, etc.

2 Likes

Thank you @manthrax , for your insightful comment!

1 Like