Requirements:

• Some knowledge of JavaScript
• Optional: An editor like Atom, NetBeans, or Sublime Text

In Part 1, I covered some general terms and techniques used in Three.js, a three-dimensional rendering JavaScript library. In this part, I will review the different geometries available and the use of different material types in Three.js.

• Part 1: Terms and Techniques
• Part 2: Geometries and Materials
• Part 3: Loading and Using Textures
• Part 4: Light Sources
• Part 5: Controls

Geometries

BoxGeometry was a geometry used in Part 1 as part of the example code. It is similar to other geometries and how they are constructed. Some other examples include other three-dimensional primitives like Planes, Spheres, and Lathes.

Planes

PlaneGeometry, like with BoxGeometry, needs two main parameters: width and height. You can also supply the width and height of segments within the plane, too.

Spheres

SphereGeometry, unlike other rectangle-shaped geometries, requires parameters like its radius and segment width and height.

• Radius — sphere radius. Default is 50.
• WidthSegments — number of horizontal segments. Minimum value is 3, and the default is 8.
• HeightSegments — number of vertical segments. Minimum value is 2, and the default is 6.
• PhiStart — specify horizontal starting angle. Default is 0.
• PhiLength — specify horizontal sweep angle size. Default is Math.PI * 2.
• ThetaStart — specify vertical starting angle. Default is 0.
• ThetaLength — specify vertical sweep angle size. Default is Math.PI.

Lathes

Different from spheres and other primitives, lathes are volumes with axial symmetry

• Points — Array of Vector2s. The x-coordinate of each point must be greater than zero.
• Segments — the number of circumference segments to generate. Default is 12.
• PhiStart — the starting angle in radians. Default is 0.
• PhiLength — the radian (0 to 2PI) range of the lathed section 2PI is a closed lathe, less than 2PI is a portion. Default is 2PI.

Materials

From what was presented in Part 1, materials are the “muscles” wrapped around the structures of the geometries that supply the “skeleton” of the edges and points which compose it. In Three.js, there are three main types of materials: MeshBasicMaterial, MeshLambertMaterial and MeshPhongMaterial.

MeshBasicMaterial

As the basis for the other types, MeshBasicMaterial is the most generic of all the materials types and is not affected by light sources. MeshBasicMaterial uses simple volumetric shading.

MeshLambertMaterial

Building on MeshBasicMaterial, MeshLambertMaterial can replicate more advanced lighting and materials which are non-shiny. As the “middle” between the Basic and Phong materials, it has some rendering time cost at the result of replicating lighting better than the MeshBasicMaterial.

MeshPhongMaterial

Using a more computationally expensive method of lighting, MeshPhongMaterial can replicating lighting in a more realistic way than MeshLambertMaterial at the cost of reduced performance.