How can I make House visualizer?

Hello, everybody!
I want to make house visualizer that is similar with following.


But now I am not sure how can I make it and what I have to start from.
So what is my start point for this? How can I implement this?

This post was flagged by the community and is temporarily hidden.

Thank you for your reply, pailhead.
Fortunately, I already have my computer and also have phpstorm & three.js library too.
What I want to know is how can I implement it with three.js.
In other words, what I want is a kind of “algorithm” or something like that.
Thank you!!!

You are probably going to have to write something like this yourself as it is a pretty specific use case.

That or pay someone for their time. You can create a “Jobs” post.

@MyongIl_Kim Please ignore the first post in this topic (which is now flagged). Bullshit like this is neither polite nor helpful to users.

In general it’s hard for community members to respond to such broad questions since it would take a considerable amount of time to provide a detailed step-by-step guide for your app. However, it’s not that hard to point you in the right direction.

In general, the presented house visualizer is in some sense a special kind of 3D model viewer. So it’s best to study how this kind of 3D app is implemented. The open-source glTF-viewer by @donmccurdy is a very good starting point for this. With this code base, you can study things like:

  • How OrbitControls is used to implement the editor/viewer controls.
  • How loaders like GLTFLoader are used to load 3D assets from a backend and how they are properly integrated in the scene.

Since you need some sort of UI in order to manage the current state of the house configuration, I would recommend to work with a proper UI library or framework like React, Angular or Vue. All these projects have very good documentations and tutorials so all what you essentially need is time and passion in order to get familiar with these tools.

There are also various tutorials and projects that simplify the integration of three.js into one of the mentioned UI libs. Besides if you like the API style of let’s say React, react-three-fiber could be interesting for you.

If you don’t have the time or interest to work with this stuff, it’s better to post a job topic like mentioned by @titansoftime and instruct an external developer with this task.

4 Likes

Thank you very much, Mr Mugen!
You are so kind and gentle.
I am very happy with your answer.
Thank you again.:heart::heart::heart:

3 Likes

As a newcomer to programming 3D worlds it can be quite difficult to understand the mathematics behind it - just like me! :slight_smile:

Therefore I oriented myself to the programming language LOGO and programmed the few functions that leads to really interesting forms in Javascript.

The creation of 3D objects has then reduced to a few commands like fw (forward) lt (turn left) rt (turn right) …

This little example illustrates the basics in babylon.js - the code is very easy to port to three js:

image
https://www.babylonjs-playground.com/#PW82F1

Translated with www.DeepL.com/Translator

2 Likes