I would like to start using three.js to work out a basic model, like I all ready did with my guy model for example, only now I would like to do something practical such as creating a simple wooden box. So with that said todays threejs example post will be on a quick module that I put together that will help me get an idea of what the situation will be when I cut a board into 5 equal lengths of wood.
These equal lengths of wood that are created from the dimensions of a single board will then end up being represented by a collection of five mesh objects in a group. I can then rotate an position these lengths to form what would become a finished product that is just a simple open box.
This is a post on a three.js example that helps be get a crude visual idea of what the situation will be if I cut a length of wood into 5 equal pieces to create an open box without a lid. I am doing this just for the sake of starting out with using three.js as a way to design some basic things that I can then build in real life using wood and simple hand tools maybe.
So then this is not a getting started type post for three.js or any additional skills that are required in order to get something of values from reading this. Also using threejs alone for thins sort of thing seems like making something very simple more complex than it needs to be. If you are more interested in just designing and building things it might be better to just lean a thing or two about using a modeling program that all ready exists to design what you want to build.
In this example I am creating a crude model of a box with a collection of Mesh objects that are pulled together into a group. This is how I often go about making simple, basic models with three.js rather that doing something with an extremal file format, at least for now. So it might be a good idea to read up more on the THREE.Group constructor as well as the Object3d base class in general if you are still fairly new to three.js
I have the source code for this example up on Github.
When I wrote this post I was using three.js r127 of three.js, and this example was working fine for me with the version. However it is true that changes are being made to three.js all the time that might cause this comes example to break when it comes to using it with a future version of three.js.
The first thing that I will want is a build a box module that will create a collection of mesh objects based on the dimensions of a single board. The idea here is that I have an object that is the length height and width of a single board and then that data is used to create a collection of mesh objects where the length, which should be the longest side, is divided by 5 and then that length is used to create a collection of five mesh objects with one side being this new computed length while all the other sides are the same. I will then just want to rotate and position these mesh objects in a proper way so that they from a box, and that will be just about it for this module.
So then this module has a main create method that will create and return a group of mesh objects that are created from a build in hard coded value that is the size of a piece of scrap wood that I got my hands on. If I did this right though I should be able to pug in any values for that and get the same result that I wanted when it comes to this crude idea of a three.js project for a very basic wood working project.
I also have an update method that can be used to create this basic animation loop with the pieces that is an exposition of all the pieces moving out from a single piece that will be the bottom of the box.
Then end result of this when it is up and running is a simple animation of the mesh objects moving in and out of position. On e thing that I have learned off the bat is that I am going to end up with some scrap pieces if I cut things the way that I intend to do so. There are a few additional touches that I might want to make to this source code when and if I get to it, but I do not thing that there is much more to get done with this one. I had a crude, basic idea of what it is that I wanted to do and this is more or less it for what it is worth.
This example made me become aware of some things when it comes to making a box out of a single board of wood, however I really learned that I still need to figure out some additional things when it comes to working with three.js also. I would like to make custom geometry that is like that of the box geometry constructor, but with one or more sides cut at 45 degree angles for example. So in the not to distance future I will need to revisit how to create custom geometries with the buffer geometry class as I have a bot more to learn with that one to make geometries just the way I want them for this type of thing.