Ejemplos Interactivos
Explora ejemplos interactivos que demuestran las capacidades de Oroya Animate. Cada demo se ejecuta en tiempo real directamente en tu navegador.
glTF Animation
Carga de modelo .glb (BoxAnimated) y reproducción de animaciones usando AnimationMixer.
Colour Spiral
Espiral de puntos coloridos generados proceduralmente. Demuestra createSphere, fill con paleta de colores y posicionamiento polar.
Gradient Gallery
Barras con gradientes lineales verticales y círculos con gradientes radiales. Demuestra fillGradient lineal y radial.
Circle Overlay
Círculos translúcidos superpuestos creando profundidad. Demuestra opacity, strokeGradient y composición visual.
Gradient Sphere
Esfera con gradiente radial y silueta de ciudad superpuesta. Demuestra gradientes radiales complejos y strokeGradient en marcos.
Hello Cube
Cubo 3D con rotación quaternion suave y esferas orbitales. Configuración básica de escena, cámara y geometría.
Solar System
Sistema planetario con órbitas jerárquicas usando nodos pivot padre-hijo. Demuestra transforms anidados.
Color Palette
Figuras geométricas con diferentes formas, colores y velocidades. Muestra createBox, createSphere y temas de color.
Shape Grid
Grilla procedural con ola sinusoidal y colores por posición. Demuestra generación procedural y animación masiva.
Procedural City
Ciudad generada algorítmicamente con edificios, parque central y torre. Demuestra generación procedural y agrupación jerárquica.
Porto Pareto
Paisaje urbano generativo usando distribución de Pareto para alturas de edificios. Demuestra Gen.pareto y constrains.
Gaussian Distribution
Visualización de distribución normal (campana de Gauss). Demuestra Gen.gaussian y mapeo de colores.
Colourful Grids
Grilla con patrones recortados usando clipPath y decisiones probabilísticas con Gen.chance.
Interactive Galaxy
Sistema de partículas con efecto de paralaje que sigue al mouse. Demuestra trackCursor y reactividad.
PBR Material Showcase
Esferas y cubos con materiales PBR variando metalness, roughness y emissive. Demuestra las nuevas propiedades de Material para renderizado físico.
Orthographic Camera
Vista ortográfica isométrica de una grilla de torres animadas. Demuestra CameraType.Orthographic con perspectiva sin distorsión.
Interactive Cubes
Grilla 3x3 de cubos interactivos con componente Interactive y cursor pointer. Demuestra EventEmitter, Interactive y raycasting.
Interpolation Modes
Tres esferas animadas con AnimationMixer usando Linear, Step y CubicSpline. Compara visualmente los modos de interpolación de KeyframeTrack.
SVG Filters
Filtros SVG declarativos: Gaussian Blur progresivo y Drop Shadow con variaciones. Demuestra Material.filter con blur y dropShadow.
Clip-Path & Mask
Formas con clip-path (diamante, estrella) y mask (círculo, opacidad). Demuestra SvgClipPathDef y SvgMaskDef en Material.
SVG Native Animation
Animaciones SVG nativas con <animate> y <animateTransform>: pulse, rotate, scale, translate, skewX y combinadas.
Interactive Demo
Objetos interactivos con click, hover, cambio de color y animación. Demuestra el sistema de eventos e Interactive component.
Hover Showcase
5 efectos hover distintos: levitar, girar, crecer, cambio de color y pulsar. Cada objeto usa un cursor CSS diferente.
Click Playground
Click counter, toggle on/off, efecto de presión, ciclo de colores y explosión/reagrupación. Demuestra click, pointerdown y pointerup.
Wheel & Bubbling
Rueda del mouse para escalar objetos, event bubbling padre→hijo con stopPropagation(), y pointer tracking con pointermove.
Camera Viewpoints
Múltiples puntos de vista (orbital, frontal, cenital, lateral) sobre una escena con pilares y esferas. Demuestra posicionamiento y animación de cámaras.
SVG Showcase
Catálogo visual de capacidades SVG: gradientes lineales/radiales, filtros (blur, drop-shadow), clip-path, mask, paths Bézier y stroke gradient.
SVG Animations
Animaciones SVG nativas declarativas sin JavaScript: pulse (opacity), rotate, scale, color cycle, bounce (translate) y combinadas.
SVG Interactive
Grilla de figuras SVG interactivas con eventos click y hover. Usa renderToSVGElement con el componente Interactive para event delegation.
Nested Transforms
Jerarquía de transformaciones anidadas (parent → child → grandchild). Verifica que localMatrix + grupos SVG componen correctamente.
Generative Native
Arte generativo usando el wrapper nativo SvJs con elipses, control de iteraciones, hue y rotación.
Textures & Environment
PBR materials with textures (maps for diffuse, normal, roughness, metalness) and environment settings (fog, background).
Transform: LookAt
Demonstrates the lookAt() method. Watcher objects track a moving target in real-time.
Performance: Instancing
Renders 2000 dynamic cubes using InstancedMesh. Demonstrates high-performance rendering with matrix and color updates.
Lighting: Shadows
Directional light casting shadows from a sphere and cube onto a plane. Demonstrates shadow map support.
Post-FX: Neon City
Cyberpunk-style scene demonstrating Bloom and Tone Mapping post-processing effects on emissive materials.
Particles: Fire & Smoke
Particle system demonstration showing cpu-simulated fire and smoke effects.
Spatial Audio
3D positional audio. Wear headphones! The green cube emits sound as it orbits.
Physics: Falling Cubes
Cannon-es physics integration (RigidBody + Collider).
Animation: Bouncing Box
Basic animation demo using Animator component and manual updates.
Physics: Trigger Volumes
Sensor colliders fire trigger-enter / trigger-exit when bodies overlap them — without contact response. The zone glows when occupied.
Animator: Cross-fade between three clips
Hero cube cycles between idle / walk / spin clips using Animator.crossFade. Quaternion blending with nlerp + hemisphere correction.
Physics: Chain of joints
Five spheres on point-to-point constraints — Newton's-cradle-style swing with elastic collisions.
¿Quieres ver más ejemplos o crear el tuyo propio?