09_traversing_scene_graph.md

Example step

Traverse the loaded scene

Goal

Find and collect meshes and materials

Instructions

• start from our default scene

• load a 3d model from external file following the custom geometry tutorial

• now locate the loader.load(asset, function(collada) {...}) call in the code

• we are going to use a nice implementation of the visitor pattern which comes with ThreeJS: the collada.scene.traverse() method which takes the callback function to be executed for each node of the scene graph

• let's start with something really simple: for each node, print in console its id and type

  loader.load( './models/tha_face_web.dae', function ( collada ) {
      collada.scene.traverse( function ( child ) {
          console.log(child.id + ' ' + child.type);
      });
  })

• try to filter just THREE.Mesh objects and print their material type

  loader.load( './models/tha_face_web.dae', function ( collada ) {
      collada.scene.traverse( function ( child ) {
          if (child instanceof THREE.Mesh) {
              console.log(child.id + ' ' + child.material.type);
          }
      });
  })

• try to explore and filter different properties or objects

Explanation

The scene graph is a powerful hierarchy structure, and is easy to explore thanks to Object3D.traverse function.

For large scenes, you can use Object3D.traverseVisible() which traverse only visible objects.