Reference textToModel()

textToModel()

Converts text into a 3D model that can be rendered in WebGL mode.

This method transforms flat text into extruded 3D geometry, allowing for dynamic effects like depth, warping, and custom shading.

It works by taking the outlines (contours) of each character in the provided text string and constructing a 3D shape from them.

Once your 3D text is ready, you can rotate it in 3D space using orbitControl() — just click and drag with your mouse to see it from all angles!

Use the extrude slider to give your letters depth: slide it up, and your flat text turns into a solid, multi-dimensional object.

You can also choose from various fonts such as "Anton", "Montserrat", or "Source Serif", much like selecting fancy fonts in a word processor,

The generated model (a Geometry object) can be manipulated further—rotated, scaled, or styled with shaders—to create engaging, interactive visual art.

Examples

Syntax

textToModel(str, x, y, width, height, [options], [options.extrude], [options.sampleFactor])

Parameters

str
String: The text string to convert into a 3D model.
x
Number: The x-coordinate for the starting position of the text.
y
Number: The y-coordinate for the starting position of the text.
width
Number: Maximum width of the text block (wraps text if exceeded).
height
Number: Maximum height of the text block.
options
Object: Configuration options for the 3D text:
options.extrude
Number: The depth to extrude the text. A value of 0 produces flat text; higher values create thicker, 3D models.
options.sampleFactor
Number: A factor controlling the level of detail for the text contours. Higher values result in smoother curves.

Returns

p5.Geometry: A geometry object representing the 3D model of the text.
Notice any errors or typos? Please let us know. Please feel free to edit src/type/p5.Font.js and open a pull request!

Related References