The count-down.js threejs project example and what to know first
The count-down.js file as well as the demos make use of additional files and assets beyond just threejs
On top of using threejs alone I also am using the threejs DAE file Loader as an additional threejs file. The reason why is because I have a DAE loader method as one of the public methods of the count-down.js file that works on top of this feature that is not baked into the core of threejs itself. Also a number of my demos make use of this methods and thus also external dae files that are loaded with said dae loader methods and underlying file that makes use of it. Also a number of my demos for count-down.js make use of canvas texture that I am creating with my canvas.js file that I made for my blog post on canvas textures.
Source code examples up on Github
I also have the source that I am writing about here up on github.
Version Numbers matter.
When I first wrote this post I was using r146 of threejs.
1 - R1 of count-down.js and demos, Removed dae loader and using Scene objects for source mesh objects
There is a lot more that I also wanted to change of course but for now I will be just chalking all of that up for the next revision of this module that may very well happen if I do continue to use this module in actual projects. So in this section I will be just quikly going over the state of R1 of count-down.js, and just two demos.
1.a - Source code of count-down.js ( r1 )
First off the source code of the module itself. With that said code that has to do with loading and processing objects created from a DAE file asset have been removed. There is now just the create and set methods along with that one add lines method when it comes to public methods. Changes have also been made when it comes to the
1.1 - Built in objects work okay ( r1 demo )
For this demo I just wanted to make sure that the new default scene object works okay when it comes to just calling the main create method without any arguments at all. I never do this when it comes to final projects of course but still I thing this module should have some built in place holder objects. This is a feature that I might refine better in future revisions, but for now the built in objects are still just mesh objects with sphere geometry that will increases in terms of the number of vertices for each number.
1.2 - Using DAE helper method from my post on the DAE loader
I pulled out the code from count-down.js that was an abstraction for the DAE loader. There where a number of problems with it that I could have fixed, but I figured that this is something that should be done in the demo or project code actually. This is what I have found myself starting to do with projects anyway, that is just directly working with the DAE loader, or when it comes to this demo use a better abstraction that resolves the problems that I have ran into. With that said in this example I am using the dae helper module that I write about in detail my blog post on the DAE loader.
2 - The first version of count-down.js ( r0 ) and demos
In this section I am writing about the very first version of this count down module, and a few demos that make use of it.
2.a - The count down module
The very first version of this count down module all ready has a number of public methods. There is the create method that when called will create and return a main group object. This main group object will contain a number of children each of which is another group that is for a given digit. Each digit group object will then also contain ten mesh objects one for each number that is used in a base 10 counting system. Setting the current time is then a matter of looping over each child of each digit group setting the visible object3d property of each mesh to false by default and then true if the current mesh object is the number for the current digit.
There is the idea of making the kind of system where I just simply create a single mesh object for each digit, and maybe that is something that I will get to in future revisions when and if I even make it to that bridge to begin with. It may prove to be a better all around solution, but it also presents a number of problems that can be fixed by way this alternative nested group like system. One of the major concerns that comes to mind has to do with updating the geometry for the mesh objects, I would need to keep things consistent in terms of the number of points used in each geometry for each number. Maybe that is not such a bad thing and maybe it is something that I should be doing anyway when it comes to making my DAE files for this project. However getting into this can of worms is something that I would like to not get into at this point. This is the first version after all so for now I would like to have something that just works okay to create the final product, which in this case is a collection of frames for a video.
I then have my set method in which I pass one of these group objects that I make with the create method along with a string value that will be used to set the current state of the objects to a given count. After that I have a DAE loader method that works on top of the threejs DAE loader.
2.1 - Using canvas elements to create textures
This will be the first demo of the count-down.js file in which I am using a custom set of source objects that I create in the demo file. I do have the default objects of course, but I am sure that in any given project I am not going to be using those. The source objects for this demo are then just a bunch of mesh objects that use the THREE.BoxGeometry class for the Geometry of each object. However I will be making use of my canvas.js file from my canvas textures module in order to create the textures that I will use for each mesh object of each number.
2.2 - Using the DAE load method
When it comes to any and all real projects that I will be making with this module I am sure that I will want to use one or more DAE files to load custom geometry for the numbers and additional geometry for other objects that will compose the over all scene. For this example I am loading just one DAE file which is my cd1.dae file in which I just have objects for each number that have a position and normal attribute and that is it. For now I am not doing anything fancy when it comes to changing values for the materials of the objects that default to phong material. Because of this I will want to add a light source as usual then and for this I am going with my typical choice these days with that which is a directional light.
2.3 - Using the DAE load method, and canvas to add texture
With this example I am once again using the DAE loader method, but now I am also once again using my canvas module to create textures for these objects. With that said at this time I am using the cd2.dae file in which I have worked out okay uv maps for each number.
2.4 - Using the DAE load method with more than one file, and with DAE file textures
For this example I am now ditching the use of canvas textures in favor of textures that I have made for the DAE files. As at this point I am not only using external files for geometry that has position, as well as custom uv and normals attributes, but now also textures as well. Also I am now getting into the habit of making more than one DAE file one for numbers, and the other for everything else that I want in the scene. Moving forward I am sure that I will end up with just one great file for the numbers that I will want to reuse from one project to the next, but have many other files for additional objects to place in the scene. So for this example I am now using my cd3-nums file along with my cd3-ground files. These files have uvmaps and on top of that textures that are use for each material of each object. I am thinking that this might be the final form of the kinds of files I want to make for this, at least when it comes to r0 of the count-down.js file.
This far I would have to say that this count down module is working just the way that I would like it, at least when it comes to a first set of basic timer videos to say the least. It is not to say that there is not more work to do with any and all future revisions of this examples when and it I get to it. Sure there are a whole lot of ideas that comes to mind with that, in fact way to many actually. The bottom line here though when it comes to making videos though is how the frames come out though, that is what is most important here. So many ideas that have to do with improving pref romance are of lower priority as I do not have to worry so much about real time rendering.