I would like to start using three.js to work out a basic model, like I all ready did with my guy model for example, only now I would like to do something practical such as creating a simple wooden box. So with that said todays threejs example post will be on a quick module that I put together that will help me get an idea of what the situation will be when I cut a board into 5 equal lengths of wood.

These equal lengths of wood that are created from the dimensions of a single board will then end up being represented by a collection of five mesh objects in a group. I can then rotate an position these lengths to form what would become a finished product that is just a simple open box.

Read More

This threejs example post will have to do with positioning a mesh object on the the surface of another mesh object that makes use of a sphere geometry. There are a lot of ways to go about doing this sort of thing, such as using group objects, Vector3 class methods, the Raycaster class, and even the attributes of buffer geometries.

The first version ( r0 ) of this example made use of a module that creates uses the first option that I mentioned which making use of group objects. The Basic idea with this is I have a group object that I then add the child object to that I want to position to the sphere. I then position the child object away from the origin of the group by a distance that is equal to the radius of the sphere. I then add the group as a child of the sphere, and then rotate the group as a way to change the position of the mesh object on the sphere surface. This might be a crude way to go about doing it, but never the less it gives a desired end result all the same.

When it comes to R1 of this example I went with the use of the apply Euler method along with several other vector3 class methods. thus far I have to say that I like this way of doing it far more than the nested group solution that I started out with. Still it may have its limitations compared to other alternatives such as the Raycaster class.

Read More

I thought that I knew everything I needed to know about the object3d class look at method in three.js, after all for the most part I just call the method, pass a Vector3 object or three numbers that is the position in space I want and object to face, and that’s it. However it turns out that there is a little more to it that just that with many little cases that will pop up from time ot time.

The typical end result of calling the look at method is that the object ends up looking at that point in space that was passed in the form of argument values. However things might not always work the way that I might expect it to, when it comes to a mesh object I often might want to change what the front side of the mesh is in terms of the geometry for example. Also I might run into problems that have to do with world space compared to local space when it comes to nested objects which is another thing I have found comes up when using this. Yet another problem might have to do with the fact that the look at method is just not a magic wand type method for setting the rotation value of an object, there are limitations that I have run into with respect to just the nature of how the method works, thus I just need to find or write a custom solution for setting the rotation property of an object.

When it comes to the problem of world space the look at method will always treat the values that it is given as a world space relative position, rather than a local space relative to a nested object. This world space is not relative to a group object, or even the scene object for that matter as that is an object that is based off of the object3d class as well. So that means that even a scene object has a position property that can hold a state other than that of 0,0,0. To some extent this is not really a problem as I typically do want to always look at a point relative to world space when using this method. However often I might end up making some kind of group of mesh objects and I want to have a mesh object look at another mesh object in this group, so in that case I want to look at something relative to the position of the group, not the world. In these kinds of situations I can still use the look at method, it is just that I will need to adjust for this by using something like the get world position method of the object3d class.

When it comes to mesh object and the geometry that is used with a mesh object often I will want to adjust what the front face of the geometry is. To so so it will require me to rotate the buffer geometry once just to change what the front facing direction is. I can then use the the lookAt method or directly mutate the instance of Euler at the rotation property of the object3d based object to change rotation from there on out.

Although the lookAt method will work fine for most situations there are a few additional use cases where it will just not work great. So then there will be some times where I might have to roll up my sleeves, and work out some kind of custom solution for setting rotation of an object3d based object.

Read More

When it comes to getting a reference to a mesh object in threejs things are not the same as what I have become accustomed to when it comes to working with the Document Object Model in client side javaScript alone. When it comes to html elements there is setting an id to an element, and then having the option to get a reference to that element by id later in a body of javaScript code. There are also a number of other options such as selecting by class, tag, and so forth as well.

When it comes to the Object3d class in threejs there is an id property of each object3d instance, however I have found that this is something that I should not mess around with. Still when it comes to setting my own unique strings for Mesh objects, groups, cameras and anything based off of the Object3d class there is an official built in way to do so. There is another property of Object3d that I can set to what I want, and that is the name property of the Object3d class that is more like that of the id property that I have come to know well in native client side HTML. There is then the get object by name method of the object3d class that I can then use as a way to get an object in threejs that has a set name for it then.

So In this post I will of course be going over a few quick examples of this get by name method for sure. However I might also want to expand by just making a few other demos that have to do with getting references to objects in general as well while I am at it.

Read More

In threejs there is the scale property of the object3d class that stores an instance of the vector3 class in terms of its value. By default the values for this Vector3 value are 1,1,1 which means that the scale of the object is 1 for each axis of the object. I can then change what the values are for this vector3 object making them higher or lower, and by doing so I will end up changing the scale of the object.

This then will be a post on using the scale property of the Object3d class that is a base class of Mesh objects, and many other such objects in threejs. In the process of doing so I will end up also writing about many other three.js, and javaScript related topics as they come up as well.

Read More