モダングラフィックスのために構築
物理演算やアニメーションからプラグイン、フレームワーク統合まで、美しい2D・3Dグラフィックスアプリケーション構築に必要なすべて。
エンジン非依存
1つのシーングラフ、3つのレンダラー。シーンロジックを一度だけ記述し、Three.js（WebGL）、SVG、Canvas2Dでレンダリング — コード変更なしで自由に切り替え。
TypeScriptファースト
完全な型定義、インテリジェントな自動補完、完全な型安全性。すべてのAPIサーフェスが型付けされ、TSDocで文書化。
シーングラフ
ジオメトリ、マテリアル、カメラ、ライト、物理ボディ、アニメーターなどのアタッチ可能なコンポーネントを持つ階層的ノードベースアーキテクチャ。
物理演算とアニメーション
cannon-es物理演算をビルトイン。剛体、コライダー、ジョイント、レイキャスト。ブレンディング、クロスフェード、イージング、スプリングヘルパー付きキーフレームアニメーションシステム。
プラグインシステム
フォークせずにレンダラーを拡張。ThreeRenderer.usePlugin()でカスタムComponentHandlerを登録 — サードパーティーパッケージが新しいコンポーネントタイプを追加可能。
React & Vue バインディング
React JSXコンポーネントとVue 3コンポーザブルによる宣言的シーン構築。useFrame、useScene、自動管理されるライフサイクルフックでシームレスな統合。
コア機能
Oroya Animateはレンダリングだけではありません。アニメーション、インタラクション、ジェネレーション — すべて統一されたエンジン非依存APIから。
アニメーションシステム
AnimationClip、AnimationMixer、複数の補間モードによるキーフレームベースのアニメーション。位置、回転、スケール、色 — あらゆるプロパティを正確なタイミング制御でアニメーション。
インタラクティビティ
3Dのレイキャスティングと SVGのDOMイベント委任による組み込みイベントシステム。レンダラー間で統一されたAPIでシーン内のオブジェクトをクリック、ホバー、ドラッグ。
ジェネラティブアート
SvJsエンジンでアルゴリズミックアートを作成。パーリンノイズ、ガウス分布、SVGプリミティブで、ブラウザ上で直接有機的でプロシージャルなビジュアルを構築。
ブーリアン演算（CSG）
シンプルなジオメトリを組み合わせて複雑な形状を作成。Unionで形状を結合、Subtractで穴を開け、Intersectで重なる領域のみを保持 — すべて構成的立体幾何学で実現。
ライティングシステム
4種類のライトで3Dシーンを照明：均一な光のAmbient、太陽光のDirectional、電球のPoint、懐中電灯のSpot。完全なシャドウキャスティング対応。
1つのシーングラフ、3つのレンダラー
シーンロジックを一度だけ記述。Three.jsで没入型3D WebGL、SVGでスケーラブルなベクター、Canvas2Dで軽量ネイティブ2Dをレンダリング。
Three.jsレンダラー WebGL
@joroya/renderer-three
Three.jsとWebGLによる完全な3Dレンダリング。透視投影・正投影カメラ、PBRマテリアル、glTFモデル読み込み、リアルタイムインタラクションイベントをサポート。
SVGレンダラー Vector
@joroya/renderer-svg
軽量ベクターグラフィックスレンダリング。ジェネラティブアート、データビジュアライゼーション、インタラクティブダイアグラム、CSSスタイリング対応の解像度非依存グラフィックスに最適。
Canvas2Dレンダラー Canvas
@joroya/renderer-canvas2d
依存関係ゼロのブラウザネイティブ2Dレンダリング。UIオーバーレイ、HUD、プロシージャルパターン、2Dゲームに最適。完全なトランスフォーム階層とハードウェアアクセラレーションCanvas API。
シンプルでパワフルなAPI
直感的なTypeScriptファーストAPIでシーンを作成。ノードを追加し、コンポーネントをアタッチし、お好みのエンジンでレンダリング — すべて数行のコードで。
- ノードベースアーキテクチャによる階層的シーングラフ
- アタッチ可能なコンポーネント：ジオメトリ、マテリアル、カメラ
- シーンロジックを変更せずにレンダラーを交換
- 組み込みプリミティブ：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()始める準備はできましたか？
コアパッケージとお好みのレンダラーをインストール。1分以内に最初のシーンをレンダリングできます。
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()