Loop over all objects in a threejs scene with the Object3d traverse method
If for some reason I want to loop over all objects in a threejs scene, or all the objects attached to any single object I can use the object3d traverse method. The way this works is I just call the traverse method off of the scene object, or any object based off the object3d class for that matter, and pass a callback function as the first argument. This call back function will then be called for every nested child attached to the object that I call traverse, including the object itself. A reference to the current object will be passed as the first argument of the given callback function and it is then in the body of this function that I can preform whatever action I want to happen for all objects.
So then in this post I will be going over the use of the traverse method of the object3d class. In the process of doing so I will also be touching base on a wide range of other topics of interest that will branch off from the use of this method. There are things like the type property of the object3d class that come to mind when it comes to checking out what kind of object it is that I am dealing with for example.
Looping over all objects using Object3d traverse and what to know first
Take a look at the object3d class in general
There is a lot to write about when it comes to the object3d class, and the traverse method is just one little item of interest. So it would be a good idea to maybe check out my post on the object3d class in general if you have some time to get into the thick of it with this class. Doing so is called for sooner or later when it comes to gaining a solid understanding of the library as the object3d class is a base class that apples to a lot of objects in the library such as Mesh objects, Groups, and even the main scene object.
Source code is up on Github
The source code exmaples here can also be found on github in my test threejs repo. This is also where I park the source code for my many other blog posts on threejs.
Check the version numbers, always
This is something that I think that I just need to mentioning in ever post I write on threejs now, which is that I was using threejs version r127 when I made these code examples here. Also the last time that I came around to do some editing I was using r146. Threejs is a library that as of this writing is still moving very fast when it comes to development, and code breaking changes are made to the library often.
1 - Basic examples of Object3d.traverse
So first off this will be just a few basic examples of the object3d traverse method just for the sake of getting started with this method. The focus here will be on using the method along of course, but also closely related topics to the use of the methods such as the object3d type property, the user data object, and other ways to find a given kind of object as I loop over all objects from a given starting point such as the scene object.
1.1 - Loop Over all objects in a Scene Object checking type
In this example I am creating a main scene object and then I am adding some grid helpers objects to the scene. These grid helper objects are based off of the object3d class so they will show up in the traverse call that I will be using later in the source code. On top of the helpers I am also adding a group, and this group will have a whole bunch of children, each of which will be an instance of a Mesh object. After that I am also adding a camera to the scene when it comes to setting up the camera, and the renderer that I will be using.
So then before I call the render method of my webgl renderer instance I call the traverse method off of the scene object and then pass a function that I want to call for every object attached to the scene object as a child. This will not just call for all the children, but also all the children of children which is the case for the group of mesh objects that I attached. In the body of the function I can preforming an action for each mesh object, but also the group object itself if I want. One way to know what I am dealing with would be to take a look at the type property of each object3d based object as I am doing in this example.
So then this should help to show the basic idea of what the traverse method is all about. It is a little more advanced than just looping over the children of an object as the traverse method will loop over the children, the children of children, and it will also include the object itself.
1.2 - User Data object example
2 - Setting names for objects example
One use case example for traverse that comes to mind is that I can use it as a way to set name values for all objects of interest that are attached to a scene object. In this example I have a create cube method that will create and return a cube object with a cube group type set to the user data object of the mesh object that it is returned. I then have a create cube group helper that creates a collection of these cubes and also has a cube group type value set for the user data object of the group. I can then use these values parked in the user data object as a way to flag this object for the creation of a name. This is then done in the next method that does just that.
I can then get a reference to any of these group objects, or a single mesh of one of the group objects, or a single stand alone method with the get by name method. This get by name method is yet another useful method of the object3d class that is a way to go about getting referenced to objects in a scene by way of a name that is set by the developer. In other worlds a name is like an id when it comes to html elements, I can set a unique value for the object and then use that as a way to get a reference to it later on when needed.
3 - DAE loader helper example
One project that I have been using where I make use of the traverse method is with my dae helper that I use on top of the Collada Loader for threejs. The Collada loader is one of many options when it comes to loading external files and parsing them as workable objects in threejs. If you have not got into using external assets yet, the Collada loader might prove to be a good starting point when it comes to options beyond that of the built in buffer geometry loader. The examples in this section are from my main blog post on the DAE loader in general that you might want to check out if you want to learn more about this sort of thing.
The DAE Loader helper module
Here I have the source code of R0 of my dae helper that I write about in detail in my post on the DAE loader in general. I made just a few quick changes here that have to do with just adding a few comments and passing a url when calling the cloner function. Speaking of the cloner function it is the process of calling this function where the object3d traverse method comes into play actually.
3.1 - Basic Demo of the helper
So now I have here just a quick demo where I make use of the dae loader helper method that calls a custom cloner method for each object of each dae file. For this basic example I am just loading one dae file and that is all. When loading the file the dae loader helper will call the traverse method off of the scene object of the resut and call the cloner function for each object in the DAE file. I can then check the type and anything else that I want to check to find out if I want to even make it a source object for an over all project or not. On top of this I can also make new source objects by any means that I want to beyond just calling the clone method as I am doing by default with this dae helper tool. For this example I am making a whole new mesh object and using the geometry from the DAE objects that are mesh objects only. However I am making a whole new material just using the map texture from the source mesh objects in the DAE file.
4 - Animation Loop Examples of Object3d traverse
Now that I have the basics of this traverse method out of the way as well as a few more examples about the method out of the way it is not time to make at least one if not more animation loop examples of the method.
4.1 - video1 animation loop example
This animation loop example is based off of the source code for the first video that I made for this blog post. The idea was to just use traverse as a way to loop over all the objects of the scene to set certain values for all mesh objects and groups. I am using the traverse method once to set certain things up for each mesh object once with position and scale, and then also using it again when it comes to the update loop.
This is not the best example of the traverse method though as I would prefer to do things differently when it comes to making this kind of project.
So then the object3d traverse method is a great way to go about looping over every object that is attached to the main scene object, or any other object from which the traverse method is called. There are a whole bunch of various use case examples that come to mind when it comes to suing this method to preform some kind of action that I would want to apply to all objects, or all objects of a given type.
So it goes without saying that I will likely come up with additional use case examples when I come around to editing this post nest time. There are a whole lot of other ideas that comes to mind such as having methods where I just loop over all objects and return just a collection of objects by a certain type, or objects that meet certain requirements.