Agnóstico de Motor
Gráficos 2D/3D
para la Web
Una librería de grafos de escena TypeScript-first lista para producción, con física, animación, plugins y soporte multi-renderer. Construye una vez, renderiza en cualquier lugar.
pnpm add @joroya/core @joroya/renderer-threeConstruido para Gráficos Modernos
Todo lo que necesitas para crear impresionantes aplicaciones gráficas 2D y 3D — desde física y animación hasta plugins e integraciones con frameworks.
Agnóstico de Motor
Un grafo de escena, tres renderers. Escribe tu lógica de escena una vez y renderiza con Three.js (WebGL), SVG o Canvas2D — cambia libremente sin modificar código.
TypeScript-First
Definiciones de tipos completas, autocompletado inteligente y seguridad de tipos total. Cada superficie de API está tipada y documentada con TSDoc.
Grafo de Escena
Arquitectura jerárquica basada en nodos con componentes acoplables: geometría, materiales, cámaras, luces, cuerpos físicos, animadores y más.
Física y Animación
Física cannon-es integrada con rigid bodies, colliders, joints y raycasting. Sistema de animación con blending, crossfade, easing y helpers de spring.
Sistema de Plugins
Extiende el renderer sin forkearlo. Registra ComponentHandlers personalizados vía ThreeRenderer.usePlugin() — paquetes de terceros pueden agregar nuevos tipos de componentes.
Bindings React y Vue
Construcción declarativa de escenas con componentes JSX de React y composables de Vue 3. useFrame, useScene y hooks de ciclo de vida auto-gestionados.
Capacidades Principales
Oroya Animate va más allá del renderizado. Anima, interactúa y genera — todo desde una API unificada y agnóstica de motor.
Sistema de Animación
Animaciones basadas en keyframes con AnimationClip, AnimationMixer y múltiples modos de interpolación. Anima cualquier propiedad — posición, rotación, escala, color — con control preciso de timing.
Interactividad
Sistema de eventos integrado con raycasting para 3D y delegación de eventos DOM para SVG. Haz clic, hover y arrastra objetos en tu escena con una API unificada entre renderers.
Arte Generativo
Crea arte algorítmico con el motor SvJs. Ruido Perlin, distribuciones gaussianas y primitivas SVG para construir visuales orgánicos y procedurales directamente en el navegador.
Operaciones Booleanas (CSG)
Crea formas complejas combinando geometrías simples. Union fusiona formas, Subtract crea cavidades, e Intersect conserva solo las regiones superpuestas — todo con Geometría Sólida Constructiva.
Sistema de Iluminación
Ilumina tus escenas 3D con cuatro tipos de luz: Ambient para brillo uniforme, Directional para luz solar, Point para bombillas y Spot para focos. Soporte completo de sombras.
Un Grafo de Escena, Tres Renderers
Escribe tu lógica de escena una vez. Renderiza con Three.js para 3D WebGL inmersivo, SVG para gráficos vectoriales escalables, o Canvas2D para 2D nativo y ligero.
Renderer Three.js WebGL
@joroya/renderer-three
Renderizado 3D completo con Three.js y WebGL. Soporte para cámaras perspectiva y ortográficas, materiales PBR, carga de modelos glTF y eventos de interacción en tiempo real.
Renderer SVG Vector
@joroya/renderer-svg
Renderizado de gráficos vectoriales ligeros. Perfecto para arte generativo, visualización de datos, diagramas interactivos y gráficos independientes de resolución con soporte CSS.
Renderer Canvas2D Canvas
@joroya/renderer-canvas2d
Renderizado 2D nativo del navegador sin dependencias. Perfecto para overlays de UI, HUDs, patrones procedurales y juegos 2D. Jerarquía de transformaciones completa y Canvas API acelerado por hardware.
API Simple y Potente
Crea escenas con una API intuitiva TypeScript-first. Agrega nodos, acopla componentes y renderiza con el motor de tu elección — todo en pocas líneas de código.
- Grafo de escena jerárquico con arquitectura basada en nodos
- Componentes acoplables: geometría, materiales, cámaras
- Cambia renderers sin modificar la lógica de escena
- Primitivas integradas: box, sphere, cylinder, plane
import { Scene, Node, createBox, Material,
Camera, CameraType } from '@joroya/core'
import { ThreeRenderer } from '@joroya/renderer-three'
// Create a scene
const scene = new Scene()
// Add a camera
const camera = new Node('camera')
camera.addComponent(new Camera({
type: CameraType.Perspective,
fov: 60, near: 0.1, far: 200,
}))
camera.transform.position = { x: 0, y: 2, z: 5 }
scene.add(camera)
// Add a cube with material
const cube = new Node('cube')
cube.addComponent(createBox(1.5, 1.5, 1.5))
cube.addComponent(new Material({
color: { r: 0.29, g: 0.48, b: 1.0 }
}))
scene.add(cube)
// Render with Three.js
const renderer = new ThreeRenderer({
canvas: document.querySelector('canvas')!,
width: 800, height: 600,
})
renderer.mount(scene)
renderer.render()¿Listo para Comenzar?
Instala el paquete core y tu renderer preferido. Estarás renderizando tu primera escena en menos de un minuto.
pnpm add @joroya/core @joroya/renderer-three threeimport { Scene, Node, createBox, Material } from '@joroya/core'
import { ThreeRenderer } from '@joroya/renderer-three'
const scene = new Scene()
const cube = new Node('cube')
cube.addComponent(createBox(1, 1, 1))
cube.addComponent(new Material({ color: { r: 0.4, g: 0.5, b: 1 } }))
scene.add(cube)
const renderer = new ThreeRenderer({ canvas, width: 800, height: 600 })
renderer.mount(scene)
renderer.render()