A source layer 3d drawing application threejs example
There may be alternative ways of doing this sort of thing such as just creating a scene the way that I want to, adjust the position of the camera and so forth and then just take a still picture and open that still picture up in an image editing program like GIMP. Any decent image manipulation program such as GIMP will have layers as a feature, so I can add the still of the scene as a source layer, then create another layer on top of that and draw to that. with that said there is the question of how to go about justifying making something like this rather than just using tools that are all ready out there to work with. I can not think of that much, but for starters there is just making a minimal custom tailored program that is made for a specific kind of work flow, or over all style. Aside from that it is possible that this example might just prove to be another one of my unfinished prototypes for some kind of application using threejs.
I would like to make at least one, if not more projects that function as a kind of tool to help in in the process of making projects though. This project might not prove to be the best example of this kind of thing, but sooner or later I might expand on this specific kind of threejs example. That is to create some kind of tool that helps in in the process of making some kind of asset or file product.
This source layer threejs project example, and what to know first
The source code for this example is on Github
The full source code for this project example, as well as the source code for older revisions, and any additional revisions to which I have not revised this content for possible can be found in my test threejs repository on Github. If you want to reproduce what I am writing about here on you end it might be best to install the full project there, as I am making use of additional back end code, and dea models and so forth.
Version numbers matter with threejs
When I was first working on this example I was using r127 of threejs, and I am also using 2.6.14 of vuejs. The vuejs library seems to be fairly solid, and development on it is slow, however that is not so much the case with threejs as new revisions come out often and code breaking changes are often introduces in new revisions.
For the source layer application I am doing the typical set of things that are true with any threejs application as such it is here that I am creating a scene, camera, light, and renderer objects that compose any other threejs object. On top of that thought I am also creating a vuejs instance that will serve as a way to create a template for a user interface that will be used to mutate settings for a vue data object, and then it will be these vue data object settings that will be used to then update values of the scene and render the new state of the scene.
I have found a way to directly work with the Collada loader in revision 1 of this example. To do so I just need to pass the text content for the first argument of the parser, and then the path argument of the loader is used to know what the base url is when it comes to loading any additional assets that the dea file may use such as textures. So then there is a file input element that is used to load the dae file, and then there is also a dea path text input element that is used to set what the path os for any additional assets. The path set must be absolute relative to the view folder in my test threejs project folder.
I have an additional file that is all the source code that has to do with the draw canvas layer that I position on top of the source layer. So then where the source layer is the resource that I will be using for a reference as to what to draw, the draw layer on top of that is the layer where I will actually be drawing to with the mouse and or touch screen.
With the canvas element that I append to a shared container element with the source layer I am attaching a number of events for pointer events. I went with pointer events rather than mouse and touch events alone because for this drawing module I did not care to go all out with features, I just wanted a simple clean, simple drawing application type thing to use on top of the source layer which is really the main focus of this project example. If I where to keep working on this I might want to have separate events for touch and mouse events and do things like have a custom right click menu and so forth, but for now I just want to keep things simple with this.
Just like with the source layer application I have a vue instance in which I am defining a template for a user interface that will be used to control things when it comes to various settings for the state of the drawing app. When it comes to a very simple drawing app I am still going to want to be able to do things like change brush size, color, and clear the canvas at the very least and the ui that this template creates allows for me to do just that by mutating a vue data object that contains those settings.
3 - The dae tools file
This module contains a create method where I can set methods for events like what to do as a file is being loaded, what to do when the loading of a dae file is over an so forth. I can then pass this object as an argument when calling a load all method of the module and when doing so I can set additional options that have to do with a base url, along with one or more additional relative paths from that base url that are dea files that I want to load. However when it comes to the kind of project there might be alternative ways that I go about loading a dae file that involve for example the File Input element to load a dae file in a local file system rather than that of making a scripted http call over a network. So in any case as to how to I go about parsing dae files I also have methods that have to do with filtering the end result, regardless of how that result was created.
This is it for now then, at least when it comes to revision 1 of this example as that Is the revision that I was writing about when I first started writing this blog post. I do have things planed out for future revisions in my todo list for this example, but that is a practice for all my other threejs examples also.
Regardless of who many libraries I use with a project, compared to how much vanilla javaScritp code I right there is another things that I think I should keep up with when it comes to making additional projects. For this example I in a way I did not make just one application, but in a way to separate applications that can be used together in a single web page. That is that I though not of making just one single application but two or more applications that work together. When doing this sort of thing each application should still work well on its own. For this example I have code that is just used to create a scene, and another application that is just a simple drawing app. They could both be used on there own, but by making use of both of them in a certain way I can have this one application that is used to create and mutate the state of a scene, and other layer that is used to create an mutate the state of a drawing of that scene.