components_skill

Overview

This skill documents the Vuer 3D component reference for building scenes: primitives, custom geometry, models, cameras, lighting, images, and interaction helpers. It explains component properties, common patterns, and how to compose objects for robotics and VR visualization. The guide focuses on practical usage and quick examples for common workflows.

How this skill works

Components are Python schema objects that map to three.js primitives and scene graph nodes. Each component accepts common transform and identity properties (key, position, rotation, scale, matrix, children) and component-specific args or src attributes. Compose components by nesting children inside groups or scenes, or attach interaction wrappers like Movable and Gripper.

When to use it

• Create simple shapes and collision proxies with primitives (Box, Sphere, Cylinder).
• Render scanned or programmatic geometry with TriMesh and PointCloud.
• Load robots and models using Urdf, Glb, Obj, Ply, Stl, Fbx, or Dae sources.
• Set up cameras and visualization frustums for debug views or VR with PerspectiveCamera and Frustum.
• Add lighting and backgrounds for realistic previews and presentation-ready scenes.

Best practices

• Always give components a unique key to simplify updates and diffing.
• Use common transform props (position, rotation, scale) for predictable scene composition; use matrix for batch transforms.
• For large meshes prefer Glb/PLY streams or PointClouds to keep runtime efficient.
• Wrap interactive elements in Movable or Gripper when enabling user manipulation or teleoperation testing.
• Place lights and an ImageBackground to improve readability when sharing screenshots or embedding in web views.

Example use cases

• Visualize a robot URDF with jointValues set for debugging grasp poses and kinematics.
• Compose a scene with Box, Sphere, and Cylinder primitives to prototype collision shapes and reachability.
• Render a scanned environment using PointCloud or TriMesh for mapping and localization demos.
• Load a Glb model at reduced scale for mixed-reality previews in WebXR sessions.
• Attach a PerspectiveCamera and Frustum to visualize camera fields of view and sensor placement.