Earlier this week I wrote a post on a simple tree model in three.js, so today I thought I would write a post on another example in which I am using that tree model to create a simple world of sorts with these trees all over it. The idea here is to just have instances of this simple tree model positioned on the surface of a sphere. With that said I am going to want to have a main world module that will create and position a collection of three models, and it will also make use of some additional features that I have worked out in other examples, such as using canvas elements to create textures for the trees as well as the world sphere itself.
So this time around the three.js example in this post is actually not just one example, but a combination of several examples that I have worked out all ready in the past. This is not the first such example that I have made like this, but I think that I would like to make at least a few of these. The reason why I say that is that I am trying to find out what I might like to do with three.js over the long term when it comes to making animations, games, or maybe even something practical if I can manage doing so. I do like writing these posts, but I would like to also do more than just that if I am going to make this the main subject that i write about moving forward.
This is a post on a three.js project example in which I am creating a main world module that makes use of another model that is used to create an instance of a crude tree module that I worked out in another post. In this post I am making use of a whole lot of features to work with in three.js, but for the most part I am sticking to using just built in geometries, and materials, and not doing anything to off the rails.
Still this is not a post that is intended for developers that are new to three.js, and even if you have some experience with three.js there are still a few things that you might want to brush up on before reading more on this example.
I have wrote a number of posts thus far that have to do with crating a model that is really just a group of mesh objects. It is these mesh objects that are used to create an over all model that looks like something. This kind of approach might be crude compared to the more professional way of doing this sort of thing that would just involve a single geometry, however I have found that this kind of model still works fine with what it is that I would like to do with three.js. This simple tree sphere model is a simple static example of this kind of module that might serve as a good basic starting point for making this sort of thing. However I also have a number of other more complex modules that have some kind of animation that can be used with them.
The main module of this three.js example is then a module that makes use of the tree module that I first started working out in another example. I will be getting to that module later in this post but the root module of everything is what I think I should start out with for now. In this world module I have just two public methods one to create a single world object, and then another to update the state of one of these world objects. Inside the body of this world module I have a number of helper methods including a helper method that will create and position a collection of the tree sphere models.
Here I have the source code of the tree sphere model that i will be using in the world module. The state of the source code is not all the different form what I world out for my example on this tree model by itself. It is just that this time around I am writing a whole bunch more code around this as a way to do something more with it.
This example has proved to be a half way decent exercise with a great many various topics in three.js that I am using together to create a single project. There is having a single model of a tree that is composed of just a sphere and a box geometry of a trunk, but then there is getting into having a collection of these kinds of models, and also beginning a number of other things into play in order to make a somewhat interesting over all scene. This was more or less the goal with this three.js example, and I am to make at least a few more examples such as this when it comes to making something that is at least starting to look like some kind of finished product.