So I wanted to start making some posts on threejs examples, rather that the usual posts on certain basic things here and there with just the core of what threejs alone is. One of the first ideas that came to mind was to make a waves example where I create an update a buffer geometry based on something like Math.cos.
In this post I will be writing about a module that makes use of a helper method that I made that can be used to create, or update an instance of buffered geometry that is a set of points that move in a wave like pattern. This buffer geometry instance can then be used with an instance of the THREE.Points constructor rather than the usual THREE.Mesh constructor, and when doing so it is just the position attribute of the buffer geometry instance that I need to worry about. At least that is what the plan was for the first version of this example, as I now have plans to create a revised revision of this module that will also work with mesh objects.
The waves threejs example and what to know before you begin
This is a post on a threejs example where I made some waves in the form of a basic custom geometry. This is a more advanced post on threejs, if you are new to threejs you might want to look at my getting started post on three.js first. I will not get into the basics here of course, but I do like to write about at least a few things to maybe read more about in this first section.
Check out Points and the Points material
When it comes to the first revision of the wave module I am just using the Points material, as in this example I only have points set out for the buffered geometry that I am using. As such it would be a good idea to get up to speed with the Points material, and buffered geometry if you have not done so before hand.
Might want to read up more on buffer geometry in general
In this post I am using the Buffer Geometry constructor to create a collection of points that will be moving up and down in a wave like pattern. I have a post in which I have gone over the buffer geometry constructor in general, but as of this writing it might be a good idea to look that the how to update things section of the threejs website. There is also looking at the official docs on buffer geometry on top of that.
Source code is also up on Github
The source code examples that I write about here can also be found in my test threejs repository on Github.
Version numbers matter
When working out this example for the first time I was using revision 98 of threejs, and the last time I can around to do some editing on this post I have updated all the examples to work well with r146. Threejs is a library that is a very fast moving target when it comes to development, it seems like to new revision is coming out every few months. If the code here breaks the first thing that you should check is the version number, because this was working for me when it comes to the version of threejs that I was using at the time.
1 - The new Wave Module ( r1 ) that works with mesh objects
With r1 of the wave module I now have a revision of this threejs example that makes and updates a geometry that will work well with mesh objects. The custom geometry that is created will have a position, normal, and uv attribute. This means that there will be the actual points in space as well as normal that help define what side of a face is the front size, and a uv attribute so that textures will work with the geometry. On top of all this I also now have an index for the geometry as well which is a way to reuse points in the position attribute so that the geometry will be smaller than it would otherwise need to be.
The Wave module ( r1 )
This is then the source code for my new wave module example that thus far is working way better than what I had before hand with this. The old wave module would just create a positions attribute and nothing more. However this will create and update all of the core attribute values for a geometry. There an update and create method same as before, but I now also have a parse option method as well that I can use to help with the process of making a options object that will work with create and update methods of the module.
One major problem that I ran into was with setting the index for the geometry, in the threejs Docs it says that a buffer attribute should be passed to the set index method. However I have found that this will result in weird rendering when I set the segment sizes of the geometry to high. I finally took a look at the source code for the plane geometry class of the core of threejs and saw that they are just passing an array to the set index method actually I then made that change and sure enough it was working just fine then.
1.1 - Demo of wave module
When it comes to making the geometry for the first time I call the parse option method of the wave module and pass what values I would like to set. Whatever I do not set will default to hard coded defaults in the wave module. I can then use the resulting options object to create the geometry for the first time. When calling the create method the geometry will also be updated for the first time based on the values if the options object. After that I can use the geometry to make a mesh object, and what it comes to the material I went with the Phong material and use the date texture for the map option.
In the body of the loop method I can update some of the options over time if I like and then use the update method of the wave module with the options object to change the state of the geometry over time. For this example I am changing the main alpha value, as well as the degree options. This results in the waves moving, and also the direction in which they are moving changes over time as well.
2 - The old wave module example and demo ( r0 )
In this section I will be writing about the first revision of this threejs project example, as well as a single demo of it in action.
The wave module example I made involves a helper method that can be used to create, or update geometry, buffered geometry, or just about anything by making the helper a higher-order function. This method accepts another method as one of the arguments that is passed the x,y,and z values for each point that will compose the vertices of the wave. I then use this method in conjunction with others to help make an update the geometry of the wave. The wave grid helper method that accepts a method that can then be used to define what to do for each point in the grid of points. I use this to create an instance of buffer geometry and again later to update it in a loop.
I have a method that makes use of my waveGrid helper method to go about making the initial state of the buffered geometry that I will then be updating later on with the update method that I will be getting to soon. The basic idea here is that I am just creating the initial size and state of the geometry, which will end up being a fixed static thing in terms of the count of points. The update method later on just needs to be used to update this position of these points it does not need to add or delete them, which can not really be done with a geometry because it is buffer geometry after all. A buffer is often a fixed thing once it is created in other words.
I again use my waveGrid method to update points by just using the for point option of the wave grid method. I just need to set the desired values for x, y, and z for all points in the geometry. When calling this method I will want to pass a percent value as a second argument after passing the instance of points as the first method. More on this later when I use it in the main update loop of this example when it comes to how to go about getting that percent value.
2.1 - Get it going with a basic demo of the module
So now it is time to get this all working with the usual scene, camera, renderer, and animation loop function that I often do in examples like this. After setting up the renderer and scene object I just use my makePoints helper to make the instance of a Points mesh that makes use of my geometry, and the Points material. I then set up a camera, and then I have some values for my main app loop function that will be using request animation frame.
The result of this up and running is then a bunch of dots in the canvas moving up and down in a wave like pattern, I am also doing a number of other things in this example that have to do with many other note worthy features of three.js. For example I wanted to do something that involves moving the camera around by making use of the position and rotation properties as well as the look at method of the camera all of which are methods and properties of the base class known as Object3d.
This example proved to be a nice little example on something that was kind of fun to work out. It has been done before many times, but when it comes to making some kind of real project that is some kind of animation doing something to this effect might prove to be part of the process.
So far all of my real examples are often just making crude yet effective low poly models consisting of just grouping together a bunch of box geometries in mesh objects together. So it is nice to work out something where I am coming up with my own custom little thing with geometry and then using that.