3D Text in Vuer

This example demonstrates how to create and customize 3D text in Vuer using the Text3D component. The Text3D component renders 3D text using ThreeJS's TextGeometry.

from asyncio import sleep

from vuer import Vuer
from vuer.schemas import (
    Text3D,
    Center,
    DefaultScene,
    Group,
    Box,
    AmbientLight,
    DirectionalLight,
)

app = Vuer()

@app.spawn(start=True)
async def show_3d_text(session):
    # Create a scene with some basic elements
    session.set @ DefaultScene(
        # Basic 3D text example
        Center(
            Text3D(
                "Hello Vuer!",
                font="https://threejs.org/examples/fonts/helvetiker_regular.typeface.json",
                smooth=1,
                position=[0, 1, 0],
                color="blue",
                scale=0.2,
            ),
            key="centered-text",
        ),
        # Customized 3D text with different parameters
        Group(
            Text3D(
                "Custom Text",
                font="https://threejs.org/examples/fonts/helvetiker_bold.typeface.json",
                smooth=0.5,
                lineHeight=0.5,
                letterSpacing=-0.025,
                position=[0, 0, 0],
                color="red",
                scale=0.15,
            ),
            position=[0, -0.5, 0],
            key="custom-text",
        ),
        # A small platform below the text
        Box(
            width=3,
            height=0.1,
            depth=1,
            position=[0, -1, 0],
            color="#888888",
        ),
        # Add lighting to make the text visible
        AmbientLight(intensity=0.5, key="ambient_light"),
        DirectionalLight(intensity=1, position=[1, 2, 2], key="directional_light"),
    )
    await sleep(0.1)

    # Demo of rotating text
    angle = 0
    while True:
        angle += 0.1
        session.update @ Group(rotation=[0, angle, 0], key="custom-text")
        await sleep(0.05)