Component Library
vuer.schemas

vuer.schema contains the schemas for the various components of the Vuer system. These schemas are used to validate the data that is passed to the various components of the system.

For detailed view of how these components are implemented, please refer to the typescript source code at https://docs.vuer.ai/en/latest/api/schemas.html.

Example Usage:

from vuer import Vuer
from vuer.schemas import DefaultScene, Sphere

vuer = Vuer()
vuer.set @ DefaultScene(up=[0, 1, 0])
vuer.upsert @ Sphere(args=[0.1, 20, 20], position=[0, 0.1, 0], key="sphere")

HTML Components

vuer.schemas.html_components.fnmatch(name, pat)

Test whether FILENAME matches PATTERN.

Patterns are Unix shell style:

• matches everything

? matches any single character [seq] matches any character in seq [!seq] matches any char not in seq

An initial period in FILENAME is not special. Both FILENAME and PATTERN are first case-normalized if the operating system requires it. If you don’t want this, use fnmatchcase(FILENAME, PATTERN).

class vuer.schemas.html_components.count

Bases: object

Return a count object whose .__next__() method returns consecutive values.

Equivalent to:

def count(firstval=0, step=1):

x = firstval while 1:

yield x x += step

__new__(**kwargs)

vuer.schemas.html_components.omit(d, *patterns)

Omit keys from dictionary that match any of the glob patterns.

Parameters:

• d – Dictionary to filter

• patterns – Glob patterns to match keys against (e.g., “_*”, “tag”)

Returns:

New dictionary with matching keys removed

Example:

omit({"foo": 1, "_bar": 2, "tag": 3}, "_*", "tag")
# Returns: {"foo": 1}

class vuer.schemas.html_components.Element

Bases: object

Base class for all elements

tag: str = 'div'

class vuer.schemas.html_components.BlockElement

Bases: Element

class vuer.schemas.html_components.AutoScroll

Bases: BlockElement

tag: str = 'AutoScroll'

class vuer.schemas.html_components.Markdown

Bases: BlockElement

tag: str = 'Markdown'

class vuer.schemas.html_components.Page

Bases: BlockElement

A Page is an element that contains other elements. It is represented by a div element in the DOM.

tag: str = 'article'

class vuer.schemas.html_components.div

Bases: BlockElement

tag: str = 'Div'

class vuer.schemas.html_components.InputBox

Bases: Element

An InputBox is an element that allows the user to input text. It is represented by an input element in the DOM.

tag: str = 'Input'

class vuer.schemas.html_components.Header1

Bases: BlockElement

A Text element is an element that displays text. It is represented by a text, or p element in the DOM.

tag: str = 'h1'

vuer.schemas.html_components.Header

alias of Header1

class vuer.schemas.html_components.Header2

Bases: Header1

Header 2

tag: str = 'h2'

class vuer.schemas.html_components.Header3

Bases: Header1

Header 2

tag: str = 'h3'

class vuer.schemas.html_components.Paragraph

Bases: BlockElement

A Text element is an element that displays text. It is represented by a text, or p element in the DOM.

tag: str = 'p'

class vuer.schemas.html_components.span

Bases: Element

A Text element is an element that displays text. It is represented by a text, or p element in the DOM.

tag: str = 'Span'

class vuer.schemas.html_components.Bold

Bases: span

class vuer.schemas.html_components.Italic

Bases: span

class vuer.schemas.html_components.Link

Bases: span

tag: str = 'a'

class vuer.schemas.html_components.Button

Bases: Element

A Button element is an element that allows the user to click on it. It is represented by a button element in the DOM.

tag: str = 'Button'

class vuer.schemas.html_components.Slider

Bases: Element

A Slider element is an element that allows the user to slide a value. It is represented by a slider element in the DOM.

tag: str = 'Slider'

class vuer.schemas.html_components.Image

Bases: Element

An Image element is an element that displays an image. It is represented by an img element in the DOM.

tag: str = 'Img'

class vuer.schemas.html_components.ImageUpload

Bases: Element

A ImageUpload element is an element that allows the user to upload a file. It is represented by a file upload element in the DOM.

tag: str = 'ImageUpload'

3D Scene Components

class vuer.schemas.scene_components.BlockElement

Bases: Element

class vuer.schemas.scene_components.Element

Bases: object

Base class for all elements

tag: str = 'div'

class vuer.schemas.scene_components.Image

Bases: Element

An Image element is an element that displays an image. It is represented by an img element in the DOM.

tag: str = 'Img'

class vuer.schemas.scene_components.SceneElement

Bases: BlockElement

class vuer.schemas.scene_components.Frustum

Bases: SceneElement

Camera Frustum

Parameters:

• position (tuple[float, float, float]) – An optional tuple of three numbers representing the position.

• rotation (tuple[float, float, float]) – An optional tuple of three numbers representing the rotation.

• matrix (tuple[float, float, float, float, float, float, float, float, float, float, float, float, float, float, float, float]) – An optional tuple of sixteen numbers representing the matrix.

• aspect (float) – An optional number representing the aspect.

• focus (float) – An optional number representing the focus.

• fov (float) – An optional number representing the field of view.

• near (float) – An optional number representing the near field.

• far (float) – An optional number representing the far field.

• scale (float) – An optional number representing the scale.

• upScale (float) – An optional number representing the up scale.

• focalLength (float) – An optional number representing the focal length.

• showUp (bool) – An optional boolean indicating whether to show up.

• showFrustum (bool) – An optional boolean indicating whether to show the frustum.

• showFocalPlane (bool) – An optional boolean indicating whether to show the focal plane.

• showImagePlane (bool) – An optional boolean indicating whether to show the image plane.

• src (str) – An optional string representing the source.

• colorOrigin (ColorRepresentation) – An optional ColorRepresentation for the origin color.

• colorFrustum (ColorRepresentation) – An optional ColorRepresentation for the frustum color.

• colorCone (ColorRepresentation) – An optional ColorRepresentation for the cone color.

• colorFocalPlane (ColorRepresentation) – An optional ColorRepresentation for the focal plane color.

• colorUp (ColorRepresentation) – An optional ColorRepresentation for the up color.

• colorTarget (ColorRepresentation) – An optional ColorRepresentation for the target color.

• colorCross (ColorRepresentation) – An optional ColorRepresentation for the cross color.

tag: str = 'Frustum'

class vuer.schemas.scene_components.CameraHelper

Bases: SceneElement

tag: str = 'CameraHelper'

class vuer.schemas.scene_components.group

Bases: SceneElement

tag: str = 'group'

children = []

class vuer.schemas.scene_components.mesh

Bases: SceneElement

tag: str = 'mesh'

children = []

class vuer.schemas.scene_components.TriMesh

Bases: SceneElement

Triangle mesh component for custom 3D geometry.

Allows creation of arbitrary triangle meshes by specifying vertices, faces, colors, and UV coordinates. Useful for custom geometry or procedurally generated meshes.

Parameters:

• vertices (NDArray[np.float16]) – Vertex positions as Nx3 array [x, y, z]

• faces (NDArray[np.uint32]) – Triangle face indices as Nx3 array

• colors (NDArray[np.uint8], optional) – Vertex colors as Nx3 array [r, g, b] (0-255)

• uv (NDArray[np.float16], optional) – UV texture coordinates as Nx2 array

• children (list, optional) – Child elements

Example Usage:

from vuer.schemas import TriMesh
import numpy as np

# Simple triangle
vertices = np.array([
    [0, 0, 0],
    [1, 0, 0],
    [0.5, 1, 0]
], dtype=np.float16)

faces = np.array([[0, 1, 2]], dtype=np.uint32)

colors = np.array([
    [255, 0, 0],
    [0, 255, 0],
    [0, 0, 255]
], dtype=np.uint8)

TriMesh(
    vertices=vertices,
    faces=faces,
    colors=colors,
    key="triangle"
)

tag: str = 'TriMesh'

children = []

vertices: ndarray[Any, dtype[float16]] = None

faces: ndarray[Any, dtype[uint32]] = None

colors: ndarray[Any, dtype[uint8]] = None

uv: ndarray[Any, dtype[float16]] = None

class vuer.schemas.scene_components.PointCloud

Bases: SceneElement

PointCould element, highly optimized for payload size and speed.

Parameters:

• vertices (NDArray[np.float16]) – An optional numpy array of shape (N, 3) containing the vertices of the pointcloud.

• colors – An optional numpy array of shape (N, 3) containing the colors of the point cloud.

• size (float) – An optional float that sets the size of the points.

• key (str) – str An optional string that sets the key of the element.

Usage:

sess.upsert @ PointCloud(
    vertices=np.random.rand(1000, 3),
    colors=np.random.rand(1000, 3),
    size=0.01,
    key="pointcloud",
)

tag: str = 'PointCloud'

vertices: ndarray[Any, dtype[float16]] = None

An optional numpy array of shape (N, 3) containing the vertices of the point cloud.

colors: ndarray[Any, dtype[uint8]] = None

An optional numpy array of shape (N, 3) containing the colors of the point cloud.

children = []

vuer.schemas.scene_components.p

alias of PointCloud

class vuer.schemas.scene_components.Box

Bases: SceneElement

Creates a box (rectangular cuboid) geometry.

Parameters:

args (tuple[float, float, float, int, int, int], optional, default (1, 1, 1, 1, 1, 1)) – Geometry parameters [width, height, depth, widthSegments, heightSegments, depthSegments]

Geometry Parameters:

• width: Box width along X axis

• height: Box height along Y axis

• depth: Box depth along Z axis

• widthSegments: Number of segmented faces along the width (min: 1)

• heightSegments: Number of segmented faces along the height (min: 1)

• depthSegments: Number of segmented faces along the depth (min: 1)

Example Usage:

from vuer.schemas import Box

# Simple box with default dimensions
Box(key="box1")

# Custom dimensions
Box(args=(2, 1, 0.5), key="box2")

# High-poly box with many segments
Box(args=(1, 1, 1, 10, 10, 10), key="box3")

tag: str = 'Box'

class vuer.schemas.scene_components.Capsule

Bases: SceneElement

Creates a capsule geometry (cylinder with hemispherical ends).

Parameters:

args (tuple[float, float, int, int, int], optional, default (1, 1, 4, 8, 1)) – Geometry parameters [radius, height, capSegments, radialSegments, heightSegments]

Geometry Parameters:

• radius: Radius of the capsule body and caps

• height: Height of the cylindrical section (excluding caps)

• capSegments: Number of curve segments for the hemispherical caps (1-32)

• radialSegments: Number of segmented faces around the circumference (1-64)

• heightSegments: Number of segmented faces along the height (1-32)

Example Usage:

from vuer.schemas import Capsule

# Simple capsule
Capsule(key="capsule1")

# Tall thin capsule
Capsule(args=(0.2, 3, 4, 8, 1), key="capsule2")

tag: str = 'Capsule'

class vuer.schemas.scene_components.Cone

Bases: SceneElement

Creates a cone geometry.

Parameters:

args (tuple[float, float, int, int, bool, float, float], optional, default (1, 1, 8, 1, False, 0, 2π)) – Geometry parameters [radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength]

Geometry Parameters:

• radius: Radius of the base of the cone

• height: Height of the cone

• radialSegments: Number of segmented faces around the circumference (3-128)

• heightSegments: Number of segmented faces along the height (1-64)

• openEnded: Whether the base of the cone is open or capped

• thetaStart: Start angle for first segment (radians, 0-2π)

• thetaLength: Central angle of the circular sector (radians, 0-2π)

Example Usage:

from vuer.schemas import Cone

# Simple cone
Cone(key="cone1")

# Half cone (180 degrees)
Cone(args=(1, 1, 8, 1, False, 0, 3.14159), key="half-cone")

tag: str = 'Cone'

class vuer.schemas.scene_components.Circle

Bases: SceneElement

Creates a circle (flat disc) geometry.

Parameters:

args (tuple[float, int, float, float], optional, default (1, 8, 0, 2π)) – Geometry parameters [radius, segments, thetaStart, thetaLength]

Geometry Parameters:

• radius: Radius of the circle

• segments: Number of segments (3-128), minimum 3

• thetaStart: Start angle for first segment (radians, 0-2π)

• thetaLength: Central angle of the circular sector (radians, 0-2π)

Example Usage:

from vuer.schemas import Circle

# Full circle
Circle(key="circle1")

# Semi-circle
Circle(args=(1, 32, 0, 3.14159), key="semi-circle")

tag: str = 'Circle'

class vuer.schemas.scene_components.Cylinder

Bases: SceneElement

Creates a cylinder geometry.

Parameters:

args (tuple[float, float, float, int, int, bool, float, float], optional, default (1, 1, 1, 8, 1, False, 0, 2π)) – Geometry parameters [radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength]

Geometry Parameters:

• radiusTop: Radius of the cylinder at the top

• radiusBottom: Radius of the cylinder at the bottom

• height: Height of the cylinder

• radialSegments: Number of segmented faces around the circumference (3-128)

• heightSegments: Number of segmented faces along the height (1-64)

• openEnded: Whether the ends of the cylinder are open or capped

• thetaStart: Start angle for first segment (radians, 0-2π)

• thetaLength: Central angle of the circular sector (radians, 0-2π)

Example Usage:

from vuer.schemas import Cylinder

# Simple cylinder
Cylinder(key="cylinder1")

# Cone-like cylinder (different top/bottom radii)
Cylinder(args=(0.5, 1, 2, 16, 1, False, 0, 6.28), key="tapered")

tag: str = 'Cylinder'

class vuer.schemas.scene_components.Dodecahedron

Bases: SceneElement

Creates a dodecahedron geometry (12-faced polyhedron).

Parameters:

args (tuple[float, int], optional, default (1, 0)) – Geometry parameters [radius, detail]

Geometry Parameters:

• radius: Radius of the dodecahedron

• detail: Level of subdivision (0-5), higher values create more faces

Example Usage:

from vuer.schemas import Dodecahedron

# Simple dodecahedron
Dodecahedron(key="dodeca1")

# High-poly subdivided dodecahedron
Dodecahedron(args=(1, 3), key="dodeca2")

tag: str = 'Dodecahedron'

class vuer.schemas.scene_components.Edges

Bases: SceneElement

Creates edges geometry from another geometry.

Parameters:

args (tuple[any, float], optional) – Geometry parameters [geometry, thresholdAngle]

Geometry Parameters:

• geometry: Source geometry to extract edges from

• thresholdAngle: Angle threshold in degrees (0-180) for edge detection

Example Usage:

from vuer.schemas import Edges

Edges(args=(geometry, 15), key="edges1")

tag: str = 'Edges'

class vuer.schemas.scene_components.Extrude

Bases: SceneElement

Creates extruded geometry from 2D shapes.

Parameters:

• shapes (any) – 2D shape(s) to extrude

• options (dict, optional) – Extrusion parameters

Options Parameters:

• curveSegments: Number of curve segments (default: 12)

• steps: Number of steps along extrusion depth (default: 1)

• depth: Extrusion depth (default: 1)

• bevelEnabled: Enable beveling (default: True)

• bevelThickness: Bevel thickness (default: 0.2)

• bevelSize: Bevel size (default: 0.1)

• bevelOffset: Bevel offset (default: 0)

• bevelSegments: Number of bevel segments (default: 3)

Example Usage:

from vuer.schemas import Extrude

Extrude(
    shapes=shape,
    options=dict(depth=2, bevelEnabled=True),
    key="extrude1"
)

tag: str = 'Extrude'

class vuer.schemas.scene_components.Icosahedron

Bases: SceneElement

Creates an icosahedron geometry (20-faced polyhedron).

Parameters:

args (tuple[float, int], optional, default (1, 0)) – Geometry parameters [radius, detail]

Geometry Parameters:

• radius: Radius of the icosahedron

• detail: Level of subdivision (0-5), higher values create more faces

Example Usage:

from vuer.schemas import Icosahedron

# Simple icosahedron
Icosahedron(key="icosa1")

# Subdivided sphere-like icosahedron
Icosahedron(args=(1, 2), key="icosa2")

tag: str = 'Icosahedron'

class vuer.schemas.scene_components.Lathe

Bases: SceneElement

Creates geometry by rotating a 2D profile around an axis.

Parameters:

args (tuple[list, int, float, float], optional, default ([], 12, 0, 2π)) – Geometry parameters [points, segments, phiStart, phiLength]

Geometry Parameters:

• points: Array of 2D points defining the profile to rotate

• segments: Number of circumferential segments (3-128)

• phiStart: Start angle for rotation (radians, 0-2π)

• phiLength: Angle of rotation (radians, 0-2π)

Example Usage:

from vuer.schemas import Lathe

points = [[0, 0], [1, 0.5], [0.5, 1]]
Lathe(args=(points, 32, 0, 6.28), key="lathe1")

tag: str = 'Lathe'

class vuer.schemas.scene_components.Octahedron

Bases: SceneElement

Creates an octahedron geometry (8-faced polyhedron).

Parameters:

args (tuple[float, int], optional, default (1, 0)) – Geometry parameters [radius, detail]

Geometry Parameters:

• radius: Radius of the octahedron

• detail: Level of subdivision (0-5), higher values create more faces

Example Usage:

from vuer.schemas import Octahedron

# Simple octahedron
Octahedron(key="octa1")

# Subdivided octahedron
Octahedron(args=(1, 2), key="octa2")

tag: str = 'Octahedron'

class vuer.schemas.scene_components.Plane

Bases: SceneElement

Creates a plane (flat rectangle) geometry.

Parameters:

args (tuple[float, float, int, int], optional, default (1, 1, 1, 1)) – Geometry parameters [width, height, widthSegments, heightSegments]

Geometry Parameters:

• width: Width of the plane along X axis

• height: Height of the plane along Y axis

• widthSegments: Number of segmented faces along the width (1-100)

• heightSegments: Number of segmented faces along the height (1-100)

Example Usage:

from vuer.schemas import Plane

# Simple plane
Plane(key="plane1")

# High-poly plane (useful for displacement mapping)
Plane(args=(10, 10, 50, 50), key="terrain")

tag: str = 'Plane'

class vuer.schemas.scene_components.Polyhedron

Bases: SceneElement

Creates a custom polyhedron geometry from vertices and indices.

Parameters:

args (tuple[list[float], list[int], float, int], optional, default ([], [], 1, 0)) – Geometry parameters [vertices, indices, radius, detail]

Geometry Parameters:

• vertices: Flat array of vertex coordinates [x1,y1,z1, x2,y2,z2, …]

• indices: Flat array of face indices

• radius: Radius of the polyhedron

• detail: Level of subdivision (0-5)

Example Usage:

from vuer.schemas import Polyhedron

vertices = [1, 1, 1, -1, -1, 1, -1, 1, -1, 1, -1, -1]
indices = [2, 1, 0, 0, 3, 2, 1, 3, 0, 2, 3, 1]
Polyhedron(args=(vertices, indices, 1, 0), key="poly1")

tag: str = 'Polyhedron'

class vuer.schemas.scene_components.Ring

Bases: SceneElement

Creates a ring (flat annulus) geometry.

Parameters:

args (tuple[float, float, int, int, float, float], optional, default (0.5, 1, 8, 1, 0, 2π)) – Geometry parameters [innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength]

Geometry Parameters:

• innerRadius: Inner radius of the ring

• outerRadius: Outer radius of the ring

• thetaSegments: Number of segments around the circumference (3-128)

• phiSegments: Number of segments along the radius (1-32)

• thetaStart: Start angle for first segment (radians, 0-2π)

• thetaLength: Central angle of the circular sector (radians, 0-2π)

Example Usage:

from vuer.schemas import Ring

# Simple ring
Ring(key="ring1")

# Thick ring with high detail
Ring(args=(0.3, 1, 64, 8, 0, 6.28), key="ring2")

tag: str = 'Ring'

class vuer.schemas.scene_components.Shape

Bases: SceneElement

Creates 2D shape geometry from paths.

Parameters:

args (tuple[any, int], optional) – Geometry parameters [shapes, curveSegments]

Geometry Parameters:

• shapes: Shape definition or array of shapes

• curveSegments: Number of curve segments (1-100)

Example Usage:

from vuer.schemas import Shape

Shape(args=(shape, 12), key="shape1")

tag: str = 'Shape'

class vuer.schemas.scene_components.Sphere

Bases: SceneElement

Creates a sphere geometry.

Parameters:

args (tuple[float, int, int, float, float, float, float], optional, default (1, 32, 16, 0, 2π, 0, π)) – Geometry parameters [radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength]

Geometry Parameters:

• radius: Radius of the sphere

• widthSegments: Number of horizontal segments (3-128)

• heightSegments: Number of vertical segments (2-64)

• phiStart: Horizontal starting angle (radians, 0-2π)

• phiLength: Horizontal sweep angle (radians, 0-2π)

• thetaStart: Vertical starting angle (radians, 0-π)

• thetaLength: Vertical sweep angle (radians, 0-π)

Example Usage:

from vuer.schemas import Sphere

# Simple sphere
Sphere(key="sphere1")

# High-poly sphere
Sphere(args=(1, 64, 32), key="sphere2")

# Hemisphere
Sphere(args=(1, 32, 16, 0, 6.28, 0, 1.57), key="hemisphere")

tag: str = 'Sphere'

class vuer.schemas.scene_components.Tetrahedron

Bases: SceneElement

Creates a tetrahedron geometry (4-faced polyhedron).

Parameters:

args (tuple[float, int], optional, default (1, 0)) – Geometry parameters [radius, detail]

Geometry Parameters:

• radius: Radius of the tetrahedron

• detail: Level of subdivision (0-5), higher values create more faces

Example Usage:

from vuer.schemas import Tetrahedron

# Simple tetrahedron
Tetrahedron(key="tetra1")

# Subdivided tetrahedron
Tetrahedron(args=(1, 2), key="tetra2")

tag: str = 'Tetrahedron'

class vuer.schemas.scene_components.Torus

Bases: SceneElement

Creates a torus (donut) geometry.

Parameters:

args (tuple[float, float, int, int, float], optional, default (1, 0.4, 8, 6, 2π)) – Geometry parameters [radius, tube, radialSegments, tubularSegments, arc]

Geometry Parameters:

• radius: Radius from the center of the torus to the center of the tube

• tube: Radius of the tube

• radialSegments: Number of segments around the tube (3-64)

• tubularSegments: Number of segments around the torus (3-128)

• arc: Central angle of the torus (radians, 0-2π)

Example Usage:

from vuer.schemas import Torus

# Simple torus
Torus(key="torus1")

# Thin high-detail torus
Torus(args=(2, 0.2, 16, 100, 6.28), key="torus2")

tag: str = 'Torus'

class vuer.schemas.scene_components.TorusKnot

Bases: SceneElement

Creates a torus knot geometry.

Parameters:

args (tuple[float, float, int, int, int, int], optional, default (1, 0.4, 64, 8, 2, 3)) – Geometry parameters [radius, tube, tubularSegments, radialSegments, p, q]

Geometry Parameters:

• radius: Radius of the torus

• tube: Radius of the tube

• tubularSegments: Number of segments along the tube (3-256)

• radialSegments: Number of segments around the tube (3-32)

• p: Number of times the knot winds around the torus (1-10)

• q: Number of times the knot winds through the torus hole (1-10)

Example Usage:

from vuer.schemas import TorusKnot

# Simple torus knot
TorusKnot(key="knot1")

# Complex knot pattern
TorusKnot(args=(1, 0.3, 128, 16, 5, 7), key="knot2")

tag: str = 'TorusKnot'

class vuer.schemas.scene_components.Tube

Bases: SceneElement

Creates a tube geometry along a path.

Parameters:

args (tuple[any, int, float, int, bool], optional, default (None, 64, 1, 8, False)) – Geometry parameters [path, tubularSegments, radius, radialSegments, closed]

Geometry Parameters:

• path: 3D curve path defining the tube’s centerline

• tubularSegments: Number of segments along the tube (2-256)

• radius: Radius of the tube

• radialSegments: Number of segments around the tube (2-32)

• closed: Whether the tube forms a closed loop

Example Usage:

from vuer.schemas import Tube

Tube(args=(path, 64, 0.5, 8, False), key="tube1")

tag: str = 'Tube'

class vuer.schemas.scene_components.Fog

Bases: SceneElement

Fog is a scene element that adds fog to the scene. This can be used to approximate depth.

Args:

color: The color of the fog. near: The distance to the near plane. far: The distance to the far plane.

Example Usage:

Fog(color=”green”, near=3, far=7)

tag: str = 'fog'

class vuer.schemas.scene_components.Wireframe

Bases: SceneElement

Creates wireframe geometry from another geometry.

Parameters:

args (tuple[any], optional) – Geometry parameters [geometry]

Geometry Parameters:

• geometry: Source geometry to convert to wireframe

Example Usage:

from vuer.schemas import Wireframe

Wireframe(args=(geometry,), key="wireframe1")

tag: str = 'Wireframe'

class vuer.schemas.scene_components.Splat

Bases: SceneElement

tag: str = 'Splat'

class vuer.schemas.scene_components.LumaSplats

Bases: SceneElement

tag: str = 'Splats'

class vuer.schemas.scene_components.SparkSplats

Bases: SceneElement

tag: str = 'SparkSplats'

class vuer.schemas.scene_components.Pcd

Bases: SceneElement

Represents a PCD (Point Cloud Data) element in a scene.

The Pcd class serves as a specialized scene element to handle PCD data. It inherits from the base SceneElement class and is used to define and represent point cloud data within the scene structure. The tag attribute is predefined as “Pcd” to denote its type in the scene representation.

Parameters:

• src (str, optional) – The source of the PCD. Can be a url or a local file.

• text (str, optional) – The text content of the PCD, allow one to load a scene from a string.

• buff (bytes, optional) – The binary content of the PCD file. This is the most efficient, because you are sending binaries..

• encoding (str, optional) – The encoding of the PCD file. Defaults to ‘ascii’.

• size (float, optional) – Optional float that sets the size of the points in the point cloud.

• matrix (tuple[float, ...]) – Optional 4x4 transformation matrix (16 values) to position and orient the point cloud.

• hide (bool, optional) – Optional flag to hide the point cloud. Defaults to False.

tag: str = 'Pcd'

class vuer.schemas.scene_components.CameraView

Bases: SceneElement

CameraView for rendering from arbitrary camera poses.

Parameters:

• fov (float, optional) – The vertical field of view of the camera. Defaults to 50.

• width (int, optional) – The width of the camera image. Defaults to 320.

• height (int, optional) – The height of the camera image. Defaults to 240.

• key (str, optional) – The key of the camera view. Defaults to “ego”.

• position (List[float], optional) – The position of the camera. Defaults to [0, 0, 0].

• rotation (List[float], optional) – The rotation of the camera. Defaults to [0, 0, 0]

• stream (str, optional) – The stream of the camera. Defaults to “ondemand”.

• fps (int, optional) – The frames per second of the camera. Defaults to 30.

• near (float, optional) – The near field of the camera. Defaults to 0.1.

• far (float, optional) – The far field of the camera. Defaults to 20.

• renderDepth (bool, optional) – Whether to render depth. If set, returns value[“depthFrame”]. Defaults to True.

• showFrustum (bool, optional) – Whether to show the frustum. Defaults to True.

• downsample (int, optional) – The downsample rate. Defaults to 1.

• distanceToCamera (float, optional) – The distance to the camera. Defaults to 2.

tag: str = 'CameraView'

class vuer.schemas.scene_components.SceneBackground

Bases: Image, SceneElement

Sets the background of the scene to a static image or texture.

Uses Three.js scene.background property to display an environment image. Suitable for static backgrounds like skyboxes or HDRI environments. For video backgrounds or high frame rate updates, use ImageBackground instead.

Parameters:

• src (str) – URL or path to the background image

• backgroundIntensity (float, optional, default -0.5) – Intensity multiplier for the background (used in path tracing)

• backgroundBlurriness (float, optional, default 0.0) – Blur amount for the background (0-1)

Example Usage:

from vuer.schemas import SceneBackground

# Simple image background
SceneBackground(
    src="https://example.com/skybox.jpg",
    key="bg1"
)

# HDRI environment with blur
SceneBackground(
    src="studio.hdr",
    backgroundBlurriness=0.3,
    key="bg2"
)

tag: str = 'SceneBackground'

class vuer.schemas.scene_components.ImageBackground

Bases: Image, SceneElement

Sets the background to a dynamically updating image plane.

Uses a camera-facing plane to display images, supporting high frame rates and video streams. The plane always faces the camera to maintain the background effect.

Parameters:

• src (str) – URL or path to the background image/video

• distance (float, optional) – Distance from camera to the background plane

• scale (float, optional) – Scale of the background plane

Example Usage:

from vuer.schemas import ImageBackground

# Static image background
ImageBackground(
    src="background.jpg",
    key="bg1"
)

# Video background
ImageBackground(
    src="background_video.mp4",
    key="bg2"
)

tag: str = 'ImageBackground'

class vuer.schemas.scene_components.HUDPlane

Bases: Image, SceneElement

Head-up display plane that always faces the camera.

Creates a plane that automatically orients itself to face the camera, similar to a billboard. Useful for UI elements, annotations, or information displays that should always be visible to the user.

Parameters:

• distanceToCamera (float, optional, default 10) – Distance from camera to the plane

• aspect (float, optional) – Aspect ratio (width/height) of the plane

• height (float, optional) – Height of the plane in world units

• position (tuple[float, float, float], optional) – Position [x, y, z] offset from camera

• rotation (tuple[float, float, float], optional) – Rotation [x, y, z] in radians

• fixed (bool, optional, default False) – Whether the plane stays fixed in screen space

• layers (int, optional) – Render layer for VR/AR contexts

Example Usage:

from vuer.schemas import HUDPlane

# Simple HUD plane
HUDPlane(
    distanceToCamera=5,
    height=1,
    key="hud1"
)

tag: str = 'HUDPlane'

class vuer.schemas.scene_components.VideoMaterial

Bases: Image, SceneElement

Material for displaying video from a URL.

Loads video from a file or URL and creates a material that can be applied to meshes. The video plays automatically when loaded.

Parameters:

• src (str) – URL or path to the video file

• loop (bool, optional, default True) – Whether to loop the video

• autoplay (bool, optional, default True) – Start playing automatically

Example Usage:

from vuer.schemas import VideoMaterial

VideoMaterial(
    src="video.mp4",
    loop=True,
    key="video-mat"
)

tag: str = 'VideoMaterial'

class vuer.schemas.scene_components.WebRTCVideoMaterial

Bases: Image, SceneElement

Material for displaying real-time video from WebRTC media stream.

Creates a material that displays live video from a WebRTC connection, useful for video conferencing, camera feeds, or screen sharing.

Parameters:

stream (str | dict) – WebRTC media stream ID or configuration

Example Usage:

from vuer.schemas import WebRTCVideoMaterial

WebRTCVideoMaterial(
    stream="camera-stream",
    key="webrtc-mat"
)

tag: str = 'WebRTCVideoMaterial'

class vuer.schemas.scene_components.VideoPlane

Bases: Image, SceneElement

Plane for displaying video content that faces the camera.

Combines HUDPlane behavior with video playback. The plane automatically faces the camera and displays video from a file or URL.

Parameters:

• src (str) – URL or path to the video file

• distanceToCamera (float, optional, default 10) – Distance from camera to the video plane

• height (float, optional) – Height of the video plane

• loop (bool, optional, default True) – Whether to loop the video

• autoplay (bool, optional, default True) – Start playing automatically

Example Usage:

from vuer.schemas import VideoPlane

VideoPlane(
    src="video.mp4",
    distanceToCamera=5,
    height=2,
    key="video1"
)

tag: str = 'VideoPlane'

class vuer.schemas.scene_components.WebRTCVideoPlane

Bases: SceneElement

Plane for displaying WebRTC video stream that faces the camera.

Displays real-time video from WebRTC on a camera-facing plane. Ideal for video calls, live camera feeds, or screen sharing.

Parameters:

• stream (str | dict) – WebRTC media stream ID or configuration

• distanceToCamera (float, optional, default 10) – Distance from camera to the plane

• height (float, optional) – Height of the video plane

Example Usage:

from vuer.schemas import WebRTCVideoPlane

WebRTCVideoPlane(
    stream="camera-feed",
    distanceToCamera=3,
    height=1.5,
    key="webrtc-video"
)

tag: str = 'WebRTCVideoPlane'

class vuer.schemas.scene_components.StereoVideoPlane

Bases: Image, SceneElement

Plane for displaying stereoscopic (3D) video content.

Displays side-by-side or top-bottom stereoscopic video for VR applications. Each eye sees the appropriate half of the video for 3D effect.

Parameters:

• src (str) – URL or path to the stereoscopic video file

• distanceToCamera (float, optional, default 10) – Distance from camera to the plane

• height (float, optional) – Height of the video plane

• layout (str, optional, default "side-by-side") – Stereo layout (“side-by-side” or “top-bottom”)

Example Usage:

from vuer.schemas import StereoVideoPlane

StereoVideoPlane(
    src="stereo_video.mp4",
    layout="side-by-side",
    key="stereo-video"
)

tag: str = 'StereoVideoPlane'

class vuer.schemas.scene_components.WebRTCStereoVideoPlane

Bases: SceneElement

Plane for displaying stereoscopic WebRTC video stream.

Combines WebRTC streaming with stereoscopic video display for real-time 3D video in VR applications.

Parameters:

• stream (str | dict) – WebRTC media stream ID or configuration

• distanceToCamera (float, optional, default 10) – Distance from camera to the plane

• height (float, optional) – Height of the video plane

• layout (str, optional, default "side-by-side") – Stereo layout (“side-by-side” or “top-bottom”)

Example Usage:

from vuer.schemas import WebRTCStereoVideoPlane

WebRTCStereoVideoPlane(
    stream="stereo-camera",
    layout="side-by-side",
    key="webrtc-stereo"
)

tag: str = 'WebRTCStereoVideoPlane'

class vuer.schemas.scene_components.ImagePlane

Bases: Image, SceneElement

Displays a static image on a plane in 3D space.

Creates a textured plane for displaying images at specific positions and orientations in the 3D scene. Unlike ImageBackground, this plane has a fixed position in world space.

Parameters:

• src (str) – URL or path to the image file

• position (tuple[float, float, float], optional) – Position [x, y, z] of the image plane

• rotation (tuple[float, float, float], optional) – Rotation [x, y, z] in radians

• scale (float | tuple[float, float, float], optional) – Scale of the image plane

• opacity (float, optional, default 1.0) – Transparency of the image (0-1)

Example Usage:

from vuer.schemas import ImagePlane

# Simple image plane
ImagePlane(
    src="image.png",
    position=[0, 1, -2],
    key="img1"
)

# Rotated and scaled image
ImagePlane(
    src="poster.jpg",
    position=[2, 1.5, -1],
    rotation=[0, 0.5, 0],
    scale=2,
    key="img2"
)

tag: str = 'ImagePlane'

class vuer.schemas.scene_components.Group

Bases: SceneElement

Container for grouping multiple 3D objects together.

Groups allow you to transform (move, rotate, scale) multiple objects as a single unit. Changes to the group’s position, rotation, or scale affect all children.

Parameters:

• position (tuple[float, float, float], optional) – Position [x, y, z] of the group origin

• rotation (tuple[float, float, float], optional) – Rotation [x, y, z] in radians

• scale (float | tuple[float, float, float], optional) – Scale of the group

• children (list, optional) – Child elements to include in the group

Example Usage:

from vuer.schemas import Group, Box, Sphere

# Group multiple objects
Group(
    Box(position=[-0.5, 0, 0], key="box1"),
    Sphere(position=[0.5, 0, 0], key="sphere1"),
    position=[0, 1, 0],
    rotation=[0, 0.5, 0],
    key="group1"
)

tag: str = 'VuerGroup'

class vuer.schemas.scene_components.HemisphereLight

Bases: SceneElement

Creates a hemisphere light that simulates ambient outdoor lighting.

Hemisphere lights emit light from directly above and below, with different colors for sky and ground. This creates more realistic outdoor lighting than ambient light alone.

Parameters:

• skyColor (str, optional, default "#ffffff") – Color of light from above

• groundColor (str, optional, default "#ffffff") – Color of light from below

• intensity (float, optional, default 1.0) – Light intensity

• helper (bool, optional, default False) – Show visual helper for debugging

• hide (bool, optional, default False) – Hide the light

Example Usage:

from vuer.schemas import HemisphereLight

# Basic hemisphere light
HemisphereLight(key="hemi1")

# Outdoor-style lighting (blue sky, brown ground)
HemisphereLight(
    skyColor="#87CEEB",
    groundColor="#8B4513",
    intensity=0.6,
    key="hemi2"
)

tag: str = 'HemisphereLight'

class vuer.schemas.scene_components.HemisphereLightStage

Bases: SceneElement

Composite lighting component that provides a complete default lighting setup.

In the default rendering mode, this component creates: - A HemisphereLight for ambient outdoor-style lighting - A DirectionalLight for shadows and directional illumination

In pathtracer mode, it uses: - An AmbientLight - Area and spot lights optimized for path-traced rendering

This matches the frontend’s HemisphereLightStage component and provides consistent lighting across Python and frontend scene definitions.

tag: str = 'HemisphereLightStage'

class vuer.schemas.scene_components.RectAreaLight

Bases: SceneElement

Creates a rectangular area light source.

Area lights emit light from a rectangular surface, producing soft, realistic shadows. Ideal for simulating windows, light panels, or studio lighting.

Parameters:

• color (str, optional, default "#ffffff") – Color of the light

• intensity (float, optional, default 1.0) – Light intensity

• width (float, optional, default 1.0) – Width of the light panel

• height (float, optional, default 1.0) – Height of the light panel

• lookAt (tuple[float, float, float], optional, default [0, 0, 0]) – Target position [x, y, z] for the light to face

• helper (bool, optional, default False) – Show visual helper for debugging

• hide (bool, optional, default False) – Hide the light

Example Usage:

from vuer.schemas import RectAreaLight

# Simple area light
RectAreaLight(
    position=[0, 2, 0],
    key="area1"
)

# Large soft light panel
RectAreaLight(
    width=4,
    height=2,
    intensity=2,
    position=[0, 3, -2],
    lookAt=[0, 0, 0],
    key="area2"
)

tag: str = 'RectAreaLight'

class vuer.schemas.scene_components.Stage

Bases: SceneElement

Creates a pre-configured lighting stage setup.

Provides automatic three-point lighting (key, fill, rim) commonly used in studio and product visualization. Simplifies lighting setup for common scenarios.

Example Usage:

from vuer.schemas import Stage

Stage(key="stage1")

tag: str = 'Stage'

class vuer.schemas.scene_components.Gamepad

Bases: SceneElement

Gamepad input controller component.

Captures standard gamepad (e.g., Xbox, PlayStation controllers) input and sends it via websocket to the Python backend.

Parameters:

index (int, optional, default 0) – Gamepad index to monitor (for multiple connected gamepads)

tag: str = 'Gamepad'

class vuer.schemas.scene_components.KeyboardMonitor

Bases: SceneElement

Monitors keyboard events in the browser and sends them to Python backend.

The KeyboardMonitor component listens for keyboard events (keydown, keyup, keypress) and transmits event details including key codes, modifier states, and repeat information through the WebSocket connection.

Parameters:

• enableKeyDown (bool, optional, default False) – Enable monitoring of keydown events

• enableKeyUp (bool, optional, default False) – Enable monitoring of keyup events

• enableKeyPress (bool, optional, default False) – Enable monitoring of keypress events

Event payload includes:

• key: Character value of the key pressed

• code: Physical key code (e.g., ‘KeyA’, ‘Space’, ‘ArrowUp’)

• shiftKey, ctrlKey, altKey, metaKey: Modifier key states

• repeat: Whether key is being held down

• isComposing: Whether key is part of a composition session

Example Usage:

@app.spawn(start=True)
async def main(session):
    session.set @ Scene(
        KeyboardMonitor(
            enableKeyDown=True,
            enableKeyUp=True,
            key="keyboard-monitor"
        )
    )

    # Handle keyboard events
    async for event in session.listen():
        if event.etype in ["KeyDown", "KeyUp"]:
            print(f"Key: {event.value['key']}, Code: {event.value['code']}")
            print(f"Modifiers: Shift={event.value['shiftKey']}, "
                  f"Ctrl={event.value['ctrlKey']}, "
                  f"Alt={event.value['altKey']}")

tag: str = 'KeyboardMonitor'

class vuer.schemas.scene_components.DirectionalLight

Bases: SceneElement

Creates a directional light that simulates sunlight.

Directional lights emit parallel rays from an infinite distance, like sunlight. The position determines the direction of the light rays.

Parameters:

• color (str, optional, default "#ffffff") – Color of the light

• intensity (float, optional, default 0.5) – Light intensity

• helper (bool, optional, default False) – Show visual helper for debugging

• hide (bool, optional, default False) – Hide the light

Example Usage:

from vuer.schemas import DirectionalLight

# Simple sun-like light
DirectionalLight(
    position=[5, 5, 5],
    intensity=1.0,
    key="sun"
)

# Warm sunset lighting
DirectionalLight(
    position=[10, 3, 0],
    color="#FFA500",
    intensity=0.8,
    key="sunset"
)

tag: str = 'DirectionalLight'

class vuer.schemas.scene_components.PointLight

Bases: SceneElement

Creates a point light that emits in all directions from a point.

Point lights simulate light bulbs or other omnidirectional light sources. Light intensity decreases with distance.

Parameters:

• color (str, optional, default "#ffffff") – Color of the light

• intensity (float, optional, default 20) – Light intensity

• radius (float, optional, default 0.1) – Visual radius of the light sphere (if showSphere is True)

• showSphere (bool, optional, default False) – Show sphere visualization at light position

• helper (bool, optional, default False) – Show visual helper for debugging

• hide (bool, optional, default False) – Hide the light

Example Usage:

from vuer.schemas import PointLight

# Simple point light
PointLight(
    position=[0, 2, 0],
    key="bulb1"
)

# Colored light with sphere visualization
PointLight(
    position=[1, 1, 1],
    color="#ff0000",
    intensity=30,
    showSphere=True,
    key="bulb2"
)

tag: str = 'PointLight'

class vuer.schemas.scene_components.SpotLight

Bases: SceneElement

Creates a spotlight that emits light in a cone.

Spotlights are useful for focused lighting effects, stage lighting, or flashlight simulations.

Parameters:

• color (str, optional, default "#ffffff") – Color of the light

• intensity (float, optional, default 0.5) – Light intensity

• distance (float, optional, default 0) – Maximum range of the light (0 = infinite)

• angle (float, optional, default π/3) – Maximum cone angle in radians (max: π/2)

• penumbra (float, optional, default 0) – Softness of the cone edge (0-1)

• decay (float, optional, default 2) – Light falloff rate with distance

• helper (bool, optional, default False) – Show visual helper for debugging

• hide (bool, optional, default False) – Hide the light

Example Usage:

from vuer.schemas import SpotLight
import math

# Simple spotlight
SpotLight(
    position=[0, 3, 0],
    key="spot1"
)

# Focused spotlight with soft edges
SpotLight(
    position=[2, 4, 2],
    angle=math.pi / 6,  # 30 degrees
    penumbra=0.5,
    intensity=1.5,
    key="spot2"
)

tag: str = 'SpotLight'

class vuer.schemas.scene_components.AmbientLight

Bases: SceneElement

Creates uniform ambient lighting from all directions.

Ambient lights illuminate all objects equally without shadows or directionality. Use sparingly as too much ambient light can make scenes look flat.

Parameters:

• color (str, optional, default "#ffffff") – Color of the light

• intensity (float, optional, default 0.5) – Light intensity

• hide (bool, optional, default False) – Hide the light

Example Usage:

from vuer.schemas import AmbientLight

# Subtle ambient fill light
AmbientLight(
    intensity=0.3,
    key="ambient1"
)

# Warm ambient lighting
AmbientLight(
    color="#FFF5E1",
    intensity=0.4,
    key="ambient2"
)

tag: str = 'AmbientLight'

class vuer.schemas.scene_components.Html

Bases: SceneElement

Usage:

as='div' // Wrapping element (default: 'div')
wrapperClass // The className of the wrapping element (default: undefined)
prepend // Project content behind the canvas (default: false)
center // Adds a -50%/-50% css transform (default: false) [ignored in transform mode]
fullscreen // Aligns to the upper-left corner, fills the screen (default:false) [ignored in transform mode]
distanceFactor={10} // If set (default: undefined), children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by a OrthographicCamera.
zIndexRange={[100, 0]} // Z-order range (default=[16777271, 0])
portal={domnodeRef} // Reference to target container (default=undefined)
transform // If true, applies matrix3d transformations (default=false)
sprite // Renders as sprite, but only in transform mode (default=false)
calculatePosition={(el: Object3D, camera: Camera, size: { width: number; height: number }) => number[]} // Override default positioning function. (default=undefined) [ignored in transform mode]
occlude={[ref]} // Can be true or a Ref<Object3D>[], true occludes the entire scene (default: undefined)
onOcclude={(visible) => null} // Callback when the visibility changes (default: undefined)
{...groupProps} // All THREE.Group props are valid
{...divProps} // All HTMLDivElement props are valid

tag: str = 'Html'

class vuer.schemas.scene_components.Pivot

Bases: SceneElement

Creates a pivot point for rotation and transformation.

A Pivot acts as a transformation anchor, allowing objects to rotate around a specific point rather than their own center. Useful for mechanical joints, doors, or any object that rotates around an axis.

Parameters:

• position (tuple[float, float, float], optional) – Position [x, y, z] of the pivot point

• rotation (tuple[float, float, float], optional) – Initial rotation [x, y, z] in radians

• children (list, optional) – Child elements that rotate around this pivot

Example Usage:

from vuer.schemas import Pivot, Box

# Door rotating around left edge
Pivot(
    Box(position=[0.5, 0, 0], args=(1, 2, 0.1), key="door"),
    position=[-2, 0, 0],
    rotation=[0, 1.57, 0],  # 90 degrees open
    key="door-pivot"
)

tag: str = 'Pivot'

class vuer.schemas.scene_components.Movable

Bases: SceneElement

A universal component that can be grabbed and moved using pointers, hands, controllers.

Parameters:

• offset – Optional [x, y, z] offset from the position. Defaults to [0, 0, 0].

• position – Optional [x, y, z] position. Defaults to [0, 1, -1].

• quaternion – Optional [x, y, z, w] quaternion rotation.

• rotation – Optional [x, y, z] euler rotation.

• scale – Optional float or [x, y, z] scale factor. Defaults to 0.1.

• handle – Optional float or [x, y, z] handle size. Overrides scale for the handle geometry.

• showFrame – Optional boolean to show coordinate frame. Defaults to True.

• wireframe – Optional boolean for wireframe rendering. Defaults to False.

• localRotation – Optional boolean to use local rotation. Defaults to False.

The component can be grabbed using: - Hand pinch gestures (left/right hand) - Controller trigger buttons (left/right controller)

When grabbed, the component follows the hand/controller movement and rotation. A coordinate frame can be displayed to visualize the current transformation.

The component supports both AR and VR modes through the WebXR versions of these components.

tag: str = 'Movable'

localRotation: bool = False

class vuer.schemas.scene_components.Clickable

Bases: SceneElement

A component wrapper that makes its children clickable and detects pointer interactions.

Listen to click events using the event handler system to respond to user interactions.

tag: str = 'Clickable'

class vuer.schemas.scene_components.Hands

Bases: SceneElement

tip Setting stream to True

Important: You need to set the stream option to True to start streaming the hand movement.

The Hand component offers a way to stream the current pose of the hand to the server. You can get the full pose of the hands by listening to the HAND_MOVE event. You can add flags left and right to specify which hand you want to track. The returned data looks like the following:

/**
 * Left and right pose are relative to the wrist transformations.
 */
export type HandsData = {
  left?: Float32Array;       // 25 * 16 values.
  right?: Float32Array;      // 25 * 16 values.
  leftState: HandState;
  rightState: HandState;
};

export type HandState = {
  pinch: boolean;
  squeeze: boolean;
  tap: boolean;

  pinchValue: number;
  squeezeValue: number;
  tapValue: number;
}

Matrix format

All 4x4 transform matrices used in WebGL are stored in 16-element Float32Arrays. The values are stored in the array in column-major order; that is, each column is written into the array top-down before moving to the next column to the right and writing it into the array. Therefore, for the array [a0, a1, a2, …, a13, a14, a15], the matrix looks like this:

For details, refer to the MDN documentation on [XR Rigid Body Transformation](https://developer.mozilla.org/en-US/docs/Web/API/XRRigidTransform/matrix)

Hand Landmarks

We follow the [XR Hand](https://developer.mozilla.org/en-US/docs/Web/API/XRHand) conventions, and return the landmarks in a single array of 25 * 16 values in the following order:

Hand joint	Index	Hand joint (continue)	Index
wrist	0	middle-finger-phalanx-distal	13
thumb-metacarpal	1	middle-finger-tip	14
thumb-phalanx-proximal	2	ring-finger-metacarpal	15
thumb-phalanx-distal	3	ring-finger-phalanx-proximal	16
thumb-tip	4	ring-finger-phalanx-intermediate	17
index-finger-metacarpal	5	ring-finger-phalanx-distal	18
index-finger-phalanx-proximal	6	ring-finger-tip	19
index-finger-phalanx-intermediate	7	pinky-finger-metacarpal	20
index-finger-phalanx-distal	8	pinky-finger-phalanx-proximal	21
index-finger-tip	9	pinky-finger-phalanx-intermediate	22
middle-finger-metacarpal	10	pinky-finger-phalanx-distal	23
middle-finger-phalanx-proximal	11	pinky-finger-tip	24
middle-finger-phalanx-intermediate	12

Usage Example:

from vuer import Vuer, VuerSession
from vuer.schemas import Hands
from asyncio import sleep

app = Vuer()


@app.add_handler("HAND_MOVE")
async def handler(event, session):
    print(f"Movement Event: key-{event.key}", event.value)


@app.spawn(start=True)
async def main(session: VuerSession):
    # Important: You need to set the `stream` option to `True` to start
    # streaming the hand movement.
    session.upsert @ Hands(stream=True, key="hands")

    while True:
        await sleep(1)

tag: str = 'Hands'

class vuer.schemas.scene_components.MotionControllers

Bases: SceneElement

MotionController for tracking XR controller poses and button states.

Parameters:

• key (str, optional) – Unique identifier for the controller.

• eventTypes (tuple or list, optional) – A tuple or list of events to track (e.g., “trigger”, “squeeze”).

• stream (bool, optional) – Whether to enable streaming of controller data.

• left (bool, optional) – Boolean indicating if the left controller should be tracked. defaults to None.

• right (bool, optional) – Boolean indicating if the right controller should be tracked.defaults to None

tag: str = 'MotionControllers'

class vuer.schemas.scene_components.Bodies

Bases: SceneElement

Bodies component for tracking full-body XR poses using the WebXR Body Tracking API.

Parameters:

• key (str, optional) – Unique identifier for the body tracking instance.

• stream (bool, optional) – Whether to enable streaming of body pose data to the server.

• fps (int, optional) – Frames per second at which body pose data should be sent.

• hideIndicate (bool, optional) – Whether to hide all visual indicators for tracked joints while still tracking data.

• showFrame (bool, optional) – Whether to display coordinate frames at each joint position.

• frameScale (float, optional) – Scale factor for the coordinate frames or joint markers.

tag: str = 'Bodies'

class vuer.schemas.scene_components.WebXRMesh

Bases: SceneElement

WebXR Mesh Detection component for real-world environment geometry detection in AR sessions.

This component enables detection and rendering of environmental geometry like walls, floors, and furniture in WebXR AR sessions. It supports automatic mesh change detection and on-demand RPC requests for mesh data.

Requirements:

• WebXR session must be initialized with ‘mesh-detection’ feature

• Only works in immersive-ar mode

• Device must support mesh detection API (e.g., Quest 3, ARCore)

Data Upload Modes:

1. Auto-Update Mode (when autoUpdate=True, default): - Automatically detects mesh changes (new/updated/removed meshes) - Pushes updates to server only when changes occur - Server receives ‘WEBXR_MESH_UPDATE’ events with mesh data - Efficient: Only sends data when needed, not continuously - Set autoUpdate=False to disable automatic updates

2. RPC Mode (always active): - Server can request mesh data on-demand using session.get_webxr_mesh() - Component responds with latest mesh data immediately - Useful for one-time queries or specific timing requirements - Works regardless of autoUpdate setting

Mesh Data Structure:

Each detected mesh contains:

• vertices: Float32Array of vertex positions (x, y, z coordinates)

• indices: Uint32Array of triangle indices

• semanticLabel: Optional semantic classification (e.g., “wall”, “floor”)

• matrix: 16-element transformation matrix (4x4 in column-major order)

Usage Example (Auto-Update Mode):

from vuer import Vuer, VuerSession
from vuer.schemas import WebXRMesh, Scene

app = Vuer()


@app.add_handler("WEBXR_MESH_UPDATE")
async def handle_mesh_update(event, session):
    meshes = event.value.get('meshes', [])
    print(f"Mesh update: {len(meshes)} meshes")
    for mesh in meshes:
        print(f"  Vertices: {len(mesh['vertices'])/3:.0f} points")
        print(f"  Semantic: {mesh.get('semanticLabel', 'unknown')}")


@app.spawn(start=True)
async def main(session: VuerSession):
    session.set @ Scene(
        children=[
            WebXRMesh(
                key="webxr-mesh",
                autoUpdate=True,  # Enable auto-update (default)
                color="blue",
                opacity=0.15
            )
        ]
    )
    await session.forever()

Usage Example (RPC Mode Only):

from vuer import Vuer, VuerSession
from vuer.schemas import WebXRMesh, Scene
from asyncio import sleep

app = Vuer()


@app.spawn(start=True)
async def main(session: VuerSession):
    session.set @ Scene(
        children=[
            WebXRMesh(
                key="webxr-mesh",
                autoUpdate=False,  # Disable auto-update
                color="green",
                opacity=0.2
            )
        ]
    )

    await sleep(2)  # Wait for meshes to be detected

    # Request mesh data on-demand using RPC
    mesh_data = await session.get_webxr_mesh(key="webxr-mesh")
    meshes = mesh_data.value.get('meshes', [])
    print(f"Retrieved {len(meshes)} meshes")

Parameters:

• key (str) – Unique identifier for the WebXR mesh component (default: “webxr-mesh”)

• color (str, optional) – Mesh material color (CSS color string or hex)

• opacity (float) – Material opacity for solid mesh (default: 0.15, range: 0.0-1.0)

• autoUpdate (bool) – Enable automatic updates when meshes change (default: True). When True, sends WEBXR_MESH_UPDATE events on changes. When False, only RPC mode is available.

tag: str = 'WebXRMesh'

class vuer.schemas.scene_components.Obj

Bases: SceneElement

tag: str = 'Obj'

class vuer.schemas.scene_components.CoordsMarker

Bases: SceneElement

Coordinates Marker Component.

Args:

position: A list of 3 numbers representing the position. rotation: A list of 3 numbers representing the rotation. matrix: A list of 16 numbers representing the matrix. Overrides position and rotation. scale: 1.0 headScale: 1.0 lod: Level of detail. The number of segments for the cone and the stem.

tag: str = 'CoordsMarker'

class vuer.schemas.scene_components.Arrow

Bases: SceneElement

Coordinates Marker Component.

Args:

matrix: A list of 16 numbers representing the matrix. Overrides position and rotation. position: A list of 3 numbers representing the position. rotation: A list of 3 numbers representing the rotation. scale: 1.0 headScale: 1.0 lod: Level of detail. The number of segments for the cone and the stem.

tag: str = 'Arrow'

class vuer.schemas.scene_components.Ply

Bases: SceneElement

Loads and displays PLY (Polygon File Format) 3D models.

PLY is a format for storing 3D point clouds and polygon meshes, commonly used for 3D scanning data and computer graphics.

Parameters:

• src (str, optional) – URL or path to the PLY file

• text (str, optional) – PLY file content as text string

• buff (bytes, optional) – Binary content of the PLY file

• assets (dict[str, str], optional) – Dictionary mapping texture names to blob URLs

• encoding (str, optional) – Text encoding for binary PLY files (default: “ascii”)

• onLoad (callable | str, optional) – Callback function or event name when model loads

• hide (bool, optional, default False) – Hide the model

Example Usage:

from vuer.schemas import Ply

# Load PLY from URL
Ply(
    src="https://example.com/model.ply",
    key="ply1"
)

# Load PLY with texture assets
Ply(
    src="scan.ply",
    assets={"texture.jpg": blob_url},
    key="ply2"
)

tag: str = 'Ply'

class vuer.schemas.scene_components.Glb

Bases: SceneElement

Glb Component

# this follows the material type

Parameters:

• materialType – Literal[“basic”, …]

• material –

  { side=0: inside, side=1: outsie, side=2: both.

}

tag: str = 'Glb'

class vuer.schemas.scene_components.Urdf

Bases: SceneElement

Loads and displays a robot model from URDF (Unified Robot Description Format) file.

URDF is the standard format for describing robot kinematics and dynamics. This component loads the URDF file and its associated mesh files (STL, DAE, OBJ, etc.) to create a 3D visualization of the robot.

Parameters:

• src (str) – URL or path to the URDF file

• text (str, optional) – URDF file content as text string (alternative to src)

• assets (dict[str, str], optional) – Dictionary mapping file paths to blob URLs for mesh assets

• workingPath (str, optional) – Base path for resolving relative paths in URDF

• jointValues (dict[str, float], optional) – Dictionary of joint names to angles/positions for setting robot pose

• parseVisual (bool, optional, default True) – Parse visual geometry elements

• parseCollision (bool, optional, default False) – Parse collision geometry elements

• packages (str | dict[str, str], optional) – ROS package path resolution (string path or dict mapping)

• color (str, optional) – Override color for all meshes

• material (dict, optional) – Material properties for robot meshes

• materialType (str, optional) – Type of material (“physical”, “standard”, etc.)

Example Usage:

from vuer.schemas import Urdf

# Load URDF from URL
Urdf(
    src="https://example.com/robot.urdf",
    key="robot1"
)

# Load URDF with joint configuration
Urdf(
    src="/path/to/robot.urdf",
    jointValues={
        "joint1": 0.5,
        "joint2": -0.3,
        "joint3": 1.2,
    },
    key="robot2"
)

# Load URDF with custom material
Urdf(
    src="robot.urdf",
    material=dict(
        roughness=0.01,
        metalness=0.2,
        color="#cccccc"
    ),
    key="robot3"
)

tag: str = 'Urdf'

class vuer.schemas.scene_components.Gripper

Bases: SceneElement

Creates a 3D robot gripper visualization with two parallel jaws.

The gripper is rendered as a cylindrical body with two opposing jaw assemblies (left: blue, right: red). Useful for robotics visualization and teleoperation.

Parameters:

• color (str, optional) – Base color for the gripper body

• pinchWidth (float, optional) – Half-distance between gripper jaws (default: 0.04)

• skeleton (bool, optional, default False) – Use skeletal (simplified) gripper model instead

• axes (bool, optional, default False) – Show coordinate axes helper at gripper origin

• showOrigin (bool, optional, default True) – Show green sphere at gripper origin point

• hide (bool, optional, default False) – Hide the gripper visualization

Example Usage:

from vuer.schemas import Gripper

# Simple gripper
Gripper(key="gripper1")

# Gripper with custom jaw width
Gripper(pinchWidth=0.06, key="gripper2")

# Gripper with axes and custom color
Gripper(
    color="#ff0000",
    axes=True,
    showOrigin=True,
    key="gripper3"
)

tag: str = 'Gripper'

class vuer.schemas.scene_components.SkeletalGripper

Bases: SceneElement

Creates a simplified skeletal gripper visualization.

A lightweight version of the Gripper component with simplified geometry, useful for performance-critical applications or when many grippers need to be rendered simultaneously.

Parameters:

• color (str, optional) – Color for the gripper

• pinchWidth (float, optional) – Half-distance between gripper jaws (default: 0.04)

• hide (bool, optional, default False) – Hide the gripper visualization

Example Usage:

from vuer.schemas import SkeletalGripper

# Simple skeletal gripper
SkeletalGripper(key="skel-gripper1")

# Skeletal gripper with custom width
SkeletalGripper(pinchWidth=0.05, key="skel-gripper2")

tag: str = 'SkeletalGripper'

class vuer.schemas.scene_components.Grid

Bases: SceneElement

Creates a ground reference grid for spatial orientation.

Displays a grid on the ground plane (XZ plane) to help visualize scale, position, and orientation in 3D space. Commonly used as a background element.

Example Usage:

from vuer.schemas import Grid, DefaultScene

# Grid is included by default in DefaultScene
DefaultScene(grid=True)

# Manual grid placement
Grid(key="custom-grid")

tag: str = 'Grid'

class vuer.schemas.scene_components.GrabRender

Bases: SceneElement

Captures the current rendered frame from the canvas.

A singleton component that grabs the current frame buffer and sends it to the Python backend. Useful for capturing screenshots or implementing custom rendering pipelines.

This component is a singleton and should only be instantiated once per scene. The key is automatically set to “DEFAULT”.

Example Usage:

from vuer.schemas import GrabRender

# Add to scene to enable frame capture
GrabRender()

tag: str = 'GrabRender'

key = 'DEFAULT'

class vuer.schemas.scene_components.TimelineControls

Bases: SceneElement

tag: str = 'TimelineControls'

class vuer.schemas.scene_components.PointerControls

Bases: SceneElement

Enables pointer-based interaction with scene objects.

Provides mouse/touch pointer controls for selecting and interacting with objects in the scene. Works with Clickable and Movable components.

Example Usage:

from vuer.schemas import PointerControls

PointerControls(key="pointer-controls")

tag: str = 'PointerControls'

class vuer.schemas.scene_components.RandomizedLight

Bases: SceneElement

A randomized light that internally runs multiple lights and jiggles them.

This component is typically paired with AccumulativeShadows for realistic soft shadows. When used with AccumulativeShadows, it automatically inherits the number of frames from the parent component.

Parameters:

• frames (int) – How many frames to jiggle the lights. Defaults to 1. If used with AccumulativeShadows, frames will be inherited from there.

• position (List[float]) – Light position [x, y, z]. Defaults to [0, 0, 0].

• radius (float) – Radius of the jiggle - higher values create softer light. Defaults to 5.

• amount (int) – Number of lights to use. Defaults to 8.

• intensity (float) – Light intensity. Defaults to 1.

• ambient (float) – Ambient occlusion factor - lower values mean less AO. Can be mixed with directional light. Defaults to 0.5.

• castShadow (bool) – Whether lights cast shadows. Defaults to True.

• bias (float) – Shadow bias value. Defaults to 0.

• mapSize (int) – Shadow map size. Defaults to 512.

• size (float) – Size of the shadow camera. Defaults to 10.

• near (float) – Shadow camera near plane. Defaults to 0.5.

• far (float) – Shadow camera far plane. Defaults to 500.

Example Usage:

RandomizedLight(
    frames=40,
    position=[5, 5, -10],
    radius=8,
    amount=8,
    intensity=1,
    ambient=0.5,
    castShadow=True
)

tag: str = 'RandomizedLight'

class vuer.schemas.scene_components.AccumulativeShadows

Bases: SceneElement

A planar, Y-up oriented shadow-catcher that accumulates soft shadows with zero performance impact after accumulation.

The shadow-catcher can operate in temporal mode (accumulating over time) or instantaneous mode. It must be paired with light sources and scene objects that cast shadows as children. Works best with RandomizedLight components for realistic raycast-like shadows and ambient occlusion.

Parameters:

• frames (int) – Number of frames to render. More frames yield cleaner results but take longer. Defaults to 40.

• blend (int) – Controls the refresh ratio when frames=Infinity. Defaults to 100.

• limit (int) – Limits rendered frames when frames=Infinity to regain performance once scene settles. Defaults to Infinity.

• scale (float) – Scale of the shadow plane. No default.

• temporal (bool) – Whether to accumulate shadows over time (more performant but has visual regression). Defaults to False.

• opacity (float) – Opacity of the shadow plane. Defaults to 1.

• alphaTest (float) – Threshold for discarding alpha pixels. Defaults to 0.65.

• color (str) – Shadow color. Defaults to black.

• colorBlend (float) – How much colors turn to black (0 is black). Defaults to 2.

• resolution (int) – Buffer resolution. Defaults to 1024.

Example Usage:

AccumulativeShadows(
    temporal=True,
    frames=100,
    scale=10,
    children=[
        RandomizedLight(amount=8, position=[5, 5, -10])
    ]
)

tag: str = 'AccumulativeShadows'

class vuer.schemas.scene_components.Trail

Bases: SceneElement

A declarative, three.MeshLine based Trails implementation. You can attach it to any mesh and it will give it a beautiful trail.

Parameters:

• width (float) – Width of the line. Defaults to 0.2.

• color (str) – Color of the line. Defaults to ‘hotpink’.

• length (float) – Length of the line. Defaults to 1.

• decay (float) – How fast the line fades away. Defaults to 1.

• local (bool) – Whether to use the target’s world or local positions. Defaults to False.

• stride (float) – Min distance between previous and current point. Defaults to 0.

• interval (int) – Number of frames to wait before next calculation. Defaults to 1.

• target (Any) – Optional target. This object will produce the trail.

• attenuation (callable) – A function to define the width in each point along it.

Note: If target is not defined, Trail will use the first Object3D child as the target. You can optionally define a custom meshLineMaterial to use.

Example Usage:

Trail(
    width=0.2,
    color='hotpink',
    length=1,
    decay=1,
    local=False,
    stride=0,
    interval=1
)

tag: str = 'Trail'

class vuer.schemas.scene_components.Center

Bases: SceneElement

Centers its children by calculating their boundary box.

The Center component automatically centers child elements by calculating their bounding box. It allows fine control over which axes to center along.

Parameters:

• top (bool) – Align to top edge instead of center on Y axis

• right (bool) – Align to right edge instead of center on X axis

• bottom (bool) – Align to bottom edge instead of center on Y axis

• left (bool) – Align to left edge instead of center on X axis

• front (bool) – Align to front edge instead of center on Z axis

• back (bool) – Align to back edge instead of center on Z axis

• disable (bool) – Disable centering on all axes

• disableX (bool) – Disable centering on X axis

• disableY (bool) – Disable centering on Y axis

• disableZ (bool) – Disable centering on Z axis

• precise (bool) – Use precise boundary box calculation (default: True)

Example Usage:

Center(
    top=True,
    left=True,
    children=[mesh]
)

tag: str = 'Center'

class vuer.schemas.scene_components.Billboard

Bases: SceneElement

Renders its children as a billboard that always faces the camera.

Parameters:

• follow (bool, optional) – Whether the billboard should follow the camera position (default: True)

• lockX (bool, optional) – Lock rotation on the X axis (default: False)

• lockY (bool, optional) – Lock rotation on the Y axis (default: False)

• lockZ (bool, optional) – Lock rotation on the Z axis (default: False)

Example Usage:

Billboard(
    follow=True,
    lockX=False,
    lockY=True,
    children=[mesh]
)

tag: str = 'Billboard'

class vuer.schemas.scene_components.Text

Bases: SceneElement

Renders 2D text in the scene with extensive styling and layout options.

Parameters:

• children (str) – The text content to render.

• characters (str, optional) – Restrict the set of characters to use for glyph generation.

• color (str, optional) – Text color.

• fontSize (float, optional) – Font size in world units.

• fontWeight (int or str, optional) – Font weight (number or string, e.g. ‘bold’).

• fontStyle (str, optional) – Font style, either ‘italic’ or ‘normal’.

• maxWidth (float, optional) – Maximum width of the text block before wrapping.

• lineHeight (float, optional) – Line height as a multiple of fontSize.

• letterSpacing (float, optional) – Additional spacing between letters.

• textAlign (str, optional) – Text alignment: ‘left’, ‘right’, ‘center’, or ‘justify’.

• font (str, optional) – Font URL or name.

• anchorX (float or str, optional) – Horizontal anchor: number or ‘left’, ‘center’, ‘right’.

• anchorY (float or str, optional) – Vertical anchor: number or ‘top’, ‘top-baseline’, ‘middle’, ‘bottom-baseline’, ‘bottom’.

• clipRect (list[float], optional) – Rectangle [minX, minY, maxX, maxY] to clip text rendering.

• depthOffset (float, optional) – Offset in Z to avoid z-fighting.

• direction (str, optional) – Text direction: ‘auto’, ‘ltr’, or ‘rtl’.

• overflowWrap (str, optional) – Wrapping behavior: ‘normal’ or ‘break-word’.

• whiteSpace (str, optional) – White space handling: ‘normal’, ‘overflowWrap’, or ‘nowrap’.

• outlineWidth (float or str, optional) – Outline width (number or string, e.g. ‘2px’).

• outlineOffsetX (float or str, optional) – Outline X offset (number or string).

• outlineOffsetY (float or str, optional) – Outline Y offset (number or string).

• outlineBlur (float or str, optional) – Outline blur radius (number or string).

• outlineColor (str, optional) – Outline color.

• outlineOpacity (float, optional) – Outline opacity (0-1).

• strokeWidth (float or str, optional) – Stroke width (number or string).

• strokeColor (str, optional) – Stroke color.

• strokeOpacity (float, optional) – Stroke opacity (0-1).

• fillOpacity (float, optional) – Fill opacity (0-1).

• sdfGlyphSize (int, optional) – SDF glyph size for rendering quality.

• debugSDF (bool, optional) – Show SDF debug overlay.

• glyphGeometryDetail (int, optional) – Level of detail for glyph geometry.

tag: str = 'Text'

class vuer.schemas.scene_components.Text3D

Bases: SceneElement

Renders 3D text using ThreeJS’s TextGeometry.

Text3D will suspend while loading the font data. It requires fonts in JSON format generated through typeface.json, either as a path to a JSON file or a JSON object. If you face display issues try checking “Reverse font direction” in the typeface tool.

Parameters:

• font (str) – Font URL or JSON object with font data

• smooth (float) – Merges vertices with a tolerance and calls computeVertexNormals

• lineHeight (float) – Line height in threejs units (default: 0)

• letterSpacing (float) – Letter spacing factor (default: 1)

You can align the text using the Center component:

Center(
    Text3D(
        "Hello world!",
        font="fonts/helvetiker.json",
        smooth=1,
        lineHeight=0.5,
        letterSpacing=-0.025
    )
)

tag: str = 'Text3D'

class vuer.schemas.scene_components.BackgroundColor

Bases: SceneElement

Sets a solid color background for the scene.

Changes the scene background to a uniform color. This is the simplest way to set a background and has minimal performance impact.

Parameters:

color (str, optional, default "#131416") – Hex color string for the background

Example Usage:

from vuer.schemas import BackgroundColor

# Dark background
BackgroundColor(color="#131416", key="bg")

# White background
BackgroundColor(color="#ffffff", key="bg")

# Custom color
BackgroundColor(color="#4A90E2", key="bg")

tag: str = 'BackgroundColor'

class vuer.schemas.scene_components.BBox

Bases: SceneElement

Renders a bounding box visualization using edge geometry.

Displays a wireframe box defined by minimum and maximum corner points. Useful for visualizing spatial bounds, collision boxes, or regions of interest.

Parameters:

• min (dict, optional, default {"x": -1, "y": -1, "z": -1}) – Minimum corner coordinates {x, y, z}

• max (dict, optional, default {"x": 1, "y": 1, "z": 1}) – Maximum corner coordinates {x, y, z}

• color (str, optional, default "0xffffff") – Color of the bounding box edges

• scale (float, optional, default 1.01) – Scale factor for the edges

Example Usage:

from vuer.schemas import BBox

# Simple bounding box
BBox(
    min={"x": -1, "y": 0, "z": -1},
    max={"x": 1, "y": 2, "z": 1},
    key="bbox1"
)

# Colored bounding box
BBox(
    min={"x": -2, "y": -2, "z": -2},
    max={"x": 2, "y": 2, "z": 2},
    color="0xff0000",
    key="bbox2"
)

tag: str = 'BBox'

class vuer.schemas.scene_components.Scene

Bases: BlockElement

tag: str = 'Scene'

class vuer.schemas.scene_components.DefaultScene

Bases: Scene

Default Scene that includes a basic setup of ambient lights.

Parameters:

• children (SceneElement, ...) – list of children elements to be rendered in the scene.

• rawChildren – list of children elements to be rendered in the scene.

• htmlChildren – list of children elements to be rendered in the scene.

• bgChildren – list of children elements to be rendered in the scene.

• show_helper – list of children elements to be rendered in the scene.

• startStep – list of children elements to be rendered in the scene.

• endStep – list of children elements to be rendered in the scene.

• up – list of children elements to be rendered in the scene.

• kwargs – list of children elements to be rendered in the scene.

Example Usage:

DefaultScene(
    # Ambient Light does not have helper because it is ambient.
    AmbientLight(intensity=1.0, key="default_ambient_light"),
    DirectionalLight(
        intensity=1, key="default_directional_light", helper=show_helper
    ),
    *children,
    rawChildren=rawChildren,
    htmlChildren=htmlChildren,
    bgChildren=[
        GrabRender(),
        *[
            # we use a key here so that we can replace the timeline controls via update
            TimelineControls(start=startStep, end=endStep, key="timeline")
            if endStep
            else None,
        ],
        PointerControls(),
        Grid(),
        *bgChildren,
    ],
    up=up,
    **kwargs,
)

Drei Components

class vuer.schemas.drei_components.SceneElement

Bases: BlockElement

class vuer.schemas.drei_components.Html

Bases: SceneElement

tag: str = 'Html'

class vuer.schemas.drei_components.Splat

Bases: SceneElement

tag: str = 'Splat'

class vuer.schemas.drei_components.Line

Bases: SceneElement

Renders a THREE.Line2 or THREE.LineSegments2 (depending on the value of segments).

Usage:

<Line
  points={[[0, 0, 0], ...]}       // Array of points, Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>
  color="black"                   // Default
  lineWidth={1}                   // In pixels (default)
  segments                        // If true, renders a THREE.LineSegments2. Otherwise, renders a THREE.Line2
  dashed={false}                  // Default
  vertexColors={[[0, 0, 0], ...]} // Optional array of RGB values for each point
  {...lineProps}                  // All THREE.Line2 props are valid
  {...materialProps}              // All THREE.LineMaterial props are valid
/>

tag: str = 'Line'

class vuer.schemas.drei_components.QuadraticBezierLine

Bases: SceneElement

Renders a THREE.Line2 using THREE.QuadraticBezierCurve3 for interpolation.

Usage:

<QuadraticBezierLine
  start={[0, 0, 0]}               // Starting point, can be an array or a vec3
  end={[10, 0, 10]}               // Ending point, can be an array or a vec3
  mid={[5, 0, 5]}                 // Optional control point, can be an array or a vec3
  color="black"                   // Default
  lineWidth={1}                   // In pixels (default)
  dashed={false}                  // Default
  vertexColors={[[0, 0, 0], ...]} // Optional array of RGB values for each point
  {...lineProps}                  // All THREE.Line2 props are valid
  {...materialProps}              // All THREE.LineMaterial props are valid
/>

You can also update the line runtime.

code:

const ref = useRef()
useFrame((state) => {
  ref.current.setPoints(
    [0, 0, 0],
    [10, 0, 0],
    // [5, 0, 0] // Optional: mid-point
  )
}, [])
return <QuadraticBezierLine ref={ref} />
}

tag: str = 'QuadraticBezierLine'

class vuer.schemas.drei_components.CubicBezierLine

Bases: SceneElement

Renders a THREE.Line2 using THREE.CubicBezierCurve3 for interpolation.

Usage:

<CubicBezierLine
  start={[0, 0, 0]}               // Starting point
  end={[10, 0, 10]}               // Ending point
  midA={[5, 0, 0]}                // First control point
  midB={[0, 0, 5]}                // Second control point
  color="black"                   // Default
  lineWidth={1}                   // In pixels (default)
  dashed={false}                  // Default
  vertexColors={[[0, 0, 0], ...]} // Optional array of RGB values for each point
  {...lineProps}                  // All THREE.Line2 props are valid
  {...materialProps}              // All THREE.LineMaterial props are valid
/>

tag: str = 'CubicBezierLine'

class vuer.schemas.drei_components.CatmullRomLine

Bases: SceneElement

Renders a THREE.Line2 using THREE.CatmullRomCurve3 for interpolation.

Usage:

<CatmullRomLine
  points={[[0, 0, 0], ...]}       // Array of Points
  closed={false}                  // Default
  curveType="centripetal"         // One of "centripetal" (default), "chordal", or "catmullrom"
  tension={0.5}                   // Default (only applies to "catmullrom" curveType)
  color="black"                   // Default
  lineWidth={1}                   // In pixels (default)
  dashed={false}                  // Default
  vertexColors={[[0, 0, 0], ...]} // Optional array of RGB values for each point
  {...lineProps}                  // All THREE.Line2 props are valid
  {...materialProps}              // All THREE.LineMaterial props are valid
/>

tag: str = 'CatmullRomLine'

class vuer.schemas.drei_components.Facemesh

Bases: SceneElement

Renders an oriented MediaPipe face mesh:

Parameters:

• points (MediaPipePoints, optional) – An array of 468+ keypoints as returned by google/mediapipe tasks-vision. Defaults to a sample face.

• face (MediaPipeFaceMesh, optional) – An face object as returned by tensorflow/tfjs-models face-landmarks-detection. This parameter is deprecated.

• width (int, optional) – Constant width of the mesh. Defaults to undefined.

• height (int, optional) – Constant height of the mesh. Defaults to undefined.

• depth (int, optional) – Constant depth of the mesh. Defaults to 1.

• verticalTri (Tuple[int, int, int], optional) – A landmarks tri supposed to be vertical. Defaults to [159, 386, 200]. See: https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection#mediapipe-facemesh-keypoints

• origin (Union[int, THREE.Vector3], optional) – A landmark index (to get the position from) or a vec3 to be the origin of the mesh. Defaults to undefined (i.e., the bbox center).

• facialTransformationMatrix (FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes[0], optional) – A facial transformation matrix, as returned by FaceLandmarkerResult.facialTransformationMatrixes. See: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results

• offset (bool, optional) – Apply position offset extracted from facialTransformationMatrix.

• offsetScalar (float, optional) – Offset sensitivity factor, less is more sensible.

• faceBlendshapes (FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes[0], optional) – Face blendshapes, as returned by FaceLandmarkerResult.faceBlendshapes. See: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results

• eyes (bool, optional) – Whether to enable eyes (note: faceBlendshapes is required for this). Defaults to True.

Usage:

const faceLandmarkerResult = {
    "faceLandmarks": [
      [
        { "x": 0.5760777592658997, "y": 0.8639070391654968, "z": -0.030997956171631813 },
        { "x": 0.572094738483429, "y": 0.7886289358139038, "z": -0.07189624011516571 },
        // ...
      ],
      // ...
    ],
    "faceBlendshapes": [
      // ...
    ],
    "facialTransformationMatrixes": [
      // ...
    ]
  },
}

const points = faceLandmarkerResult.faceLandmarks[0]

<Facemesh points={points} />

tag: str = 'Facemesh'

class vuer.schemas.drei_components.OrbitControls

Bases: SceneElement

Camera controls for orbiting, panning, and zooming around a target.

OrbitControls provides intuitive camera control through mouse/touch interactions. Included in the default scene in bgChildren to enable interactive camera controls.

Parameters:

• enableDamping (bool, optional) – Enable smooth damping (inertia). Default: False

• enablePan (bool, optional) – Enable panning. Default: True

• screenSpacePanning (bool, optional) – Pan in screen space rather than camera space. Default: True

• enableRotate (bool, optional) – Enable rotation/orbiting. Default: True

• enableZoom (bool, optional) – Enable zooming. Default: True

• makeDefault (bool, optional) – Make this the default controls. Default: True

• maxPolarAngle (float, optional) – Maximum polar angle in degrees (0-180). Default: 135

• minPolarAngle (float, optional) – Minimum polar angle in degrees (0-180). Default: 0

• maxDistance (float, optional) – Maximum zoom distance. Default: 1000

• minDistance (float, optional) – Minimum zoom distance. Default: 0

• zoomSpeed (float, optional) – Zoom speed multiplier. Default: 1.0

• rotateSpeed (float, optional) – Rotation speed multiplier. Default: 1.0

• panSpeed (float, optional) – Pan speed multiplier. Default: 1.0

Usage:

session.set @ Scene(
    Box(args=[0.2, 0.2, 0.2], key="box"),
    bgChildren=[
        OrbitControls(makeDefault=True, enableDamping=True, key="controls"),
    ],
)

tag: str = 'OrbitControls'

key = 'orbit-controls'

class vuer.schemas.drei_components.PerspectiveCamera

Bases: SceneElement

Perspective camera with field of view projection.

PerspectiveCamera defines the viewpoint and projection for rendering the 3D scene. Included in bgChildren to control the camera view.

This is optional.

Parameters:

• position (list[float], optional) – Camera position as [x, y, z]. Default: [0, 0, 0]

• rotation (list[float], optional) – Camera rotation in Euler angles. Default: [0, 0, 0]

• lookAt (list[float], optional) – Point the camera looks at [x, y, z]. Default: [0, 0, 0]

• near (float, optional) – Near clipping plane distance. Default: 0.1

• far (float, optional) – Far clipping plane distance. Default: 1000

• makeDefault (bool, optional) – Make this the default camera. Default: False

• active (bool, optional) – Whether this camera is active. Default: None

• fov (float, optional) – Vertical field of view in degrees (1-179). Default: 75

• zoom (float, optional) – Zoom factor. Default: 1.0

Usage:

session.set @ Scene(
    Box(args=[0.2, 0.2, 0.2], key="box"),
    bgChildren=[
        PerspectiveCamera(
            position=[2, 2, 2],
            lookAt=[0, 0, 0],
            fov=75,
            makeDefault=True,
            key="camera",
        ),
    ],
)

tag: str = 'PerspectiveCamera'

key = 'perspective-camera'

Physics Components

class vuer.schemas.physics_components.SceneElement

Bases: BlockElement

class vuer.schemas.physics_components.MuJoCoProvider

Bases: SceneElement

tag: str = 'MuJoCoProvider'

class vuer.schemas.physics_components.MuJoCo

Bases: SceneElement

tag: str = 'MuJoCo'

src: str

workDir: str = None

assets: List[str] = []

speed: float = 1.0

pause: bool = False

fps: int = 60

timeout: float = 0.0

threshold: float = 0.001

keyFrames: List[str] = []

visibile: List[int] = None

selfProvide = True

useLights = True

useMocap = True

gizmoScale = 0.3

unpauseOnDrag = (False,)

dragForceScale = (1.0,)

showDragArrow = (True,)

showDragForceText = (True,)

class vuer.schemas.physics_components.HandActuator

Bases: SceneElement

tag: str = 'HandActuator'

ctrlId = -1

offset = 0.01

low = 0.01

high = 1.0

cond = 'right-squeeze'

value = 'right:thumb-tip,right:index-finger-tip'

scale = 1.0

class vuer.schemas.physics_components.MotionControllerActuator

Bases: SceneElement

MotionControllerActuator component for actuating the MuJoCo simulation based on motion controller inputs.

Parameters:

• ctrlId (int) – The control ID in the MuJoCo simulation to actuate.

• low (float) – The minimum value for actuation.

• high (float) – The maximum value for actuation.

• cond (str) – The condition for actuation, e.g., ‘right-trigger’.

• scale (float) – The scaling factor applied to the input value for actuation.

tag: str = 'MotionControllerActuator'

ctrlId: int = -1

low: float = 0.0

high: float = 1.0

cond: str = 'right-trigger'

scale: float = 1.0

class vuer.schemas.physics_components.MjCameraView

Bases: SceneElement

MjCameraView for rendering from arbitrary camera poses.

Parameters:

• fov (float, optional) – The vertical field of view of the camera. Defaults to 50.

• width (int, optional) – The width of the camera image. Defaults to 320.

• height (int, optional) – The height of the camera image. Defaults to 240.

• key (str, optional) – The key of the camera view. Defaults to “ego”.

• position (List[float], optional) – The position of the camera. Defaults to [0, 0, 0].

• rotation (List[float], optional) – The rotation of the camera. Defaults to [0, 0, 0]

• fps (int, optional) – The frames per second of the camera. Defaults to 30.

• near (float, optional) – The near field of the camera. Defaults to 0.1.

• far (float, optional) – The far field of the camera. Defaults to 20.

• downsample (int, optional) – The downsample rate. Defaults to 1.

• distanceToCamera (float, optional) – The distance to the camera. Defaults to 2.

• movable (bool, optional) – Whether the camera can be moved by the user. Defaults to True.

• showCameraFrustum (bool, optional) – Whether to show the camera frustum in the scene. Defaults to True.

tag: str = 'MjCameraView'

movable = (True,)

showCameraFrustum = (True,)