103 lines
2.3 KiB
Markdown
103 lines
2.3 KiB
Markdown
# 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`:
|
|
|
|
```python
|
|
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:
|
|
|
|
```python
|
|
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`:
|
|
|
|
```python
|
|
session.remove @ "my-model"
|
|
```
|
|
|
|
## Complete Example
|
|
|
|
```python
|
|
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
|