Tutorials

Learn Oroya Animate step by step, from your first 3D scene to advanced generative art and multi-renderer techniques.

Beginner

Start here if you're new to Oroya Animate.

Hello Cube

10 min beginner

Create your first 3D scene with a rotating cube

Color Palette

15 min beginner

Multiple geometries, materials, and composition

Save & Load Scenes

10 min beginner

JSON serialization for persisting scenes

Visual editor (alpha)

10 min beginner

Tour of apps/editor — the React-based scene authoring tool that ships with v1.0.

Intermediate

Build on the basics with more complex scenes and renderers.

Solar System

20 min intermediate

Hierarchical transforms and parent-child animations

SVG Generative Art

20 min intermediate

SVG renderer and procedural generation

Cameras & Viewpoints

15 min intermediate

Camera positioning and dynamic viewpoints

SVG Gradients & Filters

25 min intermediate

Gradients, blur, drop-shadow, clip-paths and masks

SVG Animations

20 min intermediate

Declarative animations with animate and animateTransform

Keyframe Animation

25 min intermediate

AnimationMixer, KeyframeTrack and interpolation modes

Orbit Controls

15 min intermediate

Camera manipulation with orbit, pan and zoom

Tutorial 15: Canvas2D — Tu primer render 2D sin dependencias 🟢

intermediate

Physics: rigid bodies, joints, and collision events

20 min intermediate

Drop a stack of boxes onto a floor, link them with joints, and react to collisions — all from the Oroya scene graph.

Tutorial 16: Carga modelos 3D con el glTF Loader 🟡

intermediate

Animator: clip library, crossfade, and keyframe events

20 min intermediate

Drive named animation clips with play() / crossFade() and react to footstep-style keyframe events.

Tutorial 17: Boolean Operations — Crea formas complejas con CSG 🔴

intermediate

React bindings: <OroyaCanvas> and useFrame

15 min intermediate

Build a 3D scene from React JSX — declarative components, hooks, and per-frame updates.

Tutorial 18: Iluminación 3D — Ambient, Directional, Point y Spot 🟡

intermediate

Developer tools: Inspector, Input, and Assets

25 min intermediate

Debug overlay, action-mapped input, and a preloading asset cache — the three packages that turn a demo into an app.

Tutorial 19: Animaciones suaves con Cubic Spline 🔴

intermediate

Advanced

Push the boundaries with procedural generation and multi-renderer patterns.

Procedural City

30 min advanced

Algorithmic generation of complex scenes

Multi-Renderer

25 min advanced

Same scene rendered with multiple backends

SVG Interactive

25 min advanced

Interactive SVG with event delegation

3D Interactivity

25 min advanced

Raycasting and pointer events with ThreeRenderer

Plugins: extend the renderer without forking

20 min advanced