When it comes to threejs I thought I would write a quick post on the subject of arrow helpers. In threejs there are a number of built in helper methods than can be used to quickly create objects that help to visualize what is going on with state of various components of a threejs project. The arrow helper is one of these such helper objects that can be used to find out what is going on with the direction of a Vector3 class object.
These arrow helper obuects are Object3d class based objects, so that means that they can be attached to the scene object, but also just about anything that inherits from the object32 class. So they can also be attached to a mesh object, and instance of a group, or any object3d based class for that matter.
So then in this post I will be going over some basic examples of arrow helpers, and the features to work with when it comes to such objects. In the process I will also be touching base on some other threejs related topics that have to do with making the code of a threejs project a little more organized so it is not such a thin post as there is only so much to write about when it comes to the arrow helper.
If you are not familiar with the object3d class of threejs it might be a good idea to read up on that first. The Object3d class is a base class of Arrow Helpers, but it is also a Base class for any other kind of object that will be added as a child of a scene object, or any other Object3d based object. There is much ground to cover when it comes to object3d based objects, such as the position, and rotation properties along with a whole lot more. So I do not want to repeat myself from one blog post to the next when it comes to Object3d based objects.
The source code examples that I am writing about in this post can also be found in my test threejs repository on Github.
When I first started this post I was using revision 98 of three.js, which was released in late October 2018. The last time I edited this post I was using revision revision 135 of threejs, and when it comes to the arrow helper at least it would seem that not much has changed.
Still three.js is a project that is being developed, and at a fairly fast rate with new revisions continuing out what seems like every month almost. Although not much has changed with the arrow helper, a great deal has changed elsewhere in the library when I first started this post, and many of my other posts, and these changes can often result in code breaking. So if the code examples here break the first thing you should check is the version number of threejs that you are using.
To start things off I will be writing about some basic examples of arrow helpers in threejs in this first section. The general idea is simple enough I just call the THREE.ArrowHelper constructor function and pass some arguments that are use to define the direction and origin of the arrow. There are a number of other arguments though, and also a few other things might not be so strait forward. So there will be a few examples in this section where the goal is to address many of these basic things that will come up when working with arrow helpers in threejs.
So a basic example of an Arrow helper would involve setting a direction, origin, length, and color by passing those values to the THREE.ArrowHelper constructor in that order. The direction and origin should be an instance of THREE.Vector3 which is one of several constructors that you should be aware of when making a threejs project.
The length should be a number value consistent with the desired length of the arrow. Additional values have to do with setting the starting color of the arrow as well as the shape and size of the head of the arrow. However these options might not set everything that one might want to set when it comes to the over all style of the objects that compose the arrow. More on that later, but for now this will be just a very simple hello world type example of arrow helpers.
This is then just a simple getting started type example of the arrow helper where I just have a lime green arrow pointing upward from the origin of the scene. This is then more or less all that one will need to know then for the most part, however maybe it is called for to have at least a few more examples that have to to with changing these values over time.
It might also be of interest in how to go about changing direction of the arrow helper when working out an animation of some kind or anything to that effect. For this there is the set direction method of the instance that is one way to go about doing a change of direction over time. To use it I just need to call the set direction method off of the instance of the arrow helper, and pass an instance of vector three to use as a way to set the new direction for the arrow helper.
For this example I the set up a basic app loop where I am chainging the direction each time the app loop method is called. The result is then the arrow pointing in all directions along the circumference of a circle.
What about moving an object along a direction that is shared with the direction that is being pointed out with an arrow helper. That is having a Vector3 instance and having that vector normalized to a unit vector that has a length of one, and then using that normalized vector to position a mesh object along that direction. This might prove to be a decent exercise when it comes to getting a better grasp on the vector3 class and how various methods such as the Vector3 normalize can come into play and also how they work. The normalize method will mutate a vector3 instance in place actually, so in some cases I might want to create a clone from the vector3 and then normalized that clone actually.
So then when this example is up and running I have a cube that is moving along the distance of the arrow helper, and as I change the direction of the arrow helper that two in turn effects the position of the cube. It might be called for to work out a whole lot more examples based off of the basic idea that is going on here, but I think this might prove to be a decent starting point at least.
While I was working out some new code for this post I thought I would take a moment to make a quick simple utility module as a way to abstract some things away, so that I can create, and add arrow helpers, and other parts of a scene with very little code. This might be a little off topic, but there really is only so much to write about when it comes to only the arrow helper alone. Also the use of the arrow helper might be part of something more that can be summed up as having ways to go about making things a little better organized. With that said maybe this is not so far off base then.
Not that I have this utility method I can link to after threejs has been loaded, at which point my main.js file can be just a little additional code. One thing that is worth mentioning is that the arrow helper can be attached to anything that inherits from the object3d class in threejs, so I can bass the scene object as the first argument when calling my add arrow method, but I can also pass a mesh, or anything else that is based off of object3d.
Thats all there is to it when it comes to arrow helpers in three.js for now at least. If you enjoyed this post you might want to check out my many other posts on three.js, with that a good starting point might be my main post on my current set of threejs examples. Working out simple little examples that have to do with just using the arrow helper with a few simple built in geometries is one thing, but sooner or later it is time to start really getting into using threejs to have some fun making something real.
In any case thank you for reading this post, and I hope that you gained at least a little something from reading it. In time I am sure that I will come around to expand this post even more with additional examples that Might help to better illustrate various things that branch off from the use of arrow helpers.