폴리곤 메시

<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>

.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}

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);
});