When it comes to threejs the THREE.Color constructor can be used to work with colors for various object properties that need a color value, as well as to just work with color in general. This constructor function can be used to create a THREE.Color class object instance that represents a specific color that can then be used to set the background color and the fog color when it comes to scene objects, the color of various properties of a material such as the color and emissive values, and just about almost everything else that has to do with color.

What is nice about the THREE.Color class is that the class is packed with a number of features that allow for me to create a color in a number of different ways, including just passing three numbers for red, green and blue color channel values in the form of a number between 0 and 1 as arguments when calling the constructor function. Regardless of how I create the color what is returned is an instance of THREE.Color, rather than a string value for a color, and as such there is a red, green, and blue property of the object. There are also a great number of prototype methods that have to do with mutating these values, or returning values based off the state of these properties, or changing the state of the color. For example there is a get hex method that will return a hex string value of the color, and a set RGB method that will change the value of the color by r, g, and b values.

So in this post I will be going over a number of typical use case examples of the THREE.Color constructor, and will also likely touch base on a number of other topics while in the process of doing so when it comes to using this class of the threejs javaScript library.

Read More

I would like to look into the various external file formats more that I can use with threejs, and maybe a good place to start would be with the dae file, also known as the Collada file format. The Collada file format is a format option that I can use out of the box in blender to export files, so it would seem to be a good choice just for that reason alone for starters. Aside from easy exporting, and importing with blender, this DAE format uses an XML schema as a way to store data for the state of an over all scene export as well. For me that is another good reason why I should go with this one as it is a plain text file format that means that in a pinch I can edit a few things here and there with a plain old text editor if I need to for some reason. Also it allows for me to structure things in a way in which I can reused textures and so forth rather than having everything packed together in a single binary format.

Once I have a Collada file exported from blender it is then just a question of how to load that file into a three.js scene with a little javaScript code. The Collada file loader is not built into three.js itself, but it can be added by way of an external file that can be found in the examples folder of the three.js github repository. The DAE loader is fairly easy to use, but there are still just a few things here and there to be aware of that call for a post on this subject.

Read More

I want to start thinking in terms of what the long term plan with threejs might be for me if I am going to continue writing new posts on it. Also I what to known what to do when it comes to starting some kind of actual project using threejs rather than the simple tech demos that I write about for the most part when writing these posts on threejs. However I think what I really need to start doing is making a few examples that are some kind of starting point for an actual project of some kind. With that said I think In this post I will be writing about my first, basic guy, or person model using three.js that I made a while back, and then updated just a little for the sake of this post.

I actually have a number of crude modules that are really just a collection of mesh objects using the built in three.js geometries, rather than a professionally made model that is imported from something like blender. When it comes to doing that there is getting into how to go about loading exported dae files, or some other kind of file format. I have nothing against making those kinds of modules, it is just that those kinds of modules can prove to be time consuming to make, and they do not always result in an over all better finished product in the end actually. Also I am taking into account what I want to really make with three.js and I am thinking more so in terms of animations in the form of videos, rather than games.

So when it comes to making videos all that matters in the end is if the final product looks the way I want it to when it comes to the final video and that is it. Also it is not just how a video looks that is important really but the over all subject matter, and so may other things that go beyond the scope of this blog post. Crude modules might look crude, but if I am going for that kind of style to begin with, then they will work just fine and I can move on to other aspects of making that kind of content. What really matters most then is the over all finished product in terms of everything, not just the animation, and I am finding content on youtube that I would say are examples of doing this kind of thing right.

So when it comes to the kinds of over all scenes that I would like to make, I will want to have at least one, if not a few basic guy, or person type models. With that said this post is on one of my first modules for this sort of thing. This kind of module, and several other variations of it, has all ready appears in some of my other examples. However in this post I think I will be just writing about the guy model by itself, and a single demo of the model.

Read More

In threejs there is the Euler Class that is an option for setting the local rotation of an object. The use of this class of object will also come into play for a wide range of other tasks that pop up now and then such as when using the apply euler method of the vector3 class.

The rotation property of the Object3d class is an instance of Euler, and the Object3d class is a base Class for many objects in threejs including things like Mesh, Group, and Camera objects just to name a few examples. Speaking of Scene objects that too is an example of an object that is based off of the Object3d Class and thus also has a rotation property that is an instance of Euler.

The Euler class goes hand in hand with the Vector3 Class as the Euler class has to do with angles, while Vector3 has to do with a position. A great deal of what is done in threejs has to do with moving and rotating objects around, so Vector3 is what can be used to set a position, while Euler is a way to set the orientation of the object. There are however shortcomings with the Euler class, and as such there are a number of other options for setting orientation as well that I should mention in this post.

Euler Objects are easy to work with, but they do still have there limitations. As such sooner or later one will need to look into other threejs features for handing rotations, mainly quaternions and matrix4 objects. However if you are new to threejs I would highly recommend starting with Eulers before progressing into reading more on these alternatives.

Read More

The standard material is one of several options with mesh materials that make use of light sources. When it comes to mesh materials like the normal material, and the basic material might prove to be a nice starting point as they do not require light to work which helps to simplify code examples. Also when it comes to projects in which I do not make use of light sources at all they might work just fine and I can just move on. However when it comes to working with everything that threejs has to offer when it comes to light sources, and the various kinds of texture maps there are to work with, the standard material is one of a few options that might prove to be a better all around go to material.

There are some additional materials that might be worth mentioning as contenders when it comes to a great general use case material in threejs such as the Lambert material, and the phong material. The nice thing about the Lambert material is that it might eat up a little less processing overhead compared to the standard material, which might come in handy when trying to make code run faster. When it comes to how things look without much care of how expensive it might be in terms of system resources the phong material might prove to be a better option because of the specular feature of the material which is a nice touch. However over all the standard material seems to work fine for the most part, it seems to reproduce more realistic lighting compared to the Lambert material. So then the standard material is kind of an nice balance between reduced overhead, while still looking decent for most surfaces.

Read More