How to produce a hierarchy of all parts in uploaded model like threejs editor

I have created a web toolkit for CAD design where users upload their initial 3mf file. These files contain info on the parts and materials in the model and I want to display this information in a table. When the user clicks on a part in the table, a bounding box is drawn on the clicked part in the model. So far I have been able to access the materials in the entire object and print them on screen using the following:

for (let i=0; i<model.children[0].children.length; i++){
       $('#modelMaterials').append('<div>'+ model.children[0].children[i].name +'</div>');
 }

I also know that I can draw a bounding box on the entire uploaded 3mf object using the following:

modelbox = new THREE.BoxHelper( model, 0xffff00 );
scene.add( modelbox );

So I can just store the names of all the materials and make a table where when a particular material is clicked, the bounding box is drawn for that material.

But the three js editor is able to produce a hierarchy of parts and subparts in its table and when those are clicked, a bounding box is drawn on the parts and subparts which is a better functionality than what I have with my current approach. I wanted to know how I can produce this table which can show all the parts and subparts in the model and when clicked, it produces its bounding box.

When I look into the 3mf consortium document describing the file format, I didn’t see a section that described how hierarchies are formed and I also don’t know how three js editor is creating the hierarchy for the 3mf files.

You can use traverse and/or traverseAncestors accessing parent/children property of each object to create the hierarchy.

You can use transformControls to mimic the editor functionality.

1 Like

Thanks! I am now using traverse to get all the individual parts in the model and put them in my own table here:

tmpObject.traverse( function ( child ) {
  var table = document.getElementById("tbl");     
  var rowCount = table.rows.length;         
  var row = table.insertRow(rowCount);
  
  row.insertCell(0).innerHTML= '<tr><td>'+ child.name +'</td></tr>';
} );

image

But as you can see from my above table, I am unable to distinguish which child goes under another particular child object because the traverse function is treating them all in the same way as individual parts?
image

Try to play with parent and name and uuid of the parent to identify which object is the parent

Using tables is not the best approach here, where you will put the children of some object? Inside the parent <td>? Use ul → li → ul → li, etc