Backyard Scene threejs example
For yet another threejs example post I made this backyard scene example that I should write a post on. What I wanted to do is have at least one or more examples that make use of a number of my other projects where I crate a bunch of objects with just the built in threejs geometry classes. That is to create a group of mesh objects that from an over all object of some kind. After I made a few projects like this I just wanted to create a project where I am making use of a whole bunch of projects like that to make an over all larger project. 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 might in time prove to be just one of several more additional future projects that is a composition of several other examples. There is just only so much to write about when it comes to the features of the library itself, so sooner or later I just have to start making some kind of full project that is some kind of animation, game, or some kind of application.
This backyard threejs scene examples and what to know fist
The source code examples that I am writing about here are on Github
the source code examples that I am writing about in this post can be found in my test threejs repository on Github. This is also where I am parking the source code for all my other posts on threejs, including the various other examples that I am in turn also using in this example.
version numbers used
When I started this example I was using r127 of three.js back in may of 2021. The last time I came around to doing a little editing I was using r135, and last I check the example works okay on top of that version of three.js.
1 - The canvas texture module
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 as a way to go about adding textures to a threejs project. So for this project I made a canvas texture module that 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.
2 - The guy module
This is a copy of my basic guy module that I worked out for one of my other three.js examples. 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. Animation of the guy is then achieved by making use of one of the various methods that can be used to create a simple walk cycle or something to that effect, another alternative is to just work out some custom logic to move the arms or legs in a novel way, but I am not getting into that sort of thing with this example at least.
3 - Hamster wheel
I also wanted to place my hamster wheel model into the backyard scene, just for the hell of it to make the scene a little more interesting. 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.
4 - The House model
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.
6 - Conclusion
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 threejs library itself, sooner or later I am going to want to start making things with this library.