Welcome back, creators! In our journey to build amazing 3D worlds, we first need to understand the fundamental shapes that populate our scenes. In Three.js, these shapes are called Geometries. Think of them as the blueprints or the raw data that define the structure and form of any object you place in your 3D space. Just like a sculptor uses clay or marble, we use geometries to give our objects their physical presence.
Three.js provides a rich set of built-in geometries that serve as excellent starting points. These are pre-defined, mathematically described shapes that we can easily instantiate and customize. Let's explore some of the most common ones you'll be using frequently.
The most basic of all shapes, a BoxGeometry, represents a rectangular prism or a cube. It's defined by its width, height, and depth. You can think of it as a fundamental building block for many more complex objects.
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);Next up is the SphereGeometry, which creates a sphere. It's defined by its radius and the number of segments along its width and height. More segments mean a smoother, more spherical appearance, but also more computational overhead.
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 16);For creating circular faces or disks, the CircleGeometry is your go-to. It's defined by its radius and the number of segments around its circumference. You can also specify a starting angle and angle to create arcs.
const circleGeometry = new THREE.CircleGeometry(1, 16);The PlaneGeometry is a flat, two-dimensional surface. It's defined by its width and height, and like the sphere, you can control its segmentation for smoother appearances if needed, though for a flat plane, fewer segments are often sufficient.
const planeGeometry = new THREE.PlaneGeometry(2, 2);The CylinderGeometry creates a cylindrical shape. It requires parameters for its radius at the top and bottom (which can be different for cones), its height, and the number of radial segments. You can also choose to cap the top and bottom or leave them open.
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 24);While these are just a few of the basic geometries, they form the foundation for creating almost any shape you can imagine. Remember, a geometry defines the form of an object. To give it visual properties like color or texture, we'll need to introduce Materials in the next section.
graph TD
A[Geometries] --> B(BoxGeometry)
A --> C(SphereGeometry)
A --> D(CircleGeometry)
A --> E(PlaneGeometry)
A --> F(CylinderGeometry)
B -- Defines --> G{Width, Height, Depth}
C -- Defines --> H{Radius, SegmentsW, SegmentsH}
D -- Defines --> I{Radius, Segments, ThetaStart, ThetaLength}
E -- Defines --> J{Width, Height, SegmentsW, SegmentsH}
F -- Defines --> K{RadiusTop, RadiusBottom, Height, RadialSegments, HeightSegments, OpenEnded}