← Lab index
THREE.JS / DYNAMIC GEOMETRY MODIFIERS

Tessellate text, then push its faces.

This focused contract keeps the official modifier path visible: load the Helvetiker typeface, build beveled TextGeometry, apply TessellateModifier, attach per-face color and displacement attributes, and deform the non-indexed result in a source-shaped shader.

This route claims the official FontLoader asset, beveled TextGeometry, TessellateModifier.modify() with adjustable edge length and iteration limit, non-indexed output, deterministic per-face customColor/displacement attributes, source-shaped ShaderMaterial amplitude deformation, animation, sampling, reset, and teardown. The official GUI/Stats presentation, exact page/pixel composition, random-seed parity, device/compiler/backend matrix, generalized performance, and whole-example fidelity remain separate.

Source: official three.js Tessellation modifier example.