In this post I will be writing about the BufferGeometryLoader in threejs the popular javaScript library for working with 3D objects. The Buffer Geometry Loader is one of several options in threejs when it comes to external asset loaders, some of which might prove to be a better option depending on what needs to happen. What is nice about the buffer geometry loader is that it is baked into the core of threejs itself, so there is no need to boter loading an additional file beyond that which is often the case with many other options.

If I want to import a 3d model that has been created in a 3d modeling program like blender, and if I want to use the built in buffer geometry loader, it will have to be converted to a standard JSON format used by threejs. Luckily there is an official plugin to do just that for blender at least in the three.js repositories exporters folder of r92 of threejs. As of r93+ the exporter has been removed from the repository but the same old exporter should still work okay with the version of blender that is being used, if not doing this might prove to be a little involved.

Because I might run into problems exporting what I want to use from various programs I would not stop with the buffer geometry loader. One of the other options when it comes to loading assets into threejs that I like best thus far would be the Collada file loader. This collada file loader allows me to load files that are in a format that works out of the box with blender without having to bother with external plug-ins to add the export functionality of that program. The collada file format is also a great format not just for geometry but also with materials, textures, and so forth as well. T his way I do not have to bother adding a plugin to blender, but I do have to add an additional file on top of threejs to load Collada Files as that loader is not built into the core of threejs like that of the Buffer Geometry loader.

Still if you are willing to do what is necessary to create buffer geometry JSON files, the buffer geometry loader is one way to go about loading external geometry at least. So then in this post I will be writing abut at least a few examples of this kind of option when it comes to this sort of thing.

Read More

In this post will will be covering the subject of adding light to a scene in threejs, but with an emphases on spotlights. When it comes to the options to work with in threejs with lighting a spotlight is just one tool in the tool box along with many other options such as point lights, directional light, and ambient light just to name a few of them.

Spotlights as the name suggests is a light that will concentrate light in a cone like shape at a given target location. This kind of light then differs a great deal from other options that will just brighten things up in general such as with ambient light, or give a cylinder like beam of light where all rays move in a single parallel direction such as the case with directional light. So then in addition to adding directional or ambient light to a project, spotlights can be used as an additional kind of light source that can be moved around, and focus light in on a specific area.

For the most part the use of a spotlight is pretty straightforward, just create an instance of it with the constructor function and add it to the scene object. However there is a fair amount to write about when it comes to the options that are passed when calling the constructor function, and also a great deal when it comes to how to go about updating the state of a spot light.

Read More

I have been toying around with threejs these days, and may continue doing so until I have a solid collection of posts on it, and even continue beyond that if I really get into this sort of thing. So it should go without saying that I am going to end up writing a few posts on Materials such as the standard material, and features of materials such as emissive maps, transparency, and so forth.

One such option with materials would be the Mesh material known as the Mesh Lambert Material, which is one of many options for skinning a mesh object created with the THREE.Mesh constructor function. In this post I will be getting into the specifics of this Lambert material a little to get a better sense of what it is all about compared to the many other options.

If you are just getting started with threejs you might be familiar with at least the Mesh Basic Material, and that you use a Material with a Buffer Geometry to make a Mesh object instance to which you can then add to a scene object. However you might now be interested in working with lights, and having a material that will respond to a light source. If so the Lambert Material may be of interest as this is one option that will work with light while the basic material will not. The main material that I would use more often than not would be the standard material, but the Lambert material might prove to use a little less overhead then that material by loosing accuracy when it comes to lighting. So lets take a look at this material, and maybe some additional topics of interest surrounding it that may apply to materials and threejs in general.

Read More

One of the most important things to understand when making a threejs project, is working with a perspective camera which will be needed in order to draw a scene object with a renderer. There are other types of cameras to work with in threejs that are all based off the core Camera Class, but a perspective camera is the most common one that mimics the way the human eye sees the world. So then the perspective camera it is the typical choice for most projects, and for the most part it is a good one to start with also.

When creating an instance of a perspective camera it is a good idea to be aware of the values that are passed when calling the THREE.PerspectiveCamera constructor for the fist time that have to do with the creating of what might be called a viewing frustum. The values that are passed have to do with field of view, aspect ratio, and the near and far render distance. It is also called for to know how to go about changing these values after creating an instance of the camera as it is not just a question of setting new values to a property of interest.

There are also things like knowing how to position a camera, and set the orientation of a camera, much of that has to do with the Object3D Class class of which the base camera class is based off of. The Object3d class is a major class in threejs that is not just the base class for cameras, but also Mesh objects, Groups, and even whole Scene objects. So maybe getting into the object3d class in detail would be a bit off topic, but I should cover at least some basics with that, and maybe many other related topics in this post.

Read More

If you want to make a threejs project you are going to want to know a thing or two about how to go about working with cameras. A camera must be created with one of several constructor function options, once an instance of a camera is obtained it does not need to be added to the scene object, although doing so might still generally be a good idea in some situations. In any case at least one camera needs to be created so that we have something that can be used with a render method of the WebGL rendreer, or whatever renderer option you might be using

In threejs there are a few cameras to work with, but typically you will want to work with a perspective camera most of the time, at least that is the one that I actually used in most projects thus far. A camera like many other objects in threejs inherits from the object3d class, which contains properties that can be used to set the position and orientation of the camera. This post is then about the base camera class that is shared across all cameras, the various camera options, and so forth. In other words this can be thought of as a kind of home base for all content on cameras in threejs content on my site here at github pages.

Read More