112 lines
2.7 KiB
Markdown
112 lines
2.7 KiB
Markdown
# 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:
|
|
|
|
```python
|
|
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:
|
|
|
|
```python
|
|
@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:
|
|
|
|
```python
|
|
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
|
|
|
|
```python
|
|
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
|