Train Track threejs module project example

When it comes to my beta world collection of videos I have started a timer video project that involves a train that goes along a track. There is a lot that I like about this project, but also a whole lot that I would change if I where to start over. Anyway one thing about the project is that I have the land all as one big solid geometry, then I worked out a curve path for a train to go along on top of the single geometry in the single mesh. This seems to work okay, but if I where to start to make another video project like this, and then another, and so forth I would like to make some other kind of system for this. Mainly I do not think that I would want to have one solid geometry, but rather a collection of source objects to which I clone, and adjust one by one as a way to create an over all scene. So with that said this threejs project example is about a module that has some methods that can be used to create such a project.

Read More

Cubic Bezier Curves in threejs

I would like to expand more on the use of curves in threejs and maybe part of doing that will involve taking another look at what there is to work with when it comes to built in options with curves. I have all ready wrote a blog post on the THREE.QuadraticBezierCurve3 class so for this post I will be writing about a few quick examples using the THREE.CubicBezierCurve3 class.

Both the Quadratic and Cubic Bezier curve options extend from the base Curve class of course. So in any case there are Curve class prototype methods that are very useful such as the get point method just to name one, and both options can be used when working out curve paths. However one thing that is nice about this Cubic Bezier Curve Class is that it will allow for two control points rather than just one. This might be one of the major reasons why I see a lot of developers choosing the Cubic option over Quadratic as this will allow for a greater degree of flexibility when creating curves for a project.

Read More

Morph Attributes of buffer geometry objects

The morph attributes property of a buffer geometry instance will store an object which contains buffer attributes that are used to mutate the state of other buffer attributes of the geometry over time. Simply put it is a way to go about creating animation by having say additional position attributes for several other kinds of states for the points of a buffer geometry. These additional attributes that are used to morph a buffer geometry can contain absolute values foe each item, or they can be delta values that store a rate of change for each item as well.

Read More

House Model two threejs project example

I have made a threejs example post way back in the day in which I make a simple, crude house model using only javaScript code on top of threejs itself. I do like to make those kinds of models as I can pack everything into a blog post, not just in terms of the javaScript code, but also the data that composes the various buffer geometry attributes as well. However when it comes to starting to work on some kind of real project with threejs, this is just not generally how things are done for the most part. Do not get my wrong though, some times it seems like the best way to do what I want to do will involve a whole lot of javaScript code to create geometry. However some times it seems like the best way forward is to create some kind of asset in a program like blender and then export from that program into a file format like that of the DAE file format. So in this threejs project example post, I am going to be writing about a new kind of house model where I am using an external file as a way to have the geometry for the house model.

Read More

Material Vertex Color and the buffer geometry attribute used for doing so

One of the core features of the base material class in threejs is a vertex colors Boolean that when set to true will cause the material to be rendered using color channel data stored in an attribute of the buffer geometry used. This feature should work with most materials, although some might require a light source might still be needed or something to that effect. It will not work at all with certain materials such as the mesh normal material, however it is still very much a feature of the base material class. So then unless there is something else going on that will override this vertex color feature it should work many materials including line and point materials.

I would say that the color attribute is not one of the major must have attributes of a buffer geometry. However it is an example of an additional attribute that can be added to a geometry to allow for coloring an over all mesh object apart from other options that will have to do with textures and uv mapping. It is then not at all a replacement for uv mapping, and the various material options that can be used with textures. However it is an alternative way of coloring a mesh object that works by adding data to geometry rather than bothering with images. In some cases I might want to use vertex colors as a quick way to have something other than just a single solid color, but I am not sure I would take this kind of approach in the long run, at least not with the built in materials anyway.

The main thing that got me into vertex colors is that recently I got around to writing a new blog post on the shader material. Simply put it is a way to go about creating a custom material using GLSL. When doing so I have found that vertex coloring might be a nice way to go about styling a geometry, and when it comes to creating my own materials that opens the door for custom attributes that will allow for not just creating one color attribute but several such attributes.

Read More