Vuer Component Life Cycle

Core Concept

This tutorial demonstrates the basic CRUD operations for components in Vuer: adding a component, updating in-place, and removing.

Life Cycle Operations

1. Adding Components

Create new components using session.upsert:

session.upsert @ Obj(
    src="/static/model.obj",
    position=[0, 0, 0],
    key="my-model",
)

2. Updating Components

Modify existing components by reusing the same key:

session.upsert @ Obj(
    src="/static/model.obj",
    position=[1, 0, 0],  # Changed position
    key="my-model",  # Same key updates the existing component
)

3. Removing Components

Delete components with session.remove:

session.remove @ "my-model"

Complete Example

from vuer import Vuer
from vuer.schemas import Obj
import asyncio

app = Vuer()

@app.spawn
async def main(session):
    # Create/Update: Add a wireframe mesh
    for i in range(80):
        wireframe = i % 2 == 0

        # Toggle wireframe on and off
        session.upsert @ Obj(
            src="/static/model.obj",
            position=[0, 0, 0],
            wireframe=wireframe,
            key="primary-mesh",
        )

        await asyncio.sleep(0.01)

    # Add a second component
    session.upsert @ Obj(
        src="/static/model.obj",
        position=[1, 0, 0],
        wireframe=True,
        key="secondary-mesh",
    )

    await asyncio.sleep(0.8)

    # Remove the second component
    session.remove @ "secondary-mesh"

    # Keep the session alive
    while True:
        await asyncio.sleep(1.0)

app.run()

Key Patterns

Using Keys

Unique keys identify components in the scene
Reusing a key updates the existing component
Different keys create new components

Update Frequency

The example toggles wireframe every 0.01 seconds (100 times per second), demonstrating how Vuer handles rapid updates efficiently.

Timing

Components can be added and removed at any time during the session, allowing for dynamic scene management.

Visual Effect

This creates an animated effect showing two mesh versions (solid and wireframe) alternating visibility, demonstrating how components can be dynamically managed throughout an application's runtime.

Source

Documentation: https://docs.vuer.ai/en/latest/tutorials/basics/simple_life_cycle.html

2.3 KiB Raw Permalink Blame History