Filter 3D model by specific things like floors (floorplan)

Questions
, , , , , , ,
1

Hi guys. I am creating a floor plan website. It is related to interior home design.
I want to filter my 3d model and show each floor and each room separately to my client. I mean we will have a menu where users can see a list of floors of the current building and a list of rooms(kitchen, bath, bedroom, living room,… ) and by selecting them, they can see that place and design that part for easy access and designing.

Do you have any suggestions?
The first thing I think that can help me is the name of each mesh. What is your idea of having a standard model and viewer?

Screenshot 2024-08-16 at 12.15.02 PM
Screenshot 2024-08-16 at 12.15.02 PM820×542 142 KB

1549852072384

2

Yes, give names to elements. No need to name every mesh, only the ones that are of interest. You may give a name to group and leave its subelements unnamed. You may also apply some naming convention, e.g. the names of floors are floor_1, floor_2, …

Also, create proper hierarchy, so that it is easy to show:

  • just one floor
  • or one floor and all its walls
  • or one floor, its walls and all its furniture

The best will be if you have consistent naming, so that the filtering works for any building design.

3

You mean by traverse and check names I can manage groups and floors

4

You may also use .getObjectById, .getObjectByName, .getObjectByProperty, .getObjectsByProperty. They will do the traversal for you.

5

You could also add a list of attributes to each thing in its userData field.
wall.userData.isWall=true;
wall.userData.isInKitchen=true;

then do operations via traverse like…

//Hide all walls in the kitchen
scene.traverse(element=>{
if(element.userData.isWall && element.userData.isInKitchen)
    element.visible = false;
})
1 Like
6

Excuse me What do you mean? In Blender, do I have to add these attributes?

1 Like
7

You can add them in blender…
On either the mesh or the geometry if you add a custom attribute it will get exported.into the user data or you can tag them in your code…

8

When I have for example 5 groups(collections) in my model with a lot of meshes in them.
When we use scene.getobjectbyname ,three.js just travers to groups or check all subchilds too?

9

I have never had the need to use this method. Yet, I hope it will traverse recursively all subchildren.

Generally you could get answers of such types of questions much faster:

  • by making a small test
  • or by looking at the source code
1 Like
10

I mean is it good for large models performance to traverse all ?

11

It depends on how you use it.

  • If it is a response to user interaction (e.g. selecting floor by click), traversing 1000 meshes will take a fraction of a second.
  • If you use it inside the animation loop, it is better to locate the objects in advance and use them directly in the loop.
12

what do you mean by locate the objects?

13

Instead of:

function animationLoop( t ) {
   // object is searched every frame
   process( scene.getObjectByName('objA') );

   renderer.render( scene, camera );
}

do:

// object is searched once
const objA = scene.getObjectByName('objA');

function animationLoop( t ) {
   // object is used without searching, because we 
   // already have a reference to its location in the scene
   process( objA );

   renderer.render( scene, camera );
}
14

ok
I do not use these kinds of code on animation loop

1 Like
15

you don’t need to traverse at all to do this…

in your scene, you can have an array to store all objects and render them

export const createHouseFloors = (
blueprint: BlueprintElement,
level: number;
units: ‘metric’ | ‘imperial’
)

as one example, each “level” could be assigned a layer, so for example, when you want to display level 3 of 5, you can just return that

  <Canvas>
      <PerspectiveCamera />
      {layers[3].map(createHouseFloors)}
  </Canvas>

that way, you can swap between floors, and the camera will stay in the same position