Chapter 5. Learning to Work with Geometries

In the previous chapters, you learned a lot about how to work with Three.js. You know how to create a basic scene, add lighting, and configure the material for your meshes. In Chapter 2, Basic Components That Make Up a Three.js Scene, we touched upon, but didn't really go into the details of, the available geometries that Three.js provides and that you can use to create your 3D objects. In this and the next chapter, we'll walk you through all the geometries (except THREE.Line, which we discussed in the previous chapter) Three.js provides out of the box. In this chapter, we'll look at the following geometries:

• THREE.CircleGeometry

• THREE.RingGeometry

• THREE.PlaneGeometry

• THREE.ShapeGeometry

• THREE.BoxGeometry

• THREE.SphereGeometry

• THREE.CylinderGeometry

• THREE.TorusGeometry

• THREE.TorusKnotGeometry

• THREE.PolyhedronGeometry

• THREE.IcosahedronGeometry

• THREE.OctahedronGeometry

• THREE.TetraHedronGeometry

• THREE.DodecahedronGeometry

And in the next...

The basic geometries provided by Three.js

In Three.js, we have a couple of geometries that result in a two-dimensional mesh and a larger number of geometries that create a three-dimensional mesh. In this section, we'll first look at the 2D geometries: THREE.CircleGeometry, THREE.RingGeometry, THREE.PlaneGeometry, and THREE.ShapeGeometry. After that, we'll explore all the basic 3D geometries that are available.

Two-dimensional geometries

Two-dimensional objects look like flat objects and, as the name implies, only have two dimensions. The first two-dimensional geometry on the list is THREE.PlaneGeometry.

THREE.PlaneGeometry

A PlaneGeometry object can be used to create a very simple two-dimensional rectangle. For an example of this geometry, look at the 01-basic-2d-geometries-plane.html example in the sources for this chapter. A rectangle created using PlaneGeometry is shown in the following screenshot:

Creating this geometry is very simple, as follows:

new THREE.PlaneGeometry(width, height,widthSegments...

Summary

In this chapter, we discussed all of the standard geometries Three.js has to offer. As you saw, there are a whole lot of geometries you can use right out of the box. To best learn how to use the geometries, experiment with the geometries. Use the examples in this chapter to get to know the properties you can use to customize the standard set of geometries available from Three.js. It is also a good thing that when you start with geometries, you choose a basic material; don't go directly for the complex materials, but start simple with THREE.MeshBasicMaterial with the wireframe set to true, or THREE.MeshNormalMaterial. That way, you'll get a much better picture of the true shape of a geometry. For two-dimensional shapes, it's important to remember that they are placed on the x-y plane. If you want to have a two-dimensional shape horizontally, you'll have to rotate the mesh around the x axis for -0.5 * PI. And finally, take care that if you're rotating a two-dimensional shape, or a...