The Clock constructor in threejs
THREE.Clock and what to know first
Source code is on Github
The source code examples in this post can also be found on Github. This is also where I place the source code examples for the many other posts on threejs that I have wrote as well.
Version Numbers matter with threejs
When I first wrote this post I was using r127 of threejs, and the last time I came around to do some editing of this post I was using r146. Always be mindful of what version of threejs you are suing and what version the developer of a content piece like this was suing when looking at threejs examples on the open web. Threejs is a fast moving project in terms of development and code breaking changes are made to it often.
1 - Basic loop example using THREE.Clock
With this example in place of having an instance of Date, I am creating an instance of THREE.Clock. I then start the clock by calling the start method of the clock instance, and start the loop by calling the loop function. I then call the get delta method of the clock inside the body of the loop function which will return an amount of time in seconds. I can then use this seconds value to update the state of objects when it comes to working out some expressions for doing so. On top of that each time I call the get delta method that will result in the old time property of the clock being reset, so just calling the method is all I need to do, for this example at least.
So then this might prove to be an okay basic example, however there are some times a range of things that I might want to do differently when working out some kind of pattern for a main application loop like this. So I think that at least a few more additional examples of this THREE.Clock class are in order.
2 - Elapsed Time Demo
The get delta method is great for getting an amount of time that has elapse sense the last frame update, but if I want to get the total about of time that has elapsed sense the clock has started then there is the get elapsed time method. In this example I am still updating the rotation of a cube by way of the get delta method, but I am also rotating on anther axis over all time using get elapsed time.
3 - Cap FPS example
One thing that is important to be aware of when it comes to these loop functions is having a way to limit the number or frames that are being rendered for every second. If no effort is made to do so the example might prove to eat up to much processor overhead on many clients and result in a bad user experience.
It then might be best to have some way to let users set what the target frame rate should be when it comes to some kind of options menu in a user interface. However maybe a good starting point would be to come up with some kind of hard coded frame rate that still works well, while still being a low frame rate. Basically the lower the frame rate the lower the load on the processor and graphics adapter of the client, that means it will then use less power, and also have more resources to do other things that might be going on in the page. The cost of this though is choppy animation as the target frame rate approaches zero, still I have found that setting a frame rate as low as 24 fps still looks pretty good.
4 - Conclusion
There is not just thinking in terms of the about of time that has passed sense the last update loop, but also just simply what time it is on the client. So another Clock related task would be to make one or more clock projects using threejs. These kinds of examples can prove to be simple, fun little projects, but there is also a great deal or room to do all kinds of things that are creative and original. I made a threejs project example in which the goal was to make a simple clock type project with three.js that might be worth checking out.