When it comes to the Object3d class in threejs there is an id property of each object3d instance, however I have found that this is something that I should not mess around with. Still when it comes to setting my own unique strings for Mesh objects, groups, cameras and anything based off of the Object3d class there is an official built in way to do so. There is another property of Object3d that I can set to what I want, and that is the name property of the Object3d class that is more like that of the id property that I have come to know well in native client side HTML. There is then the get object by name method of the object3d class that I can then use as a way to get an object in threejs that has a set name for it then.
So In this post I will of course be going over a few quick examples of this get by name method for sure. However I might also want to expand by just making a few other demos that have to do with getting references to objects in general as well while I am at it.
There is a great deal more to be aware of when it comes to working with the object3d class so it would be a good idea to read up more on the object3d class in general if you have some time to do so. The object3d class is a major base class in three.js, and here are a lot of other objects that are based off of the Object3d class such as Mesh objects, Cameras, Groups, and even the Scene object just to name a few things. So when it comes to learning something about the Object3d class such as the name property this is then something that can be applies to everything that is built on top of Object3d. The name property is then just one of these things to be aware of and there are many other tools in this very useful base class that one should look beyond just that of the get object by name method.
The source code examples that I am writing about here in this post can also be found on Github in my test threejs repo. This is also where I park the source code for my many other posts on threejs as well.
When I first wrote this post I was using threejs revision r127 of three.js which was a late version of three.js in May of 2021. Also I do get around to editing my content on threejs every now and then and with that said the lat time I came around to edit this I got all the source code examples working just fine with r146 of threejs. As of r141+ I am now using the WebGL1 renderer so the code examples may now break on older versions of threejs, but one might just only need to make changes with that to get them working.
In the future code breaking changes might be made that will cause these code examples to no longer work, and such changes might happen sooner rather than later. Three.js is a project that is moving fairly fast when it comes to development so always be mindful of what the revision number was that a person might have been using when reading something on the open web that has to do with threejs.
I should start off with a basic getting started type example with the name property and the get object by name method of the object3d class. In this example I create a group using the THREE.Group constructor which is also based on the Object3d class, so I set a name property for it. I then add two mesh objects to this group, each of them I also set a name for called just simply box1 and box2. Later on in the example I can then call the get object by name method off of the group to get the first box object in the group. I can then do something simple to that mesh object such as changing the rotation of the object.
That is then the basic idea of the name property it is just like that of the id property when it comes to HTML elements. I can set a string value to a mesh object, and then I can get a reference to that mesh object later by using a method that can be used to get a reference to the object by this name string value. Still it might be a good idea to take a look into some more examples of this, and also some additional ways to get references to objects in threejs projects.
Now that I have the basic idea of what the name property is used for it is time to move into making a more complex example where I am using the name property and the get by name method to get at specific objects, and change there properties to desired values. When it comes to making an actual project with three.js I often like to make simple little animations using models that are just groups of mesh objects. When doing so I often have many parts of these kinds of models so it makes sense to use this name property as a way to set names for the various parts, or just use this as a way to set and change values of the mesh objects to make a kind of crude model of something.
In this example I have a method that just creates and returns a group of mesh objects and when doing so it sets a name for each mesh object. I then have a method that positions these mesh objects into positions that are along the circumference of a circle. However the real method here is my create object method that makes use use of both of these helper functions to set things up and running here. I am then using the names set with the create box group method to adjust some things to make a kind of whole object using just box geometries.
So then this is starting to look like something a little interesting now, however there is a great deal that I would like to add and change. In this example I just have one instance of this object model of sorts, and of course things will get a little weird when I have more than one group with the same name, and then each of those groups having the same set of names for each child. So maybe I should get around to making at least one or two more examples where I am working out some kind of system for creating and setting name values for mesh objects and groups of such objects..
The name property of object3d is then a great way to set some string values for each mesh object of interest and then use that as a way to get and set values for mesh objects that have a given unique string value. In this example I am taking the basic idea that I started in the previous example and am not going just a little farther with it by making name values that are unique for all parent and child mesh objects.
It might make sense to go all out with name values by making sure that all mesh objects have their one unique values as this will enable me to get any mesh object that I want by calling the get by name value off from the scene object. However this might also prove to be overkill assuming that I can also get a reference of a group object by some other means. In any case when it comes to having more than one instance of a group of mesh objects it just starts to make more sense to do something to this effect.
The logic that I first worked out in my previous example is now pulled into its own module. This is just something that I often end up doing when I start to make something that is starting to get a little involved. The main feature of interest with this module with respect to the theme of this post is the create box group method at the top of the source code. In the body of this function I am setting names that should end up being unique for the group, and also each child of the group.
The name property is one of the many basic things about three.js that I should get into the habit of using. It is true that I will not be using every little feature of every little class when it comes to using three.js to make an actual project. However I think that the name property is just one of these little aspects of three.js that I should be using often when making my crude yet effective modules that are just groups of mesh objects.
What I have worked out for this example can and will apply to new three.js examples, and it is also something that I would like to keep in mind when it comes to editing my older content when it comes to making three.js project examples. I have a number of examples where I am working out modules, and over all whole animations composed of these modules that are collections of group objects. From now on I should get in the habit of setting sound name string values for the mesh objects, and groups that are created when making these modules. If you would like to check out some of these there is my main post on my three.js examples that is worth checking out to see what the current states is with these examples, and I often update that post when I add new examples, and edit old ones.