Three.js Font Explorer

Load Three.js FontLoader JSON format fonts and render 3D text with interactive material and shader property controls in real-time. Upload a font file to explore 3D typography and material effects.

How to use this Three.js Font Explorer

Upload a Three.js FontLoader JSON format font file
Enter text to render in 3D
Adjust material properties like color, metalness, roughness
Use mouse controls to rotate, zoom, and pan the 3D view
Experiment with different materials and lighting effects

Font & Text

Select Three.js Font JSON

Text to Render:

Font Size: 0.5

Font Height (Extrusion): 0.1

Material Properties

Material Type:

Color:

Metalness: 0.1

Roughness: 0.5

Emissive Color:

Emissive Intensity: 0

3D Preview

No font loaded. Upload a font file or load the sample font to see 3D text.