Setting Up Your First Scene in Vuer

Overview

This tutorial guides you through creating a basic 3D scene using Vuer, a Python framework for building interactive 3D visualizations. The example demonstrates how to establish a server, add scene components, lighting, and interactive elements.

Step 1: Initialize the Vuer Server

Begin by importing and instantiating the application:

from vuer import Vuer

app = Vuer(
    queries=dict(
        reconnect=True,
        collapseMenu=True,
    ),
)

The queries parameter configures the scene via URL parameters. Launch the server with app.run(), which produces output showing the local connection URL.

Step 2: Create an Async Session

The framework uses WebSocket sessions to connect clients with the Python server. Bind an async function to handle each session using the spawn decorator:

@app.spawn
async def session(sess: VuerSession):
    print("Example: we have started a websocket session!")

Step 3: Build Your Scene

Within the session, construct the scene by setting Scene objects containing various components:

sess.set @ Scene(
    Box(
        args=[0.1, 0.1, 0.1, 101, 101, 101],
        position=[0, 0.05, 0],
        color="red",
        materialType="standard",
        material=dict(color="#23aaff"),
        key="fox-1",
    ),
    ...
)

Key Components

Box

A 3D cube primitive with position, color, and material properties.

SpotLight

Provides directional lighting within the scene, wrapped in a Movable component to allow interactive repositioning.

Movable

Enables user interaction, allowing scene elements to be dragged and manipulated in the 3D viewport.

Essential Pattern

Always include await asyncio.sleep(0.0) after scene modifications to ensure proper asynchronous handling and client synchronization.

Complete Example

from vuer import Vuer
from vuer.schemas import Scene, Box, SpotLight, Movable
import asyncio

app = Vuer(
    queries=dict(
        reconnect=True,
        collapseMenu=True,
    ),
)

@app.spawn
async def session(sess):
    print("Example: we have started a websocket session!")

    sess.set @ Scene(
        Box(
            args=[0.1, 0.1, 0.1, 101, 101, 101],
            position=[0, 0.05, 0],
            color="red",
            materialType="standard",
            material=dict(color="#23aaff"),
            key="fox-1",
        ),
        Movable(
            SpotLight(
                intensity=3.0,
                distance=10.0,
                decay=0.0,
                position=[0, 2, 0],
                key="spotlight",
            ),
        ),
    )

    await asyncio.sleep(0.0)

app.run()

Source

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

2.7 KiB Raw Blame History