THREE.PlaneGeometry and THREE.CircleGeometry have limited ways of customizing their appearance. If you want to create custom 2D shapes, you can use THREE.ShapeGeometry. With THREE.ShapeGeometry, you have a couple of functions you can call to create your own shapes. You can compare this functionality with the <path element functionality that is also available to the HTML canvas element and SVG. Let's start with an example, and after that, we'll show you how you can use the various functions to draw your own shape. The 04-basic-2d-geometries-shape.html example can be found in the sources of this chapter.
The following screenshot shows this example:
60 FPS (45-60)
In this example, you can see a custom-created 2D shape. ...
