Tutoriales
Aprende Oroya Animate paso a paso, desde tu primera escena 3D hasta arte generativo avanzado y técnicas multi-renderer.
Principiante
Empieza aquí si eres nuevo en Oroya Animate.
Hola Cubo
Crea tu primera escena 3D con un cubo rotatorio
Paleta de Colores
Múltiples geometrías, materiales y composición
Guardar y Cargar Escenas
Serialización JSON para persistir escenas
Visual editor (alpha)
Tour of apps/editor — the React-based scene authoring tool that ships with v1.0.
Intermedio
Amplía los conceptos básicos con escenas y renderers más complejos.
Sistema Solar
Transformaciones jerárquicas y animaciones padre-hijo
Arte Generativo SVG
Renderer SVG y generación procedural
Cámaras y Vistas
Posicionamiento de cámaras y vistas dinámicas
Gradientes y Filtros SVG
Gradientes, blur, drop-shadow, clip-paths y máscaras
Animaciones SVG
Animaciones declarativas con animate y animateTransform
Keyframe Animation
AnimationMixer, KeyframeTrack and interpolation modes
Orbit Controls
Camera manipulation with orbit, pan and zoom
Tutorial 15: Canvas2D — Tu primer render 2D sin dependencias 🟢
Physics: rigid bodies, joints, and collision events
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 🟡
Animator: clip library, crossfade, and keyframe events
Drive named animation clips with play() / crossFade() and react to footstep-style keyframe events.
Tutorial 17: Boolean Operations — Crea formas complejas con CSG 🔴
React bindings: <OroyaCanvas> and useFrame
Build a 3D scene from React JSX — declarative components, hooks, and per-frame updates.
Tutorial 18: Iluminación 3D — Ambient, Directional, Point y Spot 🟡
Developer tools: Inspector, Input, and Assets
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 🔴
Avanzado
Lleva al límite con generación procedural y patrones multi-renderer.
Ciudad Procedural
Generación algorítmica de escenas complejas
Multi-Renderer
La misma escena renderizada con múltiples backends
SVG Interactivo
SVG interactivo con delegación de eventos
3D Interactivity
Raycasting and pointer events with ThreeRenderer
Plugins: extend the renderer without forking
Register a ComponentHandler that intercepts a custom component type and ships your own backend objects.