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.