In the recipes you've seen so far, we create Three.js objects from scratch. We either build a new geometry from scratch with vertices and faces, or we reuse an existing one and configure it for our purpose. While this is good enough for most scenarios, it isn't the best solution when you need to maintain a large code base with lots of different geometries. In Three.js, you create geometries by just instantiating a THREE.GeometryName object. In this recipe, we'll show you how you can create a custom geometry object and instantiate it just like the other Three.js objects.

Getting ready

The example that you can use to experiment with this recipe can be found in the provided sources. Open up 02.11-extend-threejs-with-custom-geometry.html in your browser to see the final result, which will be similar to the following screenshot:

In this screenshot, you see a single rotating cube. This cube is created as a custom geometry and can be instantiated by...