Camera Kit module threejs example
This week I started a new threejs project example that I am calling camera kit, that aims to be my module for parking all kinds of methods that has to do with updating the position and target location of a camera such as a perspective camera. The idea for this project came to me when working on last weeks threejs example which was my aplerp module which is a project that has to do with creating values to use for the alpha argument of the lerp method of the vector3 class.
The aplerp module has to do with moving a point in space from one point to another in a way that is not so linear, that is not a fixed delta for each frame when updating a vector. So for this project I will be building on top of the aplerp module to create another module that is centered around tasks that have to do with updating a camera.
The camera kit threejs example and what to be aware of
The aplerp module threejs example
Last week I wrote a post on the aplerp module. As of this writing I am using r0 of the module for some of the methods in this camera kit module, and will likely use it in a number of other future methods in any future revisions of this module. This camera kit project might very well get a few revisions as it strikes me as the kind of project that deserves at least a few more revisions and also that I will likely be using it in many if not all future video projects. However in any case I will not be getting into the state of the source code of the aplerp module here, if you want to read up more on that project check out the post on aplerp and also made a video that make used of r0 of that module.
Read up more on the perspective camera, the base camera class, and object3D
If you are still somewhat new to threejs you might want to read up more on the perspective camera, the base camera class, and the object3d class. The perspective camera in threejs is the camera option that renders a scene object in such a way that replacates the way that the human eye sees, thus it is often the typical camera that I use for most projects.
However there are a number of other options when it comes to camera so it also makes sense to know what there is to work with when it comes to features shared across all cameras in the base camera class. Speaking of the base camera class there is also checking out the object3d class that is not only a base class of the camera class but many other objects such as mesh objects, groups, and whole scene objects actually. Even if you are not new to threejs you might still want to read up more on these now and then, as I find myself still doing so even though I have a lot of experience working with threejs, there is a lot to take in with this one after all.
The Vector3 lerp method and the class in general
There is bypassing the use of the aplerp method that I made and just working directly with the lerp method of the vector3 class. I would be a good idea to work out at least a few demos using the method to get a first hand experience as to how it works as a way to transition one instance of Vector3 to another instance of Vector3. Also speaking of the vector3 class, yeah it would be a good idea to check Vector3 out more at some point when you get the time as that is yet another major class in threejs that I find myself using all the time.
source code is also up on github
I also have the source code of camera kit, all demos, and additional assets located in my test threejs repository on Github.
Version numbers matter
When I wrote this post I was using r140 of theejs and everything was working fine for me with that revision of threejs.
1 - First version of the camera kit module and demos
For the very first version of camera kit I started out with just a few methods that will work with any camera, and in fact any object that is based off of the object3d class actually. This will likely change with future revisions of the module, but for now I will just be writing about the first state of this threejs example. This will include a general overview of the module itself, as well as a few demos that make use of the public methods of the module. Once again I will not be getting into the aplerp module that I am using for the sin lerp method as I have covered that all ready in an older post.
1.1 - The source code of camera kit r0
Thus far when working with the aplerp module I have a few built in get alpha methods and a number of other such methods that I am making outside of the module and using with the aplerp lerp method by way of the getAlpha function option when calling the method. One of these was a demo in which I am using Math.sin in the process of working out an expressions to create the alpha values that seems to work well with a general idea of what I want to have in terms of camera movement.
1.2 - Plain lerp method demo
The plain lerp method of the camera kit module was added to just have a simple abstraction of a plain, normal, linear lerp movement 0f a camera from one Vector3 to another. This is the kind of camera movement that I have been doing thus far for many of my videos that I have been making for these posts on threejs. It would be nice to have a custom cut abstraction for a few lines of code that I find myself writing over and over again.
1.3 - Sin Lerp method demo
Now that I have the plain lerp method example out of the way it is now time for a quick demo of the first method that really makes camera kit a little interesting which would be the sin lerp method. When using this method I might want to adjust the bMulti option a little which is a value that is used to adjust the spacing of points. When used well with tweaked values I get a nice effect where the camera starts out moving fast but slows down as the camera reaches a half way point, then picks up speed again.
1.4 - The circle around method demo
The circle around method helps with another typical task that I find myself doing often which is to just move the camera around a fixed target location from a given starting point.
When working on my various video projects that I am making so that I have some videos to embed for these posts I find myself repeating code over and over again for various tasks that have to do with camera movement and other camera update related tasks. So it makes total sense to at least start and revise a module such as this that I can make part of my personal stack of modules that I then use over and over again from one video to the next. There seems to be a growing list of modules such as this, one of which would be my object grid wrap module, as well as another module in which I built on top of that module that has to do with creating a kind of land scene.
I am thinking that this camera kit module might prove to be another example of this kind of threejs example that I actually use, so then there is a good chance that there will be future revisions of this.
I have a lot of ideas for additional methods, and maybe some kind of standard format of an object that I can create and use with methods that work just with that kind of object. There is not just updating the position and rotation of a camera of course there is also playing around with the various parameters of a perspective camera such as the feild of view value, and doing a bunch of other things that might helper to create an over all kind of style for my video projects.