Retrieving Child Nodes in Three.js

To retrieve a list of all child nodes from your Three.js model, you can traverse the scene graph using the built-in methods that Three.js provides. Here's how you can accomplish this:

Method 1: Using traverse() Method

The traverse() method is the most common way to iterate through all descendants of an object:

JAVASCRIPTCopied
// Assuming 'model' is your loaded 3D model
model.traverse(function(child) {
    console.log(child.name || 'Unnamed Object');
    // You can also check the type of object
    if (child.isMesh) {
        console.log('This is a mesh:', child.name);
    }
});

Method 2: Accessing Children Directly

You can also access the immediate children of an object using the children property:

JAVASCRIPTCopied
// Get immediate children
console.log('Direct children:');
model.children.forEach(function(child, index) {
    console.log(index, child.name || 'Unnamed Object');
});

Method 3: Creating a Hierarchical List

If you want to create a hierarchical list like shown in your image:

JAVASCRIPTCopied
function listHierarchy(object, indent = '') {
    console.log(indent + (object.name || 'Unnamed Object'));
    
    object.children.forEach(child => {
        listHierarchy(child, indent + '  ');
    });
}

// Call this function with your model
listHierarchy(model);

Displaying in UI

To display this hierarchy in a UI element like shown in your image:

JAVASCRIPTCopied
function createHierarchyList(object, container) {
    const ul = document.createElement('ul');
    container.appendChild(ul);
    
    object.children.forEach(child => {
        const li = document.createElement('li');
        li.textContent = child.name || 'Unnamed Object';
        ul.appendChild(li);
        
        if (child.children.length > 0) {
            createHierarchyList(child, li);
        }
    });
}

// Create a container in your HTML
const hierarchyContainer = document.getElementById('hierarchy-container');
createHierarchyList(model, hierarchyContainer);

These methods should help you retrieve and display the hierarchy of your 3D model as shown in your reference image.