Text3D

The Text3D component renders extruded 3D text using Three.js TextGeometry. This is ideal for:

  • Creating 3D titles and labels

  • Building decorative text elements

  • Displaying animated text in scenes

  • Adding visual emphasis to annotations

Basic Usage

A minimal example that creates 3D text:

from vuer import Vuer, VuerSession
from vuer.schemas import DefaultScene, Text3D, MeshNormalMaterial, OrbitControls

FONT_URL = "https://threejs.org/examples/fonts/helvetiker_bold.typeface.json"

app = Vuer()

@app.spawn(start=True)
async def main(sess: VuerSession):
    sess.set @ DefaultScene(
        Text3D(
            "Hello Vuer!",
            MeshNormalMaterial(),
            key="title",
            font=FONT_URL,
            size=1.5,
            scale=0.15,
            bevelEnabled=True,
        ),
        bgChildren=[
            OrbitControls(key="OrbitControls")
        ],
    )

    await sess.forever()

Key Parameters

Parameter

Type

Default

Description

font

str

-

URL to typeface.json font file or JSON object with font data

smooth

float

-

Merges vertices with tolerance and calls computeVertexNormals for smoother appearance

lineHeight

float

0

Line height in threejs units

letterSpacing

float

1

Letter spacing factor

Note

Additional THREE.TextGeometry parameters (like size, height, bevelEnabled, bevelSize, bevelThickness, etc.) can be passed as **kwargs and will be forwarded to the underlying TextGeometry.```

Font Sources

Text3D requires fonts in typeface.json format. Options include:

  • Three.js examples: https://threejs.org/examples/fonts/

  • Font converter: https://gero3.github.io/facetype.js/

Tip: If you face display issues, try checking “Reverse font direction” in the typeface conversion tool.

Learn More

For detailed examples of using Text3D, see: