In threejs there are a lot of built in constructors for making quick geometries that can be used with a material to create a mesh. One of these is built in geometry constructors can be used to make geometry of a plane. That is just a flat simple 2d plane, which is a desired geometry for most simple projects.

The three plane geometry constructor allows for setting the width and height, but also a count for section width, and section height as well when creating a plane geometry. There is then the question of how to go about styling a checkered plane in threejs, as well as some other related topics when it comes to working with planes in threejs. There are two general ways of doing that sort of thing, one would be to just think in terms of a single material and a single texture, and the other would involve getting into creating and adding groups and thus also set material index values for the geometry. In any case the plane geometry is a great one to start with when it comes to both of these topics actually.

There are many other little details about this that I should also touch base on such as rotating the geometry rather than the mesh object that contains it. Another typical thing that will come up is how to go about setting the side property of the material that I use with the geometry when creating the mesh and so forth. So lets take a look at some plane geometry examples in threejs to get a better grasp on how to get up and running with plain geometry in threejs.

Read More

In threejs there is an option to use directional light as one of several types of light to choose from when adding light to a scene object. Other options that I find myself using the most thus far include point lights, and ambient light, but in some cases I might want to use directional light in place of or on top of these other options.

A directional light is like ambient light in the sense that it is a good way to go about simulating day light. With ambient light a base light intensity is just applied for all materials in a scene and the location of the ambient light in world space does not really matter. Directional light however as the name implies is a situation in which light is coming in from a given direction, but not in the same way as with a point light, or spot light. The rays are all coming in at a parallel, uniform direction, rather from a fixed point outward. Directional light alone might not still be the best way to simulate daylight though, I often find myself using a combination of directional light and ambient light to do so.

So then directional light is kind of like that of point lights and spotlights in that I want to set a desired value for the position property of the object that is returned when calling the THREE.DirectionalLight constructor. However when doing so I can also make use of a normalized Vector3 instance value, as the direction and not so much the magnitude of that directional that matters with directional light. When it comes to spot lights and point lights it is both direction and position that matter.

Read More

In this post I aim to revisit the face3 constructor in older versions of threejs as it would seem there is is now some confusion revolving around the topic because of the fact that it is now a removed feature. That is that the Face3 class, and also the Geometry class are no longer baked into the core of the threejs library, so all these code examples on the open web that make use of these features will now of course break.

Todays post will be on face3 color, that is setting colors for each vertex in a face3 instance and how to use it with a material and a mesh object. In this post I will be going over some examples of the face3 constrictor in general, but this will mostly be on face3 color. Also because these examples only apply to older versions of threejs now, I will also need to write about at least one example that has to do with how to do something similar with buffer geometry rather than the now removed as of r125 face3 and geometry classes.

Read More

In threejs there is a number of options when it comes to light sources for materials that respond to light. One of my favorite options for the most part would be the point light. This point lighting option can be sued to shine light in all directions from a single given point in space so it is a light source where direction matters, but it is not restricted to a cone like area as with a spot light. Also unlike with the directional light the unit length of the vector that is set for the point light also matters. However I would not say that it is a replacement for directional light, or spot lights by any means.

I often like to combine a point light with ambient light as a way to have a base line amount of light for all materials, while still having a sense of depth that can be obtained by still having some kind of directional light source such as with a point light. Speaking of directional light that is yet another kind of lighting option that one might consider.

In this post I will be going over a quick examples of the point light in threejs as well as touching base on some other related topics as well when it comes to setting up mesh objects that will respond to light. So then this might prove to be a quick fun example of threejs and light as well as some other things that come up when making a three.js project in general

Read More

The vue destroy instance method can be used to destroy a vue class instance in vuejs. This might not always work out as expected when you think of what might happen when calling a method called destroy, but it will to some extent do just that as the name would suggest.

I think that the vue destroy method should generally not be used, unless I am in a situation in which it would seem that I have to use it which might come up now and then in future projects. I often like to create client systems with a fixed set of resources and then just result those resources over and over again. For example there is having an array and then pushing objects into that array, and purging them out as needed. However I prefer to have a set array of objects, and then have an active property for each object. With that said often I think that I should try using directives like v-if, and f-for before looking into using the vue destroy method.

This vue instance method will trigger the before destroy and destroyed lifecycle hooks when called bring about the end of a vue instance lifecycle.

Read More