I am trying to upload obj files into a WebGL scene using Three.js. I saw some sample codes like the one below which works great, but I want to know what does the command

object.traverse();

do? What will happen if we don't do traversing? Thank you.

// prepare loader and load the model
var oLoader = new THREE.OBJLoader();
oLoader.load('models/chair.obj', function(object, materials) {

// var material = new THREE.MeshFaceMaterial(materials);
var material2 = new THREE.MeshLambertMaterial({ color: 0xa65e00 });

object.traverse( function(child) {
if (child instanceof THREE.Mesh) {

  // apply custom material
  child.material = material2;

  // enable casting shadows
  child.castShadow = true;
  child.receiveShadow = true;
  }
  });

  object.position.x = 0;
 object.position.y = 0;
 object.position.z = 0;
 object.scale.set(1, 1, 1);
 lesson6.scene.add(object);
});

I am trying to upload obj files into a WebGL scene using Three.js. I saw some sample codes like the one below which works great, but I want to know what does the command

object.traverse();

do? What will happen if we don't do traversing? Thank you.

// prepare loader and load the model
var oLoader = new THREE.OBJLoader();
oLoader.load('models/chair.obj', function(object, materials) {

// var material = new THREE.MeshFaceMaterial(materials);
var material2 = new THREE.MeshLambertMaterial({ color: 0xa65e00 });

object.traverse( function(child) {
if (child instanceof THREE.Mesh) {

  // apply custom material
  child.material = material2;

  // enable casting shadows
  child.castShadow = true;
  child.receiveShadow = true;
  }
  });

  object.position.x = 0;
 object.position.y = 0;
 object.position.z = 0;
 object.scale.set(1, 1, 1);
 lesson6.scene.add(object);
});

• javascript
• three.js

1 Answer 1

It is basically the iterator through your loaded object. You can pass the function to the traverse() function which will be called for every child of the object being traversed. If you call traverse() on scene. you traverse through the complete scene graph.