The edges geometry constructor in threejs is yet another useful little feature of threejs that can be a handy tool when I just want to view the edges of a geometry. It works by passing a geometry to which I want the edges from and returns a new geometry that will be just the edges from the given source geometry. There is just one more additional argument when calling the constructor that is a threshold angle.

I became aware of how this constructor can be useful when I took a second look into how to go about working with wire frames when updating my post on that subject in threejs. When it comes to wire frame mode that works more or less as expected, however it will work by showing all the triangles of a geometry, not just the edges of a geometry as a line, or collection of line segments. So when it comes to creating another kind of wire frame mode that is just the edges of a geometry this edges geometry constructor can help with that when used with the line constructor in place of the use of the mesh constructor.

This subject then deserves at least one stand alone post on the topic then, as there are some stations in which I might want to use this in place of what is typically used.

Read More

When it comes to making an animation loop in threejs I have been using the built in JavaScript Date class along with the request animation frame method. However thus far I can not say that I have been making use of the built in THREE.Clock constructor that much. Turns out that there are still a whole lot of basic features that I have not got around to looking into with threejs when it comes to things like this Clock constructor and why it might be a good idea to go with this in place of what I have been making animation loops with thus far.

So in this post I will be looking into the THREE.Clock constructor and also touching base on some client side javaScript features that are closely related to the class such as the performance global, and mainly the now method of that object.

Read More

Today I thought I would write another post on a built in geometry constructor in threejs, this time the Torus Geometry Constructor which results in a doughnut like shape.

There are many interesting things about the geometry of a torus in general that are worth looking into in detail. It is a shape that is composed of a collection of circles where each circle is positioned and rotated around a point that results in the formation of a tube that in turn is a kind of 3d circle. So then there are two general arguments of concern that come up with this. One argument is the radius from the origin to the center of the tube that will form the over all doughnut shape, and then the other is the radius for each circle along this path as well. After that there are some additional arguments of concern that have to do with the number of sides for each circle, and the number of circles that will effect the over all point density of the geometry.

Read More

In threejs the sphere geometry constructor is one of many geometry constructor functions built into the core of the threejs library itself. These various built in geometry functions are a way to create a geometry by way of a little javaScript code rather than loading an external file. Also it is a way to create geometry by just calling a function rather than making a custom geometry the hard way by working out logic to create the various attributes of a buffer geometry.

However there is not just thinking in terms of the built in geometry constructors, but also the differences between two general ways of thinking about 3d space. Often one might think about 3d space in terms of one big grid where everything has a given x, y, and z position relative to a origin. There is however another way of thinking about this that can be described as a distance, and then two angles, often called phi and theta, from an origin.

When it comes to making a sphere geometry just like any other built in geometry constructor I just call THREE.SpeherGeomerty with the new keyword, pass a few arguments, and what is returned is a buffer geometry instance of a sphere. I can then add the geometry as the first argument to a Mesh Object along with a Material as the second argument when calling the THREE.Mesh constructor. However there is a great deal more to it than just that, with the constructor itself, the various properties of a buffer geometry instance in general, and of course a great many things that branch off when it comes to a sphere in general.

Read More

In threejs there is getting into using groups as a way to compartmentalize a collection of mesh objects. When doing so there is using the look at method to get a mesh to look at another child object of the group, or some other group in an over all scene object.

One thing that I have found that pops up when dealing with nested objects, and the look at method of the objecy3d class, it is that the look at method will always have the object look at something relative to world space. With that said there is knowing what world space is, and how it compares to local space, or space relative to a parent object if you prefer. To help with these kinds of problems there is the get world position method of the object3d class that when called will return the position of an object relative to world space rather than the position that is relative to the parent object.

There is one weird thing about the get world position method though which is that a target vector3 instance must be given as an argument when it comes to late versions of threejs at least r135+ last I checked. In other words I can not just call the method and have a new Vector3 returned, I must create a new one and pass it to the get world space method as the first argument. The world position will then be copied into this Vector3 that is passed to the method, and that can then be passed as the position to look at, or be used for whatever reason that is needed when it comes to this kind of situation.

So in this post I will be addressing this issue with some source code that has to do with nested object3d class based objects and the use of this get world space method. There is also just working out a few basic examples that have to do with the differences between local and world space in general as well.

Read More