A Three js example making a tree model
This model makes use of the three js built in cone geometry constructor, and the THREE.group constructor to make collections of cones sized and positioned in such a way to from a circle of cones with each cone pointing outward from the center. I will then have a few of these kinds of groups stacked on top of each other that will form an over all group that is the full tree. I will then just want to adjust the length, and possibly the radius of the cones from the bottom cone group section to the top.
This kind of example is a very basic getting started type example when it comes to just figuring out some basic ideas for projects, and reusable assets that I can use in a larger project. This might not be the most fun and exciting example, but working out a half way decent way of creating a tree model is a good start for creating a larger over all project in which I might make use of this. There is not just making a module that will be used to create and maybe mutate this kind of group of mesh objects, but using this tree model with a bunch of other little projects to make an over all larger project.
Three threejs tree model, and what to know before continuing with this post
Read up on THREE.Group, THREE.Mesh, and the Object3d base class in general
This model of a tree is a collection of Mesh Objects that are part of a Group that are in turn a part of another Group. There is reading up more on the Mesh class, and also the Group class, but it might be best to read up more on the Object3d class in general. The Object3d class is a base class of Mesh objects, Groups, Cameras, and even a whole Scene object. So my learning everything there is to know about the Object3d class it is then possible to apply that to all kinds of other objects in three.js.
Do not just stop with this example when it comes to making Groups of mesh objects
I have made a number of other models like this that can be described as a crude yet effective kinds of model that can be used in an over all larger project, when it comes to creating a typical outdoor like scene. One of the first projects that I have made in this kind of style was my guy one model. There is not just stopping with this kind of model for a tree, but going on to make a few more with a similar style. These kinds of models in my opinion work when it comes to a kind of simple low polly art style, where the focus is more on the over all subject of the project and not so much the graphics. Also there are many other things in a project that I would like to move on with, and not end up spending vast abouts of time making models, so it seems like a good idea to just slap some quick solutions together and focus on other aspects of an over all project.
I have another tree model worked out that is just that simple, and if you ask me it still works when it comes to a crude low Polly art style.
There is also making assets the professional way by making Geometry in blender.
There are a number of options when it comes to exporting from blender and importing into a threejs project. When it comes to what is built into the core of threejs itself there is the buffer geometry loader. However there are also a whole lot of additional official loaders that can be added by way of an additional file on top of threejs itself. I have found that thus far I like to use the DAE loader when it comes to this kind of approach.
The source code for these demos and the three module are on github
The module itself can be found in the modules group folder of my test threejs repository, while the demos that make use of it can be found in the for post folder for this blog post.
Be sure to check the version number you are using
When I first wrote this post and the source code of the example here I was using revision 106 of threejs, and the last time I tested things out and did a little editing of this post I was using revision 140 of threejs. Code breaking changes are made to threejs all the time so be mindful of what version you are using when working with threejs code example on the open web.
1 - First version of the tree.js module
In this section I will be going over the first version of the threejs module, and a gew examples of that version. As of this writing this is also the only version of the module still. However in future edits I might now make a new revision of the source code sense I do not make them this way any more.
1.0 - The tree constructor
So now lets get to the source code of this basic tree model that are present is just a single constructor function that will create and return an instance of this Tree Class. This tree class has many properties to it, but the main property of interest here is the group property that contains an instance of THREE.Group. It is this group that I will want to add to a scene object when it comes to using this in an over all threejs project.
When calling the constructor function there are a number of options that I can pass to it by way of an options object. These options are for setting things like the number of cone sections to use, and how many cones there should be per section. Other options of interest include the material to use when skinning the cones, by default I am using the Mesh basic Material, however in other use case examples I will of course what create create and pass a custom material for the cones.
I am not doing much of anything with the prototype at the time of this writing, but it contains a few static methods. This might change if I ever get around to doing more work on this at some point in the future.
When I use the model to create an instance of the tree model there are a wide range of options that I can give alone with methods that are to be called for each cone that I can use to override some of the values that are used to position and size the cones.
1.1 - Basic example of the tree model
So now it is is time to just work out a basic threejs scene just to make sure that this tree model works the way that I expect it to. First off I create a scene object, and camera, and renderer just like with any other three.js example. I will be using a custom material when calling the tree constructor that will respond to light so I am adding a white point light to the scene object. In addition I am also using the three js built in orbit controls in this example so I can just move around the camera and look at the tree.
Then what it comes to creating and adding a tree to the scene object I just called the constructor and only used a custom material that will respond to a light source, the standard material is one such material that will work light.
1.2 - Using the forConeValues option
If for some reason I want to use a custom expression when it comes to setting the position, rotation, or any other value on a cone by cone basis of the cones I can use the forConeValues option as one way to go about doing so.
This feature was just added in just for the heck of it, and I am not sure if this is a feature that I would really want or need in this kind of project. I also made this tree constructor back before I was aware of an object3d method known as object3d.traverse that I can also use as a way to loop over all the mesh objects of a group. So at some point in the future it is possible that I might remove this feature actually.
1.3 - loop example
Now for an animation loop example of the tree module which should prove to be a little fun. Sense this tree object contains a group property that in turn is a group of groups, I can loop over each group and rotate each group on the y axis. When doing so I can use the index value of each group to adjust the rate at which the rotation of each group of cones will rotate. This will result in a nice effect where each group of cones will rotate at differing rates.
I might get around to making a few more additional changes to this model at some point in the future, but only if I start to actually use this in a project or two. As of the last time I edited this post I can not say that I made these kinds of models this way anymore in the from of a class, but rather returning a public API with a create method. So that is one thing that I might change at some point, but there is also maybe adding some additional features when it comes to updating the state of the tree when it comes to making it a but animated. I can not say that this is a feature that I would use often though so maybe doing something like that would prove to be wasting time adding features that I do not really want or need, or can be part of the application code.
I hope to get around to making some more three js examples in the near future as they prove to be quick, simple, basic projects at least when it comes to the ones that I like to make thus far. I have forgot how fun it can be to make these kinds of projects, and when I keep things simple progress and move along fast.
So far I have made a few additional simple models like this, such as one that is of a simple little biplane example, and also one that is a group of biplane models. I might get around to making at least a few more examples that will start to be some kind of interesting animations, or artful like ting, but there is so more more to write about and learn about in the process.