Wireframe

와이어프레임

Rendering only the edges of a mesh’s polygons, without filling the faces, to reveal its underlying structure.

Also known as: THREE.WireframeGeometryEdgesGeometrymaterial.wireframe
···
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.8, 6);
const geo = new THREE.TorusKnotGeometry(1.15, 0.38, 140, 16);
const fill = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({ color: 0x2a2a52, transparent: true, opacity: 0.35 }));
scene.add(fill);
const wire = new THREE.LineSegments(new THREE.WireframeGeometry(geo), new THREE.LineBasicMaterial({ color: 0x8ecbff, transparent: true, opacity: 0.85 }));
scene.add(wire);
function resize() { renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); }
addEventListener('resize', resize); resize();
renderer.setAnimationLoop((t) => {
  const r = t * 0.00022;
  fill.rotation.set(r * 0.6, r, r * 0.15);
  wire.rotation.copy(fill.rotation);
  renderer.render(scene, camera);
});

The easiest route is material.wireframe = true, but that draws every triangle’s diagonal too, which gets messy. THREE.WireframeGeometry(geometry) extracts every triangle edge as LineSegments the same way, while THREE.EdgesGeometry(geometry, thresholdAngle) keeps only edges where the angle between adjacent faces exceeds the threshold — the edges you’d actually notice.

The demo layers WireframeGeometry lines over a translucent filled shape, so you can see how the lines expose the surface’s own triangulation.

Common uses: loading placeholders, edit-mode overlays in 3D editors, low-res previews, and blueprint-style visuals. On very high-poly meshes the lines get so dense they wash out — watch for that.

When to use

Use for structural diagnostics, loading states, and edit-mode indicators. On dense meshes, use EdgesGeometry and tune the threshold angle.