Understanding Basic Geometries
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);