Vuer

Interactive Pointer and Marker

This example demonstrates how to create an interactive 3D scene where users can click on objects to place markers. It shows:

  1. Loading and displaying a PLY point cloud (Porsche car model)
  2. Handling pointer events to place red sphere markers at click positions

Code Example

python
from asyncio import sleep
from pathlib import Path

from vuer import Vuer, VuerSession
from vuer.events import ClientEvent
from vuer.schemas import Ply, Sphere

assets_folder = Path(__file__).parent / "../../../assets"
ply_file = "static_3d/porsche.ply"

app = Vuer(static_root=assets_folder, port=8123)


@app.spawn()
async def main(sess: VuerSession):
    # Load the initial point cloud with a transformation matrix
    sess.upsert @ Ply(
        src="http://localhost:8123/static/" + ply_file,
        size=0.008,
        matrix=[1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1],
        key="porsche",
    )

    while True:
        await sleep(0.016)  # ~60fps

Marker Event Handler

The ADD_MARKER event handler listens for pointer clicks and places a red sphere at the clicked position. Each marker is a sphere with radius 0.1.

python
@app.add_handler("ADD_MARKER")
async def on_add_marker(event: ClientEvent, sess: VuerSession):
    """Handle ADD_MARKER events by placing a red sphere at the click position."""
    print("Added marker")
    position = list(event.value["position"].values())
    sess.upsert @ Sphere(
        args=[0.1, 32, 32],  # radius, widthSegments, heightSegments
        position=position,
        material={"color": "red"},
    )

app.start()