For yet another threejs example post I made this backyard scene example that I should write at least one post on just because I put a little time into making it. I stooped working on it because the example was starting to turn into a black hole of a project where it just stared eating up my time, but I had to clear idea what the end game was when it comes to working on it. Still what I wanted to do is have at least one or more three.js examples where I am starting to create something that is starting to look like some kind of finished scene of some kind just for the heck of it. With that goal in mind I guess this project was a success, but now I think I need to put a little more time into what the final product is with an actual three.js project example before even getting started.
This is a full threejs project example in which I am making use of all kinds of features in three.js to make something that is starting to look like a final product of some kind. So it should go without saying that this is not in any way a getting started type post for people that are new to three.js.
When I started this example I was using r127 of three.js, and last i check the example works okay on top of that version of three.js.
I wanted to have a way to create some quick textures for this example without having to bother with extremal image assets. So the way that I often choose to do that is to make use of canvas elements. This module provides a create canvas texture helper where I just have to give a draw method and an image size and the result is a texture that I can use as a map for a material. I also have a few built in methods that make use of this to quickly create some basic textures that are just random color grids, to just quickly add some texture to materials.
This is another copied of my basic guy module that I worked out for one of my other three.js examples. So then this is just yet another one of my crude models where i am creating something just using the built in three.js geometry constructors rather than creating a professionally made module in blender and then importing it.
I also wanted to place my hamster wheel model into the backyard scene, just for the hell of it. In my main example post of this model I made it so my guy model was running inside of it, but for this example I just want to place the model in there just to have something more in the scene. It seems like I was going in the direction of just turning this example into some kind of crude clock like example, so I intended to have the wheel spin in relation to some kind of unit of time.
This is a backyard type scene, so of course I need to add a house, and for that I went with the house module example that I made. In fact this backyard example is more or less just a far more advanced version of that starting point. In that example I just wanted to make a crude house module like that of my many other crude yet effective type modules. Nothing fancy with this one though except for that I experimented with making a custom geometry for a small triangle type area of the house.
After creating the scene object here I then create and add an instance of the house module, then I am going to want to have some ground for the house to be on. For this I went with a box geometry rather than a plane geometry, and also made some custom materials for this ground mesh object using my canvas texture module. Next I add in my guy, and hamster wheel models, followed by an additional mesh that will act as a sun object for the scene. Because it will be a light source for this I made the sun object have a point light as a child.
In the main application loop I am updating the position of various mesh objects, as well as groups created with my various modules based on the time of day. So this projects has turned into a weird kind of clock like project where the about of time it takes for the guy modules to walk in a circle takes about a minute, and the sun object makes a complete run around the whole scene once each day.
For this example I also wanted to add a sky map just for the sake of having something other than a solid color background. For this I made use of the cube texture loader to load a collection of cube texture image files the should be at a given absolute path when hosting this. However in the event that there is an error loading the texture does not load I just create a default texture using canvas generated content.
This has tuned out to be an interesting project in that it is more of a situation in which I am using a whole bunch of other projects to create one big main project. I am not sure if I want to put more time into this one or not though, but I am sure that I am going to want to start creating at least a few more examples like this as I think that this is just what needs to happen if I keep working on three.js code examples. There is only so much to write about when it comes to the basics of the framework itself, sooner or later I am going to want to start making things with this library.