Geometries

In the previous chapter, we learned that a is made up of two things: a (the shape) and a (the look). Today, we're zooming in on that first piece — the one that gives our 3D object its form and structure.

So, let’s roll up our sleeves and explore the fascinating world of geometries in !

💠 What is a ?

In , a geometry is a mathematical structure that defines the form of a 3D object.

• : points in 3D space
• : lines connecting the vertices
• : the surfaces created by the edges

🧱 Built-in Geometries in

Three.js comes with a variety of built-in geometries that you can use to create common 3D shapes. These geometries are like pre-made molds that you can use to quickly create objects without having to define every single vertex and face yourself.

Let’s take a look at some of the most commonly used built-in geometries:

1. 

It is used to create a simple 3D box (or cube). It’s defined by its width, height, and depth.

const geometry = new THREE.BoxGeometry(1, 1, 1); // Width, Height, Depth

This creates a cube with equal dimensions on all sides. You can adjust the parameters to create rectangular boxes of any size.

2. 

It is used to create a sphere. It’s defined by its radius and the number of segments along its width and height.

const geometry = new THREE.SphereGeometry(1, 32, 32); // Radius, Width Segments, Height Segments

The more segments you add, the smoother the sphere will appear, but it will also require more processing power.

3. 

It is used to create a cylinder. It’s defined by its top and bottom radius, height, and the number of radial segments.

const geometry = new THREE.CylinderGeometry(0.5, 0.5, 2, 32); // Top Radius, Bottom Radius, Height, Radial Segments

You can adjust the top and bottom radius to create cones or tapered cylinders.

4.

It is a specialized version of the cylinder where the top radius is zero, creating a cone shape.

const geometry = new THREE.ConeGeometry(0.5, 2, 32); // Radius, Height, Radial Segments

5. 

It is used to create a flat, 2D plane. It’s defined by its width and height.

const geometry = new THREE.PlaneGeometry(5, 5); // Width, Height

This is useful for creating flat surfaces like floors, walls, or even simple 2D shapes.

6. 

It is used to create a donut-shaped object. It’s defined by its radius, tube radius, and the number of radial and tubular segments.

const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100); // Radius, Tube Radius, Radial Segments, Tubular Segments

This geometry is great for creating rings, donuts, or any other torus-shaped objects.

While the built-in geometries are incredibly useful, sometimes you need to create something more unique. In those cases, you can define your own custom geometry by specifying the vertices and faces manually.

Here’s a simple example of creating a custom :

const geometry = new THREE.BufferGeometry();

// Define the vertices of the triangle
const vertices = new Float32Array([
    0, 1, 0,  // Vertex 1
    -1, -1, 0, // Vertex 2
    1, -1, 0   // Vertex 3
]);

// Define the faces (indices of the vertices)
const indices = new Uint16Array([0, 1, 2]);

// Add the vertices and indices to the geometry
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

This creates a simple triangle by defining three vertices and connecting them to form a face.

Why Are Geometries Important?

are the foundation of any 3D object. They define the shape and structure of what you’re creating. Without , you wouldn’t have any objects to render in your scene.

Understanding how to work with is crucial for creating complex 3D models, optimizing performance, and even creating custom shapes that aren’t possible with the .

What’s Next?

Now that you have a solid understanding of , you’re ready to start creating your own 3D objects! In the next chapter, we’ll explore  .

Remember, the key to mastering 3D graphics is practice. Don’t be afraid to experiment with different and see how they affect your scene. The more you play around with it, the more comfortable you’ll become.

0 Comments

Top comments

"Please login to view comments"

Join the Conversation!

Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.

Upgrade your account