Polygon mesh

폴리곤 메시

The basic way 3D shape is represented: points (vertices) connected by lines (edges) that enclose filled faces.

Also known as: Vertex / edge / faceMesh
···
html
<div class="pm-legend"><span><i class="v"></i>vertex</span><span><i class="e"></i>edge</span><span><i class="f"></i>face</span></div>
css
.pm-legend{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);display:flex;gap:clamp(6px,2.4vmin,16px);font-size:clamp(8px,2.4vmin,12px);color:#dfe3ffdd;background:#00000055;padding:.35em .8em;border-radius:999px}
.pm-legend span{display:flex;align-items:center;gap:.4em}
.pm-legend i{width:.7em;height:.7em;border-radius:50%;display:inline-block}
.pm-legend i.v{background:#ff6ea8}.pm-legend i.e{background:#dfe3ff}.pm-legend i.f{background:#5b5bf7}
js
import * as THREE from 'three';
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0b0b14);
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 0.6, 5.2);
const geo = new THREE.IcosahedronGeometry(1.25, 1);
const faces = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({ color: 0x5b5bf7, transparent: true, opacity: 0.28 }));
const edges = new THREE.LineSegments(new THREE.EdgesGeometry(geo), new THREE.LineBasicMaterial({ color: 0xdfe3ff }));
const verts = new THREE.Points(geo, new THREE.PointsMaterial({ color: 0xff6ea8, size: 0.09, sizeAttenuation: true }));
const group = new THREE.Group();
group.add(faces, edges, verts);
scene.add(group);
function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  group.rotation.y = t * 0.00025;
  group.rotation.x = Math.sin(t * 0.00016) * 0.3;
  camera.lookAt(0, 0, 0);
  renderer.render(scene, camera);
});

Every 3D model breaks down into three parts: vertices (points with a position), edges (a line between two vertices), and faces (the region an edge loop encloses). A face with three edges is a triangle; with four, a quad.

Real-time renderers — game engines, and the browser’s WebGL/three.js included — end up triangulating every face before drawing it, since the GPU only knows how to rasterize triangles. So modeling in quads isn’t about what the GPU wants; editing, subdividing, and animating quads is simply far more predictable for the artist.

Blender, Maya, and Cinema 4D all let the viewport switch between vertex/edge/face selection modes to edit at each level. This demo layers all three on one mesh at once — dots for vertices, lines for edges, a translucent fill for faces — so you can see how the layers actually stack.

When to use

Useful when a tool’s vertex/edge/face edit modes feel confusing, or when explaining why triangle count and triangulation matter.