このコンテンツはまだお使いの言語では利用できません。英語版を表示しています。

チュートリアル

最初の3Dシーンから高度なジェネラティブアート、マルチレンダラーテクニックまで、Oroya Animateをステップバイステップで学びましょう。

初級

Oroya Animateが初めての方はここから。

Hello Cube

10 min beginner

回転するキューブで最初の3Dシーンを作成

カラーパレット

15 min beginner

複数のジオメトリ、マテリアル、コンポジション

シーンの保存と読み込み

10 min beginner

シーンを永続化するためのJSONシリアライゼーション

Visual editor (alpha)

10 min beginner

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

中級

より複雑なシーンとレンダラーで基礎を発展させましょう。

太陽系

20 min intermediate

階層的トランスフォームと親子アニメーション

SVGジェネラティブアート

20 min intermediate

SVGレンダラーとプロシージャル生成

カメラとビューポイント

15 min intermediate

カメラの配置とダイナミックビューポイント

SVGグラデーションとフィルター

25 min intermediate

グラデーション、ブラー、ドロップシャドウ、クリップパスとマスク

SVGアニメーション

20 min intermediate

animateとanimateTransformによる宣言的アニメーション

Keyframe Animation

25 min intermediate

AnimationMixer, KeyframeTrack and interpolation modes

Orbit Controls

15 min intermediate

Camera manipulation with orbit, pan and zoom

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.

Animator: clip library, crossfade, and keyframe events

20 min intermediate

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

React bindings: <OroyaCanvas> and useFrame

15 min intermediate

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

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.

上級

プロシージャル生成とマルチレンダラーパターンで限界に挑戦。

プロシージャルシティ

30 min advanced

複雑なシーンのアルゴリズム生成

マルチレンダラー

25 min advanced

同じシーンを複数のバックエンドでレンダリング

SVGインタラクティブ

25 min advanced

イベント委任によるインタラクティブSVG

3D Interactivity

25 min advanced

Raycasting and pointer events with ThreeRenderer

Plugins: extend the renderer without forking

20 min advanced