How create 3D Building Configurator BIM with Autodesk APS ? or Three.js is better?or maybe other things

Questions
, , , , , , ,
1

I am a Three.js developer. I know ‘thatopencompany’ recently for ifc files (BIM) too but as I know they do not support changing textures.

We want to create a website like https://planner5d.com/ and https://vara3dconfigurator.com/ .
I need some data of .ifc files like space, floors, lamp and electrical,… and of course, I need three.js features like texture and material and open to customize everything, drag and drop, and add different models like furniture, … How Can I do that?

What is the best choice? Three.js or Autodesk APS or Xeokit or Thatopencompany or Speckle ?

We need to change textures, and materials, and replace objects like furniture for interior design,…

roomle-mobile-app-interface
roomle-mobile-app-interface960×640 158 KB

I want to create an advanced 3D configurator for Interior design with high-performance

Drag and drop, change textures, change objects in the model.Let me know your suggestion.

b01976e1d9b11f44555ecaf41a415911
b01976e1d9b11f44555ecaf41a415911960×720 70 KB

3d-en-1x
3d-en-1x922×616 76.6 KB

2

Could I ask what type of answer you expect for so wide question?

2 Likes
3

I want to check possibilites in these technologies and Choose best ones
and second I want to know Should I combine 2 of them?

4

…Xeokit or Thatopencompany or Speckle…

I can see that you are very determined to get this information, but unfortunately, I have no idea what these tools/technologies are, and even less idea which one is better…

2 Likes
5

We need to change textures, and materials, and replace objects like furniture for interior design

Please keep in mind that the use of images as texture maps in BIM is sparse. There is a reason for that. Native BIM formats are not meant for interoperability. Sure, you can use images whitin Revit et al, but you wil not be able to see them in a IFC Viewer. Then again IFC was meant for geometry and semantically structured data, not for “photorealism” purposes (note that I am quoting the buildingSmart board here). After a heated discussion, IFC4x3 ended up supporting textures, but the few viewers that I know that actually show the textures, they start by converting IFC data to a more robust representation aimed for that (like GlTF), which offers affine transformations, multiple UV sets, fine control of blending functions, etc.

The same goes for placing objects and decorations, they fall outside of BIM realm.

Bottom line, BIM for interior design could represent an issue in itself. You may find a better suited workflow by using BIM data only at the beggining, or just for loading major architectural elements, from there it should be better to use a different representation / format.

3 Likes
6

Hello,
I am the ThreeJS developer and 3D designer one membre of the team who made the project
(to give the company his wright)
https://vara3dconfigurator.com
so the best choice is ThreeJS and for furniture the best choice is to convert them to GLB file so you can easily change textures and colors

4 Likes
7

Mr. Mejdi, thanks for your comment and participation in our project.

Regards, CEO & Founder of VARA EdTech
( varaedtech.com )

2 Likes
8

this looks exactly like my startup Moddy.io - all very much possible in three, though I like r3f as my opinion is that it is more maintainable / less code.

2 Likes
9

You know we need data on floors, electricity, and windows ,… and for this purpose we need IFC. What is your idea about syncing IFC data with gltf model?

10

very nice.
But Imagine that we have a hotel with alot of floors.We need to filter floors,filter electricity part(lamp ,… ),filter windows and door
All od these datas are available in IFC format. How Can I handle it in GLTF?
Is there any way to sync these 2 models with 2 formats?

11

What do you use for AR and VR on web?

12

which formats did you use for files?
What is 2d part made of?

13

2d is simply an orthographic camera instead of a perspective camera on the same scene with the same objects

1 Like
14

this can be done in react three fiber with glftjsx components, a fancy way of saying “a code file for each model”

let’s say you have a wall, it might have 5 textures, so this is a data type

export type BlueprintWallConfiguration = {
texture: number;
};

then, a user has an input dropdown to select the texture, maybe “wood” is number 4

then, in the code, you the return the model with the correct texture applied.

similarly, you can change child objects within a model. For example, a kitchen sink could have different taps. Again, possible within a gltf jsx component.

it is worth noting, however, you want to consider the correct data structure.

for example, if a sink had different taps, then you can just make child objects of the sink.

if, however, the same taps are re-used for a bathroom vanity, then you do not want to duplicate child objects and instead, have a flat architecture where all objects can be re-used anywhere.

I’m not very advanced with performance, but you just want to monitor this from the start - reviewing FPS, draw calls, polygons, re-use geometries etc. Then, you will know what new features are slowing down the app.

1 Like
15

Yes I have used it.thanks

16

Do you know rules for uv and textures?
Can you help me in this question

17

Traditionally, an id is used to associate different data.

18

Three.js is certainly easy to create the interior and texture editor. The difficult part for me is creating realistic 3D objects with low polygons, which is necessary so the project doesn’t get heavy.

Here is an example of a room with some interactions, if you know how some of the old equipment works. I started implementing voice commands but gave up.
https://didisoftwares.ddns.net/2/index.html

About Textures, have many types of Materials, you need to change and find.
in three.js docs look diferences in menu

image
image453×586 26 KB