One major part of learning how to use threejs is to get a solid grasp on what there is to work with in the object3d class. There is not just the base object3d class itself, but also a whole lot of other objects that are extended from this class such as mesh objects, groups, cameras and even whole scene objects. So once one gets an idea as to what the position property of the Object3d class is all about for example, they can also apply that same understanding to a lot of typical objects that are used when working out a scene.
So there are all these different kinds, or types of objects in threejs that are all based off of object3d. With that said there should be some kind of standard way of finding out what type of object that I am working with when looping over all the objects attached to an root object of interest. As with any other kind of class in threejs there is of course using something like the instanceof operator to find out if I am dealing with a given class of object or not, and that might work okay. However there is also a type property of all these various types of objects that can also be used as a way to find out what type of object as well. With that said this post will be about just that how to go about figuring out what the type of a given object3d based object is in threejs.
Another option for looping over the contents of objects in threejs would be the built in traverse method that is another object3d class method of interest when it comes to this sort of thing. This will not just loop over children, but also children of children, and the object that I call the traverse method off of as well.
This post is not a general overview of the object3d class as a whole as I have wrote a post like that all ready. Rather it is a post in which I am just going over some source code examples that have to do with what kind of object3d based object I am dealing with, and with that a general overview of types in the process. In my main object3d post I also have a section on this topic, but also sections on a whole lot of other object3d related topics.
The source code examples that I am writing about here can be found in my test threejs Github repository. This is also where I am keeping the source code examples that I am writing about for all my other various posts on threejs, so there is a whole lot of code examples to look at for what it is worth.
For this example I am just logging out what the result of the type property is for a few objects that I added to a very basic start point for a threejs project. When I do so the result is what I would expect I get a string value that corresponds to the name of the constructor function that was used to create the object.
Often the type property is something that I will want to check when it comes to looping over all the objects from a given start point object such as a group object, or maybe even a whole scene. With that said in this section I will be going over a few quick examples that have to do with looping over the children of object3d based objects to check type of each child. When it comes to doing this there is just looping over the child array, but there are also additional object3d class methods of interest that help with this sort of thing as well.
For a very basic kind of getting started or hello world type example of the type property of objects in threejs there is starting out with some example that is just a basic scene object with objects added of various types. So then I made a quick example where I am just creating a main scene object along with the other typical objects that I want for any threejs project such as a camera and renderer. When making the camera I made sure to add the camera to the scene object so that it is a child of the scene object so that it will be one of the objects to loop over later in the code.
After setting up my scene object, camera, and renderer I will now want to add at least one instance iof the Object3d class. While I am at it I think I will also want to add at least a few mesh objects to the object3d instance as children of it. For this I made a quick function that will create and return a new Mesh object that uses the built in box geometry constructor for the geometry of the mesh, and also uses the normal material for the mesh when it comes to adding texture for the geometry of the mesh object. I then created an array of arrays where each nested array is a set of values that I want to set for the position of each mesh object. I am then just looping over this array of arrays and using the Function apply prototype method with the set method of the vector3 class instance of the position property of each of these mesh objects that I want to create. I then of course add each mesh object to the Object3d class instance in the body of the function that I am passing to array for each while doing this.
So now that I have a scene object with all these various kinds of objects added to the scene object as children I might want to have a way to go about looping over the children of the scene object, and then preform some kind of action for each type of object that is encountered. One way to do that would be to just loop over the contents of the children property of the scene object and check the type property of each objects, using that as a way to know of an specific action should be preformed or not.
Although I might often just loop over the children array using array prototype methods there is another object3d feature that can be used for looping over objects, and also the objects of objects called the object3d traverse method. When I call this method it will give me a reference of the object that I call it off of, all the children of that object, and then also the children of children and so on. So when it comes to looping over objects to check the type of each, and do something on a type by type basis thing method might prove to be a better choice for many situations.
For this section I think that I will want to go over a number of demos that will be an overview of some of the various types of object3d class based objects that there are to work with. I will not be able to get to all of them of course, but when it comes to future edits I will add a new demo now and then. The real thing to do here is to just demo why the type property will prove to be useful when looping over objects. When doing so I might want to preform some logic for all objects of a given type, so that is what these demos are mainly about.
A Mesh object] will contain a geometry and a material. So when looping over all objects in a scene I might want to do something with say the material of all mesh objects. For example say I created a whole bunch of mesh objects that all share the same geometry, but they all have there own material. With that said I could change, say the color option of each material in each of these mesh objects after they where created. So I can use the traverse method to loop over the contents of the scene object, and set the color of each mesh by checking the type property to make sure it is indeed a mesh object.