When getting into the subject of making a custom buffer geometry in threejs there are a lot of various little details to cover. There are a number of attributes that must be created from scratch such as the position attribute which is the state of the points to begin with. On top of the position attribute there are additional core attributes such as the normals, and the UV attribute that has to do with figuring out what side of a face is the front size, lighting, and texture mapping.

However one has to start somewhere when it comes to learning how to do this sort of thing, and with that said maybe a good starting point would be the position attribute. The reason why I say that is because I can start out with using the THREE.Points, or THREE.Line constructor functions in place of the typical THREE.Mesh objects. When working with one of these alternatives to mesh objects I only need to worry about the state of the position attribute.

There is taking the time to create a blank instance of a Buffer geometry using the THREE.BufferGeometry constructor and then create the position attribute from the ground up. However maybe a good starting point would be to study the results of one of the built in geometry constructors such as the THREE.boxGeometry constructor to get an idea of what a position attribute is all about. There is also taking a look at some other features of a built in geometry instance such as the index property of a buffer geometry to gain a sense of what that is for when it comes to working with a set of triangles.

Read More

There are a number of ways to have control over visibility in threejs such as with the visible property of the obejct3d class, or making the material used with an object transparent and lowering the opacity. There is also just simply not adding an object to a scene object, or having an object added to the scene, and another that is not and swapping objects to and from them as children.

There are a whole lot of tricks for changing the visibility of objects, however in this post I will be making use of the layers property of an object3d instance. This layers property contains an instance of the Layers class that can be used as a way to go about setting objects to different layers. It is then possible to set what layers a camera should draw which is then a way to go about having control over the visibility of objects.

Any object in threejs that is based on the object3d class such as a Mesh, Group, or Camera has a layers property that by default is set to just layer 0. When using the render function of a renderer such as the web gl renderer as scene object is passed as the first argument followed by a reference to a camera to use to render a view of the scene. When doing so the camera used will only render objects that are enabled for one or more of the layer index values enabled for the camera. So then it would make sense to work out at least a few examples of this object3d class feature to gain a sense as to why this would be useful when working on a threejs project.

Read More

If for some reason I want to loop over all objects in a threejs scene, or all the objects attached to any single object I can use the object3d traverse method. The way this works is I just call the traverse method off of the scene object, or any object based off the object3d class for that matter, and pass a callback function as the first argument. This call back function will then be called for every nested child attached to the object that I call traverse off of, including the object itself. A reference to the current object will be passed as the first argument of the given callback function and it is then in the body of this function that I can preform whatever action I want to happen for all nested child objects as well as the root oject itself.

So then in this post I will be going over the use of the traverse method of the object3d class. In the process of doing so I will also be touching base on a wide range of other topics of interest that will branch off from the use of this method. There are things like the type property of the object3d class that come to mind when it comes to checking out what kind of object it is that I am dealing with for example.

Read More

I have been taking another look at everything there is to work with in the object3d class in threejs, and have found that I should write a lot more about this class. For example one such property of the object3d class is the parent property of an object3d instance which is something that can come in handy now and then just like that of the children property of an object. That is where the children property is a collection of other objects that are children of an object, the parent property is, well the parent of the current object of course if there is one.

Say I am looping over all the objects of a scene object using something like that of the object3d transverse method, and for each mesh object I want to take a look at what the parent object of the mesh object is. Say that in the scene there may be some mesh objects that are part of a group and the user data object of the group may have some data that I will want to use when applying some changes to the mesh object. In these kinds of situations I can use the parent property of the object3d class as a way to just simply check what the parent object of a current child object is to do this sort of thing.

However I can not say that I use the parent property that much, and maybe the reason why is because often there are other ways of having references to objects at the ready, such as having names for every object in the scene. So then in this post I will be going over a few examples that make use of the parent property of objects that are based on the object3d class. While I am at it I might also touch base on a wide range of other threejs related topics that might also be work checking into in detail, so lets get to it.

Read More

Today I thought I would look into making a few quick examples of the Shape constructor in threejs. This Shape Constructor is a way to go about creating a 2d shape which can then in turn be used with THREE.ShapeGeometry, or THREE.ExtrudeGeometry to create a buffer geometry. This geometry can then be used in a mesh object, or with anything else that needs a geometry such as with THREE.Points or THREE.LineSegmenets. The shape geometry constructor might come in handy as a way to quickly and easily go about making some custom geometries that are just 2d geometries that can then be brought into a threejs project as a custom cut surface, or a solid object that is extended with a little depth.

Read More