When it comes to setting boundaries for Vectors in a threejs project there is often clamping the values or wrapping the values. That is that there is a situation in which there is a min value, a max value, and having a way to make sure that a value is always inside this range. However there is the idea of having it so that a number out of range is clamped to a value that is closest to what is in range, and then there is the idea of warping the value back around from the opposite side of the range. In todays post I will be focusing on what there is to work with in the Vector3 class prototype when it comes to clamping values. However I think that I should also have at least a few examples that have to do with wrapping vector3 objects as well.
When it comes to clamping Vectors there is the idea of having two Vectors that will be min and max Vectors, this results in some kind of box like area in which a vector can be clamped into. There is another general idea when it comes to clamping vectors that has to do more so with setting a limit in terms of the Euclidean length which will result in a sphere like area in which values can be clamped to. I suppose that there are all kinds of other ideas that come to mind when it comes to more complex examples of this sort of thing, but those are the two general basic ideas for starters. When it comes to these two general ideas there is the Vector3.clamp, and Vector3.clampLength methods in the Vector three class to work with.
This is a post on using the Vector3 clamp methods to clamp a vector between a min and max range. And when doing so for this post at least I am sticking mainly with where there is to work with in the Vector3 prototype alone rather than looking into additional examples of this sort of thing. So then I trust that you have covered the very basics when it comes to getting up and running with threejs in general, and have not got to the point where you are just learning more about working with the Vector3 class.
In this post I am just going over a few methods in the Vector 3 class that have to do with creating and working with one or more Vectors in threejs. FOr the most part I am just focusing on methods like clamp and clamp length. However there is a great deal more to learn about the class and Vectors in general.
The source code examples that I am writing about in this post can be found in my test threejs repo on github. This is also where I park the source code examples for all my other blog posts on threejs as well.
When I first wrote this post I was using threejs r127, and the last time I came around to do some editing I was using r146 when it comes to testing out the source code examples. I have got into the habit of making sure that I always mention the version of threejs that I am using when it comes to writing a post on threejs. The main reason why is because threejs is still a very fast moving project in terms of development and code breaking changes are happening all the time with it as a result.
With this section I will be starting out with just a few very basic examples of the Vector3 clmap method, as well as other Vector3 methods such as clamp length. this will very much be a basic section so these examples should be fairly easy to get working on your end. However There are still a few basic things that you will need to be aware of before getting them to work. There is still things like knowing to use three.min.js over that of three.module.js for revisions where that is still an option, as well as a lot of other things like that which come to mind. Still in this section I will be keeping things as simple as possible for what it is worth.
So in this example I am using the Vector3 clamp method to just make it so that any value that I set for the position of a mesh object that ends up getting clamped within a min and max Vector range. So the way this works is I just call the Vector3.clamp method and pass the vector that I want to clamp as the first argument followed by two additional arguments that are the min and max ranges for the Vector if the form of additional Vector3 instances.
The subject of clamping a vector by length goes hand in hand with many other related topics such as what a length of a vector is, and also what a normalized vector with a length of 1 is. Getting into this subject might be a little off topic, but the basic idea is that a length of 1 is a radius of 1 from the origin. So by clamping the length of a vector from 0.5 to 1 will make it so that the distance from the origin to the vector will always be between those values.
Some times I might not want to have a vector clamped to a set of vectors that from a box, or using length values, but rather I would like to have things wrap around. Sadly it would seem that there is no wrap method in the Vector3 class, at least not of this writing with r140 of the library anyway. However there are some core tools to start out with in the math utils object such as the Euclidean Modulo method that will be a good start when it comes to wrapping values.
Now that I have a basic example of wrapping out of the way it is now just a question of doing this for all axis values. The solution that I would out for this is a little involved, but I managed to make ground with it by just thinking in terms of what I need to do on a axis by axis bases.
There is not just wrapping the axis values of a vector, but also wrapping the unit length of a vector. In other words there is doing the same thing as the clamp length method that I covered in the basic section of this post, only just wrapping the value around rather than clamping it. For this demo then I am doing just that by once again using the THREE.MathUtils.euclideanModulo method of the math utils object to create an alpha value in the range of 0 to 1. I can then use this in the process of setting the length of the vector of the position of a mesh.
Speaking of setting the length of a vector to do so I am setting a starting position of the mesh that has a unit length of 1. I am then using the apply Euler method of the vector3 class as a way to adjust the direction rather than unit length of the vector. Anyway if I have a vector with a unit length of one I can then use the multiply scalar method to set the current vector length that I want. In this case it is a value created by way of an expression that uses the alpha value made with the help of the THREE.MathUtils.euclideanModulo method.
For this section I will now be going over a few animation loop examples.These are often the startong points for one or more videos that I make for blog posts such as this.
To get a real idea as to how the clamp method might come in handy I will want to have some kind of animation loop example. For this first animation loop example I have a whole bunch of mesh objects that start out at the center of a group and then move out my making use of a value that I use with the multiply scalar method. When moving the mesh objects I use the clamp method as a way to make sure that the mesh objects are not moving out of bounds and I am also resetting an alpha value while doing so to create a kind of crude animation loop type thing.
For my next animation loop example I am making use of all of the core ideas that i have covered in this post. This is just a more advanced version of the first animation loop example where I can set a clamp type when creating a group of mesh objects. Inside the update method this clamp type is then used as a way to find out what kind of method should be used to make the mesh objects say in a given area.
This far I can not say that any of the animation loops thus far do a good job of showcasing what the clamp method is really about. I started making just one animation after another that showcases clamp, but also other alternatives such as wrapping. So for this animation loop example I thought that I would make one where I just clamp all the children of a group to an area within a grid. This involves just creating a whole bunch of mesh objects and adding them as children of a group. While doing so I can add a heading value as well as some other values to the user data object of each mesh object. In an update method I can then use this user data to move the mesh objects by a given heading and speed. I can then also make use of the Vector3 clamp method to make sure that the mesh objects do not go out of bounds. I can then check to see if one of the mesh objects are along an edge and if so give them a new heading and also set the color depending on what side they hit.
So then these clamp methods are helpful for making sure that a given point will never leave a given range, but they are not the best choice for other applications that come to mind. One such other application would have to do with collision detection, where I do not always want to clamp or wrap a point to a rang, but to just simply know if the point is in or out of a given range.
I did not get around to every little detail when it comes to setting boundaries for Vector3 values in general. I think I did more or less cover what there is to work with when it comes to clamping values at least, but I did not get into solutions that have to do with wrapping values. When it comes to that it would seem that there is no built in solution for doing so in the Vector3 prototype by itself at least. So it would seem that in order to Wrap values I will need to come up with my own solutions for doing so.
There is also getting into more advanced solutions when it comes to just clamping values also, as I just covered the two basic ways of doing so here. So hopefully at some point in the future I will get around to expanding this post with additional examples on clamping vector’s, and possible also some warping examples to which would be nice.