A while back I wrote a blog post on the lerp method of the Vector3 class in the javaScript library known as threejs. The lerp method can be used to move a vector from one state to another given state in the form of another instance of the vector3, and an alpha value as a number between 0 and 1. This method alone works well, when it comes to simple linear lerping. In other words moving a vector from one point to another in the from of a kind of straight line between the two points of interest. Also when doing the typical index over length value as a way to create an alpha value the rate at which the point moves does so in a fixed, single delta value. These limitations then give rise in an interest to find, or develop some kind of advanced lerping module that builds on top of the vector3 method.

Read More

There are many built in geometry constructors in threejs that can be used to create an instance of buffer geometry by way of calling a function and passing a few arguments to define certain aspects of the geometry. One such option that I will be writing about today is the capsule geometry constructor. This is a geometry that is like the cylinder geometry, but with a half sphere like cap on each side of the cylinder resulting in as the name suggests a kind of capsule like shape.

The nature of the capsule geometry is interesting as with a little code it can maybe be used as an alternative to tube geometry that often presents itself as a road block of sorts when learning how to use these various geometry constructors. One major reason why is because in order to use the tube geometry one will need to create an instance of a curve which is needed as the first argument when calling the tube geometry constructor. This might prove to be a little hard to work with as it is a way to create a 3d path by way of javaScript code purely by way of some logic, rather than say data for each point in space. There are some built in curve classes that help make working with tube geometry easier, but again this capsule geometry can be used to create a kind of crude alternative.

In this post I will be going over a few basic getting started type examples of the capsule geometry as always. I will then also be looking into how to go about drawing a 3d path in space using a group of mesh objects where each mesh object contains a capsule geometry. I will also then be touching base on some additional advanced topics that are related to that of the capsule geometry as well.

Read More

This week I took another look at my object grid wrap module threejs example that I made a while ago, and when doing so I made some revised versions of that source code. While I was at it I thought I would start a new threejs example project that will be another javaScript file in which I am building on top of this object grid wrap module that is a way to create a grid with a collection of mesh objects that looks like some land in terms of terrain at least.

When it comes to using this object grid wrap module I need to define a collection of source objects to clone for each grid location, so for this threejs example I am just creating a module that in part creates this collection of objects that include mesh objects with built in box geometry as well as Extrude geometry using shapes.

Read More

This week the main threejs project that I worked on a little was my weird face one example in which I am making a kind of hybrid model between the kind of models that I have made thus far, and a more professional kind of model that I still have not got around to learning how to make just yet that has to do with loading Geometry stored in an external file that I made with blender. That is that so far I have been making informal models in the form of having mesh objects with geometries that are created using the built in geometry constructors, the oldest example of this would be my guy one model.

Although these kinds of informal models that are just groups of mesh objects with built in geometries work okay when it comes to a very crude kind of style, I am thinking that I should make an effort to go in the direction of making a more professional kind of model to at least some extent. This kind of hybrid model that I have in mind involves geometries that are created in a program like blender, and then I use my lerp geometry method to allow for animation of certain features. I am sure that this will not be the last kind of module like this as I learn more about threejs, as well as other topics that have to do with 3d modeling in general. However I have to start somewhere when it comes to getting away from what I have been doing thus far that is just not what I want to do all the time for every project idea this far.

Read More

I wrote a blog post on the lerp method of the Vector3 class in threejs. This lerp method can be used to transition the state of one vector to another target vector by way of giving a target point to move to, and an alpha value between 0 and 1 that is the magnitude to the move the current point to the target point.

Lately I thought about using this lerp method as a way to lerp the points of a position attribute of one geometry back and forth from one geometry to another. This post will be on a threejs example in which I am working out a crude yet effective proof of concept of this idea of lerping the state of a position attribute of one buffer geometry between two differing states.

So in other words I am thinking in terms of having two geometries with similar, and ideally an identical count of vertices in the position attribute. On top of having more or less the same count of vertices the order of the vertices is also of importance I have found as if that is not the case this can result in a less than desired outcome with the effect.

Sense I first wrote this post I have got around to working out some demos on morph attributes of buffer geometry objects though as well. It turns out that morph attributes are a great way to go about doing this sort of thing that involve sticking to some standards. So with that said future revisions of this threejs example will involve the use of morph attributes as a way to lerp between two or more position attributes of buffer geometry. In addition morph attributes are a great way to do this sort of thing with all attributes beyond just that of the position attribute.

Read More