Data textures are a way to go about creating textures in threejs that can then be used for one of the various map options for materials, or anywhere a texture is needed such as with backgrounds. When it comes to using data textures as a way to add textures with JavaScript code I just need to know how to produce the texture that I want in terms of a Unit8Array with a set of four values. One for each color channel and a single alpha transparency channel. That is that I need to create an array with integer values between and including the range of 0 to 255 for red, green, blue and alpha for each pixel. Once I have that I can just pass that array, along with a width and height value to the THREE.DataTexture constructor function and the returned result will be a texture that I can then use in a project.

So I will want to work out a few demos that have to do with just creating data texture to begin with. There is also however a whole lot more to be aware of when it comes to just that though. One major subject with this is other ways to go about creating textures with a little javaScript code such as using canvas element textures for example. There are a lot of good reasons why I like to use canvas textures over that of data textures, but still data textures are very much the top alternative option when it comes to creating textures for projects this way rather than loading static image files.

Read More

Baked into threejs there are a number of Math utilities that can be used to help with various tasks such as clamping values for one example. Other things that can be done with the various methods include things such as converting a degree value to a radian value, or getting pseudo random values by way of the seeded random method. There are a lot of other great methods that help with the process of creating what is often referred to as an alpha value as well ( a number between 0 and 1 ).

However there is not just thinking in terms of what there is to work with, but also what is missing when it comes to a collection of methods such as this. With that said I think I should also write about one or more additional things that are not in this math utils object, but should maybe be there. I say maybe because I do not expect everything to be there of course. Even though there are some usual suspect type methods to work with here there is still going to be a need for some kind of additional utility library outside of threejs that is a kind of extension of what there is to work with in MathUtils. I still find myself writing my own code for various things in order to fill in the gap sort of speak.

Speaking of filling in the gap when it comes to making my own math utility module, I am always working on top of threejs, so I can just simply wrap many of the Math utils object methods. For one example of this there is the subject of clamping and wrapping values. When it comes to clamping I can just have an abstraction of THREE.MathUtils.clamp and be done with that. However things get a little messy when it comes to having a wrap method. There is an euclidean modulo method, but that alone does not work the way that I would want it to for such a method so there is having something that is maybe a bit more that just an abstraction for that one.

Read More

The rotation property of the object3d class in threejs stores a instance of the THREE.Euler class for the current local rotation of an object. What is nice about Euler objects is that they are easy to work with compared to some alternative options such a Quaternion objects, however it is possible to run into problems like Gimbal Lock that can be addressed with such alternatives.

This rotation property is just one value of the base class known as Object3d that is the base of many objects in the library such as Mesh Objects, Groups, Cameras, and many others including even whole Scene Objects.

When it comes to just setting the local rotation of an object by way of this rotation property, one way is by using something like the set method of the Euler class prototype to set the rotation of the object to a given set of Euler angles in terms of radian values in the form of javaScript numbers. In other worlds angles as values between 0, and Math.PI * 2. If you have a hard time thinking in radians there are tools that can be used to preform a quick conversion in the MathUtils object, also the expressions are not so hard to just work out when it comes to vanilla javaScript code.

There is a bit more to this sort of thing beyond just setting rotation with number values though, for example in some cases I might want to set the orientation of a geometry of a mesh object rather than the mesh object itself. For example I might want to set the orientation of a cone geometry so that the tip of the cone is the front face. With this sort of this there is setting the rotation of the geometry once, then using the object3d rotation property from there. That is just one example that I will be getting to in this post along with many others such as setting rotation from position and the inverse of doing so.

Read More

The position property of the Object3d class in threejs will hold a instance of the Vector3 class that is used to store the local position of an object3d class based object such as a Mesh, Camera, Group and so forth. This local position is relative to a parent object, rather than what is often referred to as a world space. In other words the values of the Vector3 object of the position property are deltas from the current position of the parent object, rather than an absolute world space location.

Sense the Object3d class is a base class of many objects learning a thing or two about the object3d position property will apply to a wide range of objects. So in other words setting the position of a mesh object is not all that different from setting the position of a camera as then are both extensions of the Object3d class. The same can be said of a wide range of other Object3d class features, so it makes sense to studly this class extensively, even though it is rarely used directly.

This will then be a post in which I will be going over a whole bunch of examples that have to do with setting the position of objects in general in threejs. There are a whole lot of ways of doing this sort of thing, and this is a post that I come back to edit often, so this post will be a bit long. Still there is skimming along to the various parts that are most relevant to what is needed at the moment.

Read More

One major part of learning how to use threejs is to get a solid grasp on what there is to work with in the object3d class. There is not just the base object3d class itself, but also a whole lot of other objects that are extended from this class such as mesh objects, groups, cameras and even whole scene objects. So once one gets an idea as to what the position property of the Object3d class is all about for example, they can also apply that same understanding to a lot of typical objects that are used when working out a scene.

So there are all these different kinds, or types of objects in threejs that are all based off of object3d. With that said there should be some kind of standard way of finding out what type of object that I am working with when looping over all the objects attached to an root object of interest. As with any other kind of class in threejs there is of course using something like the instanceof operator to find out if I am dealing with a given class of object or not, and that might work okay. However there is also a type property of all these various types of objects that can also be used as a way to find out what type of object as well. With that said this post will be about just that how to go about figuring out what the type of a given object3d based object is in threejs.

Read More