Graphics Reference
In-Depth Information
Extending
Three.js
with
a
custom
geometry object
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 exist-
ing one and configure it for our purpose. While this is good enough for most scen-
arios, 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-geo-
metry.html
in your browser to see the final result, which will be similar to the follow-
ing screenshot:
In this screenshot, you see a single rotating cube. This cube is created as a custom
geometry and can be instantiated by using new
THREE.FixedBoxGeometry()
. In
the upcoming section, we'll explain how to accomplish this.
