Camera Planes module threejs example
When working on various threejs projects I have thought that it would be nice to have a way to just simply have a simple 2d layer to display debug info, or when making a final product to just use for any and all overlays that have to do with simple messages and so forth. Anyway of course, as always there is more than one way to go about doing something like this. One way would be to just have an HTML Collection of canvas elements, some of which are the DOM element properties of a threejs renderer, and others are just plane old 2d drawing content canvas elements. That is all fine and good, and maybe that is how I will need to go about doing things with certain projects. However for this threejs project example I am thinking more in terms of just going with a single canvas element that is the DOM element of a WebGL renderer, and making use of mesh objects, plane geometry, and various camera properties to just position, rotate, and scale such mesh objects so they are just in front of a camera at all times.
The Camera Planes module threejs example and what to know first
Read more on the base camera class, and the perspective camera.
There is the base camera class, and also the perspective camera that extends that base camera class. There are a lot of other options when it comes to cameras, but for the most I stick with the perspective camera with most projects. I am using the aspect property of the perspective camera as a way to know how to scale the mesh object, and there are a lot of other camera related topics that i will not be getting into depth with here.
Check out plane geometry, mesh objects, and the object3d class
There is also looking into the plane geometry constructor which is a good option for learning the basics of geometry in threejs. Speaking of geometry, yes there is a whole lot to be aware of when it comes to buffer geometry in general as well. On top of that there is also knowing a thing or two about mesh objects, and the base class of mesh objects as well as cameras and just about any object that will be added to a scene object which is the object3d class.
Source code is up on Github
The source code examples that I am writing about in this post can also be found in my test git hub repository on Github. That is also where I park the source code examples for my many other blog posts on threejs as well.
Version Numbers matter
When I first wrote this post I was using r146 of threejs.
1 - The first version of the camera planes module ( R0 ), and some demos
There is always that very first version of a module where I end up being the core idea of what I want working, but there are likely at least a few bugs, and a lack of features. With that said in this section I am starting out with the source code of the very first revision of the module, and with that a few demos that make use of that module. This first version has just two public methods, one to create a THREE.Group object that will contain a camera and a number of mesh objects, and an update method that will be used to update the state of these objects over time. The demos that I have thus far are to just test out that the features are working okay, and also to find things that i might want to change or add in future revisions of this project.
1.a - The camera planes module ( R0 - r146 style - IIFE format )
The main thing that I wanted to do with this first version is to just have a method that creates a THREE.Group object, and appends a camera as well as a number of mesh objects with plane geometry. I then thought that it would be a good idea to have the camera at a fixed local position of the group, say a -1 on the z axis and have it face the origin of the group. I can then position a mesh object with plane geometry at the origin, rotate the mesh so that the front side is facing the camera, and then have options to adjust things so that it can be lined up in a way so that it will work as a 2d overlay of sorts.
There is a lot more that I would like to do of course, as it would be nice to have more than one mesh objects, and also update those mesh objects over time. With that said I put in a few options that give me a fair amount of flexibility with respect to those things. However the core idea that I have in mind for most projects is to have just one mesh object, and to maybe always have it fixed at a standard location.
1.1 - Basic demo creating a camera planes with default options
The first demo of the very first version of the module should always be a kind of hello world typo example. With that said that is what this demo will be. Here I just create my usual set of objects, and then I create the group by calling the create method of the camera planes module. WIth these hello world examples I often just call the cerate method without any options to just know what the outcome is when using it with the hard coded options for everything.
1.2 - Layers demo with custom effect
Now that I have the basic example out of the way I can now get started with a demo where I make use of some custom options. There is the plane scale option that I put in place to adjust the scale of the planes. I can then also pass a reference to a camera that i all ready have rather than making a new one, as well as some additional options that have to do with the count of planes, and a max z value for them. I have a built in effect for changing the position, opacity and so forth over time, but I can also pass a function to customize this as well.
1.3 - Canvas elements for texture
I am going to want to use canvas elements as a way to create textures to display on these planes. For now I do not have any built in functionally for this sort of thing as I have other projects that serve this purpose. For now I am adding custom names for each mesh object, so I can use the get object by name object3d class method as a way to get a reference to a plane of interest. Then I can just set the texture that I want to use for say the map option of the material.
1.4 - Move the group object
I will want to have at least one if not more animation loops demos to make sure that very important core features are working okay. With thsat said in this demo I am changing what the camera is looking at by changing the position and rotation prototype values of the parent object of the camera rather than the camera directly.
1.5 - Move the planes
One final R0 demo I think, this time I am not just moving the parent object, but also updating the position of the planes as well. So with this demo the core functionality that I had in mid with this project seems to be working just fine. However I am sure that there are still a few key details that I might want to address in an R1 of this module. One thing that I have noticed is that the image will of course be a little distorted sense the textures used for the texture are base2 and in somes cases that actually image content will be a ratio other than 1 to 1. That is then one item that I might want to address in future revisions, other than that the most important features seem to be working just fine.
That will be it for now when it comes to this camera planes module, however I think that thins might prove to be one of the projects that I will be coming back to now and then with future revisions and demos. This will without question be the case if this ends up being one of the modules that I use every day when making video projects.