Distance from one point to another in threejs
When it comes to points or Vectors if you prefer in threejs there is the question of how to get the distance between two of them in space. In the Vector3 class there is the distance to method that can be used as a built in way to go about getting distance which should work fine.
So this post will be on the use of the distance to method of the vector3 class. However it will not just be about the distance to method of course though. I will be touching base on a whole bunch of other methods to work with in the Vector3 class, as well as a whole bunch of other aspects of the threejs library. There are many use case examples that will come up when it comes to using this sort of method, any many of them will involve not just getting the distance of course. I will not be getting into every little detail with the Vector3 class of course, but the focal point here will of course be the distance to method.
The Vector3 distance to method and what to know first
Read up more on the Vector3 class in general
The distance to method is just one method of interest in the vector3 class to work with, there are a number of other useful methods when it comes to working with these kinds of class instances. So it would be a good idea to look into the THREE.Vector3 class in greater detail at some point sooner or later in order to gain a better understanding of everything there is to work with when it comes to the Vector3 class.
Know the basics of Object3d, and the position property specifically
Another Major class to work with in threejs is the obejct3d class, and when it comes to working with the Vector3 class it is mainly the position property of anything based off of object3d that is of interest. One major use case example of the distance to method is to use it as a way to get the distance between two mesh objects. So then to do so I would want to call the distance to method off of the Vector3 instance of the position property of the Mesh, and then pass the position property of the other mesh as the argument for the method. There is a lot to be aware of when it comes to working with Mesh objects, but what there is to know about Object3d applies to Mesh objects, as well as all kinds of other objects that are based off of object3d.
Source code examples are on Github
The source code examples that I am writing about in this post can also be found in my test threejs repo on Github.
Version Numbers matter
When I first wrote this post I was using r127 of threejs and the last time I came around to doing some editing I was using r146 of the library. Code breaking changes are made to threejs often, also there are some major changes coming up ahead with later revisions of threejs that I do not care to get into detail with here. Simply put version numbers matter big time with threejs and not just with respect to the revision number but many more other things deeper down in the software layers as well. If you are running into problems with these source code examples check the revision you are using, also be aware of what your graphics card is capable of, what drivers you are using with them and so forth.
1 - Basic Vector3 distance to method examples
As always for each of my posts on threejs features I like to start out with at least a few basic examples of the topic at hand. When it comes to these examples I do my best to try to keep them fairly simple, copy and paste friendly, and avoid anything that might made the code to long. So nothing fancy with animation loops, custom shader materials and so forth. Just some simple hello world program style examples of the distance to method of the vector3 class.
1.1 - Setting scale of one mesh by way of distance to another
So for now it might be a good idea to just start out with a basic example of the distance to method using the position properties of some Mesh objects which are of course instances of the Vector3 class. In this example I just have a single create cube helper method that will create and return a mesh object that uses the box geometry and the mesh normal material. I am then calling this create cube method twice and adding two cubes to the scene. After creating the mesh objects I will want to use the set method, or whatever means to change the positions of mesh objects objects.
There is now calling the distance to method off of the position property of one of the mesh objects and passing the position property of the other as the first and only argument. The result will then be the distance between these two mesh objects which I can then use to say set the scale of one of them. So then with this demo I am doing just the scale of cube2 will go up and down depending on the distance to cube1.
This might not be the most interesting example in the worked when it comes to the distance to method, however this is of course a basic example and that is often the case with these kinds of examples. I just wanted to start with something very simple for this post, and with that said the basic idea of the distance to method is there.
1.2 - The vector3 length method
The length method of the vector3 class is another method that is similar to that of the distance to method in that in a way it is a distance of sorts, however it is less versatile. The length method will return the vector unit length of the vector3 object. That is that a vector is of course a direction, and a magnitude along this direction as such the value returned by length is the magnitude part of the vector. In other words, simply put, the length is the distance of the x,y and z position from 0,0,0.
2 - Animaiton loop examples
In this section I will now be going over some animaiton loop exmaples that make use of the distance to method of the vector3 class.
2.1 - Move an object to a point, and adjust the rate by distance example
So now that I have a basic example out of the way it is time to start looking into a few use case examples of the distance to method. In this example I am changing the rate at which one point is moving to another point based on the distance to that point.
There are all kinds of examples that could be made like this, but I have to start somewhere. The general idea with this one was to just move one mesh object directly towards another, and do so by passing the object, then a vector, and then a value between 0 and 1 which is the percent of the difference between the two points to move the object. So with that said I have this move object by difference method that does not use the distance to method actually, it just has to do with getting the difference between two vectors, and then move one object by a percent of that difference. I then have another helper function that makes use of my move obj by diff method, and it is this other helper method that is a kind of move object by distance difference helper.
I also have another method that will check the distance between two points and return true of the distance is lower that a given min distance. I also have a helper method that will set a new random start location, and I am then using this distance check method to know if I should set a new position or not.
The result is then cube2 moving to cube1 and going slower as it gets closer to cube1. When cube2 gets to close to cube1 then a new random position is set for cube2, and the process starts all over again. In this example I am not just using the distance to method, but a whole bunch of methods in the Vector3 class all of which deserve a post, and a few examples on there own.
For example take a look at the method that has to do with getting a new random position, in there I am creating a new Vector, and then calling the random method to make it so that all the values for the vector are random numbers between 0 and 1. I then want to make sure that I get a vector that will be going in all possible directions, so I subtract 0.5 from all axis values. The normalize method make sure that I am dealing with a vector that has a vector unit length of 1, which can then be easily scaled up to any distance from the origin by just multiplying.
2.2 - Using length, and distance to methods to set opacity and rotation with group of mesh objects
The length method is a way to go about getting the current vector unit length which is also a kind of distance to the origin of the Vector at least. In some cases then this length can be used as a way to get the value that I want it is just the it will always be the distance to the origin rather than another point of interest. In this example I am using the length method to get the distance to the origin and I am using that as a way to set an opacity effect. On top of this I am also using the distance to method but to create another kind of effect that has to do with the rotation of the mesh objects.
That will be it for now at least when it comes to the distance to method in threejs, there is of course way more examples that I could make, but I only have some much time to work with. There are a lot of other related topics that I might not have go to just yet when it comes to distance to such as the subject of collision detection. The distance to method could be used to rig up a crud yet effective kind of collection detection that has to do with a spherical distance from one point to another of course, but there are other things to work with that might be a better option when it comes to that sort of thing.