Scale Mesh Objects, Groups, and so forth in threejs
In threejs there is the scale property of the object3d class that stores an instance of the vector3 class in terms of its value. By default the values for this Vector3 value are 1,1,1 which means that the scale of the object is 1 for each axis of the object. I can then change what the values are for this vector3 object making them higher or lower, and by doing so I will end up changing the scale of the object.
The Object3d scale property and what to know first
Check out my main post on the Vector3 class
The value of the scale property of an object3d based object is an instance of the Vector3 class. There are a whole lot of useful features to work with in this class so it might be a good idea to read my main blog post on the Vector3 class. I will be writing about many of the features of this class in this post of course but there is a lot more to be aware of with this one. Also setting scale is just one use case example of the Vector3 class and this seems to be something that comes up all the time when working with a threejs project. So it makes sense to get solid with everything that there is to work with when it comes to this class.
Read up more on Object3d in general if you have not done so
If you are still relatively new to threejs, and have not done so before hand, it would be a good idea to learn more about the object3d class in detail beyond just that of the scale property. In this post I am just going to be focusing on a few examples that just have to do with this one little property of this base class, but there is much more to know about it in general. The Object3d class is a base class for Mesh objects in three.js, but it is also a base class for many other major objects in the library also such as Camera, Group, and even whole Scene objects. So learning a thing or two about an object3d feature can often apply to a wide range of other objects that are based off of object3d.
Source code is on Github
The examples in this post and my many other posts on threejs can be found on Github. This is also where I park all the source code for my many other blog posts on threejs as well.
Version Numbers matter with three.js
When I wrote this post for the first time I was using revision 127 of three.js which was release in April of 2021, and the last time I came around to doing a little editing I was using r146. It would seem that much has not changes with the Object3d scale property and the Vercor3 class to which the scale property is an instance of. However it is still possible that the code examples here might break with future versions of threejs.
1 - Basic Object3d scale examples
As with just about every other one of my posts on threejs I like to start out with a few basic examples of the general topic or feature that I am writing bout. With that said in this section I will be doing just that by juts going over a few quick, basic, static scene examples that do not involve an animation loop. For the most part these examples will just involve using some Vector3 class features which is the kind of object that is the value of the scale property of the object3d class. Also although this is an object3d class feature I will be sticking to just the use of mesh objects here as I think I would like to leave groups for a latter more advanced section in this post.
1.1 - The Vector3 set method
For a very basic example of using scale there is just simply using the set method of the Vector3 class. This way I can call the set method off of the scale property and then give the values that I want for each axis value.
1.2 - The Vector3 Multiply Scalar Method
Another way to quickly scale up and object by way of all axis values at once would be to use the multiply scalar method to do so. This can be called just once off of the scale property and then I can give just a single value that will then be applied to all the axis values of the Vector3 object.
1.3 - Mesh copy method example
Now for a basic example of the scale property of the Object3d class that involves a few Mesh objects. In this example I am creating just a single Mesh object with the Mesh Constructor that uses the BoxGeometry and the Normal Material. I am then using the copy method of that mesh object instance to create to copies on this mesh object. I can then change the scale of these copies with the scale property of them and that will change the scale of these copies without effecting the original. The copy method will not fully deep clone the mesh object though when it comes to things like the geometry and material of the mesh object though, however for this example, and the scale property alone things work as expected.
2 - Group example of the Object3d Scale property
The Object3d class is not just the base class of Mesh objects but other classes of objects also such as THREE.Group for example. What is great about this is that I can use the scale property to not just adjust the scale of a single mesh object, but also a collection of mesh objects as well when it comes to setting the scale property of a Group.
When creating a group I can use the add method of a group, which is also a method of Object3d actually, and pass an instance of a Mesh, Camera, or anything based on object3d even another Group. When I do so what I pass to the add method becomes a child of that object, and by doing so setting a value for the scale property of that parent object will also effect all children of that object. In this example I am once again creating a few copies of a Mesh object, and using the scale property to adjust the scale of the copies of this mesh object, but I am then also adding all of the mesh objects to a group. This is all done in a helper function to which I return the group as the return value of the helper function. The scale property can then be adjusted with the resulting group also to adjust the scale of the group that is returned, and I can also make more than one instance of this group of mesh objects.
I often do something to this effect when it comes to creating a crude model using just the built in three.js constructors for geometry and materials. There is just using all the properties and methods of the Object3d class and Mesh objects that are based off of it to create objects that compose a grater whole. The scale property can then be used to change the size of parts of the model as well as an instance of a model itself. I have a few threejs project examples in that also function as these kinds of projects such as my guy one model and my first tree model. However there is also looking into how to go about exporting from blender as well which might be the best way of going about doing this sort of thing.
3 - Scaling Buffer Geometry once and then using object3d scale method
There is also the scale method of the buffer geometry class that can also come into play when doing this sort of thing. The scale method of the buffer geometry class is what I would want to use just once to adjust what the base size of the geometry of a mesh should be to begin with. For example say I load a source geometry of a guy model and the height of the guy is to small for what I would want the default 1 1 1 scale should be. Once way to fix this would be to edit the source geometry, but another way to fix it on the fly would be to just use the buffer geometry scale method once to adjust what the size of the geometry is to begin with.
I will want to call the scale method of the geometry just once as it will take some overhead to do this. After that any additional scaling can be done with the object3d scale method.
4 - An Animation example of scale along with many other object3d features
So then the scale property can be used to set the scale of a single mesh object, and because it is a property of a base class the same property can also be used to set the scale of a group of mesh objects also. So now there is getting into having some fun with this and starting to create some kind of interesting animation or something to that effect just for the sake of exercise. In this example I will be going over a more advanced example of the scale property for single mesh objects, as well as group objects. On top of the use of the scale property I will also be making use of other note worthy aspects of the Object3d class that come into play when making a complex three.js project such as the user data object, position, and rotation properties of the bject3d class.
4.1 - The Cube Group module example
It is time to start breaking things down a little now, so for this example I made a stand alone module that I will be using to create a group of mesh objects. In the module I have two public methods one of which is used to create a single group of mesh objects, and the other is used to apply an update effect to the values of one of these groups of mesh objects.
The end result of this is then a ring of these cube groups rotating and scaling up and down. Looks kind of cool, but there is much more that could be done when it comes to really going off the rails with this. I could maybe create additional modules like this cube group that create additional effects with groups of mesh objects, there is also a great deal more that could be done with materials and lighting.
4.2 - Video1 source code
For this example I have the source code that I used to make my first video for this blog post. It involves creating a group of mesh objects, and then using the object3d scale to scale each mesh over time with an update method. They way that I did it for this example is that I made a helper function that will set a kind of default state for each mesh, and I call a for mesh method for each while doing so. I then have one update method that masks use of this that sets the scale for each mesh object as well as a whole bunch of others while I am at it.
The scale property of object3d can then be used to change the scale of a Mesh object, and many other such objects in three.js. The scale property can the be used along with many other useful methods of Object3d and Mesh objects such as position, rotation, and copy to create interesting artful animations and projects just using the built in geometry and material constructors.
I have a whole lot more ideas that come to mind for examples with the scale property of course, however maybe I should save a lot of them for my growing collection of three.js project examples. This is just a single blog post on this one little topic of three.js development and the final example that I have made for this is all ready starting to look like some kind of major deal.