Learning Three.js: Part 2: Geometries and Materials



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.


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.


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.

var geometry = new THREE.PlaneGeometry( width, height );

view raw


hosted with ❤ by GitHub


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.


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.


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.


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.


Building on MeshBasicMaterialMeshLambertMaterial 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.


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.