3D Text, 2D Text, and Billboard

This example demonstrates how to create and customize text in Vuer:

Text3D: 3D text using Three.js's TextGeometry for titles or decorative text.
Text: 2D text in the 3D world for fixed labels and annotations.
Billboard: Wrapper that ensures its children always face the camera.

python

from asyncio import sleep
from vuer import Vuer
from vuer.schemas import (
    Text3D,
    Text,
    Billboard,
    DefaultScene,
    AmbientLight,
    DirectionalLight,
    MeshNormalMaterial,
    OrbitControls,
)

# Font URL for 3D text (Three.js typeface format)
FONT_URL = "https://threejs.org/examples/fonts/helvetiker_bold.typeface.json"

app = Vuer()

@app.spawn(start=True)
async def main(session):
    # Set up the initial scene with all text components
    session.set @ DefaultScene(
        # 3D Text with bevel effect
        Text3D(
            "Hello Vuer!",
            MeshNormalMaterial(),
            key="title",
            font=FONT_URL,
            size=1.5,
            scale=0.15,
            bevelEnabled=True,
            bevelSize=0.04,
            bevelThickness=0.1,
            letterSpacing=-0.025,
        ),
        # Fixed 2D text label
        Text(
            "Fixed Label",
            key="label",
            color="green",
            fontSize=0.1,
            position=[0, 0.3, -1],
        ),
        # Billboard text that always faces the camera
        Billboard(
            Text(
                "I face the camera!",
                key="billboard-text",
                color="orange",
                fontSize=0.08,
            ),
            key="billboard",
            position=[0.5, 0.5, 0],
        ),
        # Lighting
        AmbientLight(intensity=2),
        DirectionalLight(intensity=1, position=[1, 2, 2]),
        bgChildren=[
            OrbitControls(key="OrbitControls")
        ],
    )

    # Animate the 3D text rotation
    angle = 0.0
    while True:
        angle += 0.02
        session.upsert @ Text3D(
            "Hello Vuer!",
            MeshNormalMaterial(),
            key="title",
            font=FONT_URL,
            size=1.5,
            scale=0.15,
            bevelEnabled=True,
            bevelSize=0.04,
            bevelThickness=0.1,
            letterSpacing=-0.025,
            rotation=[0, angle, 0],
        )
        await sleep(0.033)  # ~30 FPS

3D Text, 2D Text, and Billboard

Resources