Geometry Basics

When we create 3D models or shapes in our game, we’re dealing with geometry – the math and structure that defines the shape of an object. Geometry in 3D is composed of vertices, edges, and faces. To explain these terms: faces are the flat surfaces of a 3D shape, edges are the lines where two faces meet, and vertices (singular: vertex) are the points or corners where edges meet. For example, imagine a cube: it has 6 square faces, 12 edges, and 8 vertices (those 8 corner points of the cube). In a 3D model, faces are usually triangles or quadrilaterals that cover the surface of the object. The vertices are defined in 3D space (each has an X, Y, Z coordinate), and edges connect those vertices in a certain pattern to form faces. All the models you see in games – from simple crates to complex characters – are essentially a network of these triangles. When we code in Three.js or any 3D engine, we often use pre-defined geometry like a BoxGeometry (which gives us the vertices/edges/faces of a cube) or a SphereGeometry (for a sphere), or we load a model created by an artist. Under the hood, it’s all vertices and faces. We can think of geometry as the wireframe or skeleton of our 3D object – by itself, it’s just a structure, basically invisible lines and points. If you render just the geometry in a line-frame mode, you’d see something like a wire cage shaped like your object. To actually see a solid object in the game, this geometry needs to be combined with something else: a material. Once we apply a material, the engine can fill in those faces with colors or textures. We’ll talk about that next in the Mesh section. But the takeaway here is that understanding geometry is key to 3D programming. Knowing that every model is made of vertices, edges, and faces helps us grasp why, for instance, a more detailed model is heavier to render (it has more of those elements). It also helps when we need to create or manipulate shapes via code. Now, let’s see how geometry comes to life as a visible object by adding materials and making a mesh.