Meshes Explained

Purchase the course to access all content

Meshes Explained

In a 3D game, when we see a tree, a car, or a character, what we’re really seeing is a mesh. A mesh is the combination of the geometry (the shape) and a material (the appearance). Think of the geometry as a naked wireframe or clay model, and the material as the skin or paint that covers it. When we join them, we get a complete 3D object that can be rendered. In Three.js, for example, we create a mesh by doing something like: const mesh = new THREE.Mesh(geometry, material). This one line takes the shape and the material and combines them into an object we can add to our scene. The material defines how the surface of our geometry looks – it could be a simple color, a texture image (like a bitmap wrapped around the model), or even a shiny reflective surface. There are different types of materials for different effects: basic color materials, Lambert or Phong materials for simple lighting, or PBR (physically-based rendering) materials for realistic lighting and textures. The mesh is what the rendering engine actually draws on the screen. To recap with an example: suppose we want to make a cube in our game. We’d create a cube geometry (which defines the 8 vertices, 12 edges, 6 faces of a cube), then create a material (say, a blue color with a bit of shine). By combining those, we get a cube mesh. We add the cube mesh to our scene, and now a blue cube will appear in the game world. If we only had the geometry and no material, the cube might not be visible (or we’d only see a hollow wireframe). If we had a material but no geometry, there’s no shape to put it on. So both are needed. As one resource puts it: connecting the geometry with the material gives us a mesh. Once we have meshes in the scene, they can be positioned, rotated, and scaled as needed. They can also be animated or moved around – for example, we could change a mesh’s position every frame to make it fall or walk. Now that our world is populated with meshes, how do we actually see this world? That’s the job of the camera, which we’ll talk about next.

Kevin Kernegger

Get Instructa Pro + Coding 3D Games in the Browser

Get Full Access to the 3D Game Development with AI and Cursor Course - Weekly Lessons & Videos - Unlimited access to all course modules - Get access to all course updates - Unlimited Access to Guides & Prompts - Access to the private Discord community