生成コードで作る3Dモデル・BGM・効果音、共通のThree.js GLB Viewer、React Three Fiber製のTPS試作。
キャラクター制作の前に：リテイク再発防止ガイド。正面先行による厚み不足を避け、背中の量感・目の向き・衣服の接続を初期段階から確認するための手順です。
公開Playground — インストール不要で全モデルを表示・操作できます。
mainへのpushで、テスト・Viewerのビルド・GitHub Pagesへの公開を自動実行します。PRではテストのみ実行し、公開しません。生成済みのGLBを使うため、公開処理にBlenderは不要です。
just test-pagesで本番ビルドを/modeling-playground/配下に置いた状態を検証します。公開後の確認はPLAYGROUND_URL=https://mizchi.github.io/modeling-playground/ pnpm test:pages。モデルを編集した場合は再生成したGLBと付随する.asset.jsonもコミットしてください。
Pages検証では、モデル読込の完了（モデル名・「表示中」・エラーなし）を最大15秒待ちます。CIでSuzu再読込が既定の5秒を超えて失敗したため、GLB応答を6秒遅らせる回帰テストを含めています。固定時間の待機で成功扱いにせず、完了条件を検証します。
モデルごとに src/（形状・骨格・動作・生成スクリプト）と output/（GLB・テクスチャ・確認画像・Blenderファイル）を分離しています。生成物の名前・内容と Viewer の ?model= は維持しています。
human/models/<モデル>/：BASE-45、LUMI、Suzu、Ashley、ASTER、FES-256、旅人。human/直下は共通人体編集と専用 Viewer。robot/models/<モデル>/：RAVEN、BASTION、STRIX。models/<モデル>/：犬（犬種プリセットを含む）、ワイバーン、町、歩行スプライト。contracts/：付随する設定JSONの型と厳密な実行時検証。modeling/：共通の形状部品・骨格生成・モーション焼き込み・GLB/PNG出力・出力先解決。runtime/：DOMに依存しない再生・IK・横薙ぎ計算・ソケット追従・時間イベント。viewer/：共通Viewerの表示と入力。motion/：動画参照・キーフレーム編集、人体リグ接続、外部モーション取り込み。audio/：BGM・SEの作曲／合成コード、テスト、生成済みWAV・MP3・MIDI・譜面JSON、音源ライセンス。
生成コードはTypeScriptで、Node.js 24が .ts を直接実行します（tsx / ts-node 不要）。pnpm typecheck でstrict型検査、just test で型検査と回帰テストを実行します。
just models-jsでThree.js製モデルをまとめて再生成できます。設計とゲーム側への接続方法。
モデルのコピー・派生追加・出力先の規則はモデル単位の構成を参照してください。
media-studioの機能を audio/ に統合しました。試聴・音源・再生成の手順。採用済み3曲と5種のSEの生成コード・譜面を保持し、ゲームも生成したWAVを直接参照します。WAV・MP3はGit管理外です。新しいチェックアウトでは、FFmpegを用意して just audio-generate をテスト・開発サーバー・ビルドの前に実行してください。just audio-check でテストと既存音源の検証ができます。CIでは音源を生成してからテスト・配布ビルドを行います。
現在はプロトタイピングとして試行を重ね、本格設計はkagura接続時に行います。試作記録 に、役立ったこと・利用者の評価・カスタムビューとレイアウトの仮説を残しています。
just scene-editor で Scene Studio を起動。建物・敵・出撃地点の配置、Undo/Redo、JSON保存／読込、ライフルの反動・閃光・効果音のプレビューと、そのまま試遊する機能を備えています。IRON YARDには戦闘BGM・SEと180秒／3波の勝敗・再出撃を追加。kaguraへの統合は後で行い、Scene / Action / GameEventを独立した型として定義しています。just moonbit-bridge-check で同じJSONをMoonBitの mizchi/three に読み込む検証ができます。操作・設計・制限。
just motion-editor で モーション制作画面 を起動。動画のIN/OUT・同期コマ送り、全身IK/FK、キー登録・移動・削除、Undo/Redo、編集JSON・モーションGLBの出力に対応します。BASE-45 / 女性素体 / LUMIを切り替えられます。Hunyuan MotionのSMPL-H FBX取り込みは実験対応。just motion-generate --help でfal用ローカル生成CLIの使い方を表示。送信は --execute 必須で、APIキーをブラウザに渡しません。動画の自動姿勢推定は未実装です。just motion-check で検証。操作・構成・制限。
女性素体 BASE-45 F をhuman-viewerへ追加しました。「体型」で男性／女性を切り替え、髪・顔・編集値を維持できます。共通の頭・首・四角面・22ボーンを使い、身体は1,440三角形のまま。just human-female で再生成。GLB / OBJ / 正面 / 側面。
「体型の調整」で 胸の大きさ・腰の太さ（ウエスト）・筋肉量・脚の長さ・身長 を男女共通のスライダーで編集できます。値0は既存体型。脚は足首〜股関節を70〜130%、身長は全身を75〜125%に比例変更し、髪・骨格・表示も追従します。設定の保存・取り消し・旧JSONの読み込み・GLB出力に対応し、身体のポリゴン数は維持します。just human-check で体型とモーションを検証。
髪の選択に 黄色のサイドテール を追加。前髪を保ち、高い片側の結び目から肩の後ろへ流れるロングです。追加288三角形、男女共用。just human-side-tail で モーション付きGLB と 設定JSON を再生成。正面 / 背面。髪の物理演算は未実装です。
人体の編集は HUMAN専用Viewer へ。human/ でBASE-45 / LUMIの髪・顔・骨格・モーションを組み替え、鼻の高さ・顔の長さと幅・目の間隔を調整できます。just human-viewer で起動、just human-check で検証。構成・互換性と制限。既存モデルの生成コード・GLBは保持します。
4〜5等身のTポーズ（頭の短縮後は約4.9等身）。722頂点・720四角面、22ボーン。肩・股・親指・耳まで共有頂点でつなぎ、側面の厚みと関節の変形を確認するための無地のベースです。頭と額を短く丸め、目のループはテクスチャを貼るための浅い連続面に調整。こめかみから頬・顎へ続く輪郭の列と、額・下頬・顎下の補助ループを追加しています。顔外周は盛り上がった縁ではなく、側面へ傾きが続く曲面として接続。深い眼窩や独立した眼球状の盛り上がりは作りません。素体の製品用UV・テクスチャ・視線・まばたきは未制作。Viewerでは四角面のワイヤーを初期表示します。
顔テクスチャ確認用Viewerでは、同じ頂点・面・法線から切り出した頭部に、256pxの仮の目と口を貼って確認できます。診断用の正面投影UVであり、完成した顔デザインや全身用UVではありません。just base45で素体と確認用GLBを一緒に再生成します。
ローカルで表示 / Blender編集用 / 四角面OBJ / リグ付きGLB / 仕様・再利用手順。just base45で再生成、just base45-blendでネイティブBlenderファイルも再生成できます。
顔改訂では、口の下に立った面を挟んでから顎先へ丸め、鼻先を少し前へ出しています。さらに共通素体へ耳輪と浅いくぼみを持つ耳を追加（左右合計52三角形増）。LUMIにも同じ素体を反映しています。
素体の初回チェックポイントは 29e4571。現在は上記の顎・鼻・耳の改訂済みBASE-45を使い、LUMI側では顔・身体の頂点位置と法線を変えずに256pxの顔テクスチャと、独立した金髪レイヤーショート＋アホ毛を追加。目には上アイライン、青緑の虹彩グラデーション、大小の反射光を描画。頭頂に量感を持たせ、サイドと後頭部には後ろへ流れる毛束を配置。重複する束・断面・毛先を簡略化した髪に、頬から顎へ沿う独立したおくれ毛2束を追加し、髪は710三角形。前髪は幅広い5束に整理。強い縞状の頂点カラーは128pxの柔らかい毛流れテクスチャに置き換えています。主な横髪を耳の後ろへ流し、手前のおくれ毛で顔の輪郭を部分的に覆う構成。全体2,150三角形・約110.9 KiB。身体22＋髪31ボーン。髪には将来の物理制御用ボーンがありますが、物理ソルバーは未実装です。
ローカルで表示 / GLB / 斜め / 斜め下 / 後頭部 / 仕様。just lumiで再生成。BASE-45の生成済みファイルは上書きしません。
LILAを残した独立試作。小さい顔、短い首、束の稜線をメッシュに作り込んだ金髪ロング＋アホ毛。頭と髪は独立して生成します。888三角形・約39.6 KiB、身体16＋髪16ボーン。髪の5系統を曲げる制御と物理接続用設定を用意。物理ソルバー・歩行・IKは未実装。
ローカルで表示 / GLB / 斜め / 顔 / 曲げ確認。just asterで再生成。仕様と参考資料。
約3等身、丸い頬と尖った前髪、左右の髪束を持つキャラクター。頭と髪を独立させ、目と口は256×256のテクスチャアトラスで表現。表情を変えても顔の形は変わりません。
- ローカルで表示 / GLB / 斜め / ウインク
- 426三角形・約17.5 KiB。上限緩和後の版であり、厳密な256三角形以内ではありません。
- 通常・笑顔・怒り・驚き・まばたき・ウインクを専用UIで切り替え。表情アトラス。
just fes256で再生成。構成・使い方・参考記事。
頭と目を大きく、胴を短く幅広に、脚をさらに短くした別プリセット。元のPONはそのまま残しています。618三角形・約22.2 KiB、17ボーンと待機モーションは共通です。
短い脚・長い胴・大きな耳・短い尾を持つ、590三角形・約21 KiBのコーギー。MUGIと同じ生成コード・17ボーン・待機モーションを使い、体型と配色のプリセットだけで作り分けています。
- ローカルで表示 / GLB / 斜め / 側面
just corgiで再生成。メッシュ／材質各1個、テクスチャなし。元のMUGIのGLBは変更せず維持しています。- 共通化と犬種差分。
Idle／Rest付き。歩行・走行・IKは未実装です。
立ち耳・白い口元と足先・巻き尾で特徴を出した柴犬風。630三角形、メッシュ／材質各1個、17ボーンと待機モーション込みで約22 KiB。テクスチャなし、共有頂点と8ビット色・ウェイトで小さくしています。
- ローカルで表示 / GLB / 斜め / 側面 / 骨格
Idleで小さな首かしげと尻尾振り、Restで静止。四脚・首・尾のリグ付き。歩行・走行・IKは未実装。just dogで再生成。軽量化・構成・制約。800三角形・32 KiBを上限としてテストします。
翼を前肢とする二脚型。青灰色の皮膚と黄土色の翼膜、細い胴、S字の首、長い尾を持つ29ボーンのリグ付きモデルです。静止時の翼幅約14.6 m、3,362三角形。正面だけでなく側面・背面にも胸郭と翼の奥行きを残しています。
- ローカルで表示 / GLB / 斜め / 側面 / 背面
just wyvernで再生成。配色と比率はmodels/wyvern/src/definition.ts、造形はmodels/wyvern/src/model.ts。Hoverは1.8秒周期の空中羽ばたき。肩が先に動き、翼爪から先の翼全体が少し遅れて上下します。左右4本ずつの翼指は中ほどから軽くしなり、翼膜も追従。胴の上下動、脚の引き込み、首と尾の揺れを含みます。Restで元の地上姿勢に戻せます。- 羽ばたき / 打ち下ろし / 骨格 / 造形・検証・制約。前進・離着陸・歩行・IKは未実装です。
鋭角ヘッド、青灰色の装甲、双肩砲を持つ四脚型。28ボーンの剛体リグで、右前＋左後／左前＋右後を交互に持ち上げる対角ペア歩行。腰を低くし、静止時の膝も約83°に折り畳んでいます。
- ローカルで再生 / GLB / 斜め / 骨格
Idleは待機、Walkはその場歩行、Advanceは約1.16 m前進する一回再生。2.4秒周期で、床に対する足の接地はAdvanceで確認できます。Boostは浮上・前傾加速・着地まで3.2秒で4.8 m前進。Viewerで一時停止して足先・膝・腰をIK操作できます。- 対角ペアが同期し、切替時には4本接地。足裏水平・固定脚長を維持します。2ボーンIKの結果を60 Hzで焼き込み、普通のGLBアニメーションとして再生します。
just strixでGLBと骨格規格を再生成。設計・歩行仕様・検証・制約。地形対応やパーツ交換UIは未実装です。
ブラウザでプレイ / ローカルで操作。STRIXを操作し、BASTIONを3機配置した工業区画を探索します。WASD移動・マウス視点・Shiftブースト・Esc停止。建物との衝突とカメラの壁へのめり込み防止を含みます。
腰から上は常に中央の注視点へ向き、脚部は前後を区別せず移動軸へ最小回転で合わせます。前後・左右の反転で180度旋回せず、後退時は逆歩行します。歩行3.2 m/s・ブースト14.4 m/s。カメラを引いて自機を画面下側に配置し、前方を狙いやすくしています。
Space短押しでジャンプ、長押しで上昇ブースト。左クリックでライフル連射、E長押しで最大3機をロックし、離すと各2発の追尾ミサイルを斉射します。ミサイルは上向きの弧から追尾へ移行。命中・HP・撃破に対応し、Escメニューから標的もリセットできます。敵は静止標的で、反撃はまだありません。
React Three Fiber／React／TypeScript製。just game-checkで検証。操作・構成・制約。
RAVENとは別の地上重装型ロボット。傾斜装甲、厚い胸背部、油圧機構、幅広い接地脚、左右非対称の銃器・肩武装を持つオリーブドラブの機体です。
- ローカルで表示・交換 / GLB / 斜め / 側面 / 背面
- 頭・胴・左右の腕／脚・背部・左右の手／肩武装の11モジュールをViewerで交換。「構成をGLBで保存」で書き出し、再び開いて編集できます。
just bastionで標準構成と接続規格JSONを再生成。約15,200三角形、テクスチャ内包。- 造形・交換規格・検証・制約。現段階は静止アセンブリで、リグ・歩行アニメーション・任意の外部パーツ読込は未実装です。
公開スプライト実験ページ / ローカル再生プレビューで、簡単な3D素体の歩行を8方向から確認できます。32×48px、8コマ、共通の15色＋透明。画像生成でコマを個別に描かず、同じ骨格・歩行位相から決定的にラスタライズします。
just sprite-walk：色分け／単色素体の透過PNGと動作JSONを再生成。- 左右の色分け、コマ送り、速度変更、骨格表示、接地マーカー、移動する地面。
- 8・4・3・2頭身と元の素体を切替可能。4種類を同じ身長・方向・位相で横並び比較し、頭身別にPNG・骨格JSONを出力。初期表示は4頭身。8頭身の小さな頭部は固定ピクセルパーツにし、丸めによる大きさの揺れを抑えています。
- 仕様・制約・次の工程。完成キャラクターではなく、接地と歩行の検証用です。
- WebKitのプレビューで別サイズのコマが混ざって見える報告があります。Chromeでは再現せず、原因は未特定・未修正です。現時点ではChromeでの確認を推奨します。
『ベイグラントストーリー』の添付資料をもとに、アシュレイ・ライオットを Three.js で再構成した静止モデル。3,182 三角形・約 212 KB。256×256 の描画コード製テクスチャを GLB に埋め込み、別ファイルなしで表示できます。
- ローカル Viewer / GLB / アトラス PNG / 顔 / 横顔 / 背面 / 斜め後ろ
- 額に落ちる折れた前髪、後方へ流れる跳ね毛、襟足へ絞る後頭部。低い眉・太い上まぶた・暗い瞳で目元を調整。顎から耳への傾斜、前傾する首、胸郭・腰・骨盤が作る S 字を立体化しています。
- 肩・胸郭の厚みと細い腰の対比、前後で異なる白布、腰の革パネルと暗い手甲。UV 領域とピクセル描画を分け、形状と表面を独立して修正できます。
just ashleyで GLB と確認用 PNG を再生成。共通 Viewer の「再読み込み」で更新、「背面」ボタンで後ろから比較できます。- 特徴の整理・資料の解釈・修正履歴・テクスチャの仕組み。原作データの抽出ではなく近似再構成で、リグ・モーション・PS1 特有の画面効果は未実装です。
鋭角のセラミック装甲、青黒い内部フレーム、背面の双発ブースター、脚底ノズル、右腕のブレード、左腕の小型シールドを持つ人型ロボット。Three.jsで生成した26ボーンのリグ付きGLBです。
- ローカルViewer / GLB / 浮遊姿勢 / 側面 / 構え / 振り抜き
Hover：2.0秒のループ。床から浮いた姿勢で上下動し、ブースターの噴射長が脈動します。Boost：2.4秒。前傾・噴射増大・加速・減速を伴い、+Z方向へ4.8 m移動するルートモーションです。BladeSlash：2.1秒・60 fps。低い溜めから噴射を強め、左右の脚を開いて約3.55 m前方へ飛び込み、右外側から前方を大きく横薙ぎします。腰と胴体を斬撃方向へひねり、肩装甲を開いて肘を下げ、刃と切断面は水平に保ちます。振り抜き後は移動先で減速して浮遊姿勢に戻り、開始位置へは巻き戻しません。- 装甲は各頂点を1本のボーンへ100%ウェイト付けした実際のSkinnedMeshです。関節は動きますが金属は曲がりません。噴射はボーンのスケールで変化する形状で、流体・粒子シミュレーションや攻撃の当たり判定はありません。IK操作は未実装です。
robot/models/raven/src/definition.tsが骨格・ソケット・判定形状・噴射・攻撃時間を定義し、robot/models/raven/src/model.tsが形状、robot/models/raven/src/motion.tsが時間に対する姿勢を担当。just ravenでGLBと付随設定を同時生成します。実際のゲーム用衝突処理・粒子描画はまだ実装していません。extras.groundLevelを共通Viewerが読み、浮いたモデルとは独立した床を配置します。extras.animationModesにより加速と斬撃は1回再生して停止し、「再生」で最初からやり直せます。他のGLB Viewerではループ設定を別途指定してください。- GLB検証、ウェイト、全フレームの有限な頂点・床との隙間、ホバリングのループ接続、加速距離、実際のブレード頂点の移動と剛性を自動テストしています。横薙ぎは生成前のモデルと再読込したGLBの両方を120 Hzでサンプルし、刃の水平と大きな弧、右前腕・ブレードと他の装甲の非交差を各部品の有向境界ボックスで検査します（接続する右上腕・右手は除外）。
濃紺のボブヘア、紫の瞳、藤色のワンピース、アイボリーの襟と靴下、星の髪飾り。高さ約1.66 mの静止モデルです。Miloとは別のキャラクターで、Blender・Pythonを使わずThree.jsだけで生成しています。
- Viewerで開く / GLB / 全身 / 顔アップ / 側面
- 目は球体ではなく顔の曲面に沿うアーモンド形の面。縦長の虹彩・瞳孔、上まぶたの輪郭、少数のハイライトでアニメ調にしています。虹彩のグラデーションは頂点色で、画像テクスチャへの依存はありません。
human/models/suzu/src/model.tsに顔の輪郭、目、髪束、服、配色を定義。human/models/suzu/src/geometry.tsは輪郭の立体化、髪束、曲面に沿う薄い面などの共通部品です。生成処理はDOMに依存せず、Nodeとブラウザから同じcreateSuzu()を呼べます。- 側面から薄く見えた初稿を修正し、頭部の前後幅を左右幅とほぼ同じに、胴体の奥行きを初稿の1.45倍にしました。頭は顔を単純に引き伸ばさず、後頭部側にボリュームを追加。
SUZU.torsoDepthScaleで服の奥行きを調整できます。 just suzuでThree.jsのGLTFExporterからhuman/models/suzu/output/suzu.glbを再生成し、Viewerの「再読み込み」で反映します。GLTFExporter公式仕様- リグ・アニメーション・表情モーフは未実装。目の発色を保つため一部にunlitマテリアルを使い、髪・肌・服は通常のPBRマテリアルです。輪郭線付きのフル・トゥーンシェーダーではありません。
- テストではGLBの妥当性、部品名、有限な頂点と単位法線、目が顔の中に埋まらないことを検査。E2Eで既存Viewerによる表示、顔へのフォーカス、モバイル表示を確認します。
青緑の上着、黄色いスカーフ、革のブーツ、リュックを持つ人型キャラクター。高さ約2.11 mのデフォルメモデルです。
- 歩行をViewerで見る
- アニメーション付きGLB / Blender / 歩行姿勢
- 18ボーンと正規化した頂点ウェイト。腰・背骨・首・頭・左右の腕、手、脚、足を制御します。指や表情の個別ボーンはありません。
Walkは30 fps、36フレーム区間＝1.2秒のその場歩行です。前進するルートモーションは含みません。- 歩行の数値パラメータは
human/models/traveler/src/gait.py、骨格・スキニング・キーフレーム生成はhuman/models/traveler/src/rig_character.py。just walkでGLB・blend・PNGを再生成します。 - 足の接地期間と遊脚期間を分け、足の目標位置から2本の脚ボーンの姿勢を計算してキーフレームに焼き込みます。足首は水平に保つ簡単な歩行で、つま先の蹴り出しや衣服の物理シミュレーションは含みません。
- Blenderファイルには編集可能な骨格と
Walkアクションを保存しています。静止版は別ファイルとして維持します。
- IKをViewerで試す
- GLB / Blender / Viewerでの屈伸
- 手足・腰の目印をドラッグすると姿勢が追従します。青い膝・肘のポールは曲がる方向を指定します。ドラッグはカメラに平行な面内の移動で、奥行きは視点変更またはX/Y/Zスライダーで調整できます。
- 「しゃがむ」で腰を12 cm下げ、足先を固定した屈伸を確認できます。「FK」で各関節を直接回転。「ポーズをリセット」で初期状態に戻ります。
- Blenderでは
CTRL_Hips、CTRL_LeftFoot等を移動し、POLE_*で曲がる方向を調整。リグのカスタムプロパティIKを1でIK、0でFKに切り替えます。手足ターゲットの回転にも追従します。 - GLB標準にはBlenderのIK制約は保存されません。 このGLBはスキンと
extras.ikRigの独自定義を持ち、共通ViewerがリアルタイムにIKを解きます。他のViewerでは通常のスキン付きモデルとして表示されます。編集可能なネイティブ制約はblend側に保存しています。 human/models/traveler/src/ik_contract.jsonにバージョン、腰・腕・脚のボーン名、モデル座標系（glTF Y-up）のポール位置を定義。今後も同じ定義形式を持つGLBでViewerを使い回せます。IK定義がないモデルでは編集UIを表示しません。- Viewerのポーズ変更はメモリ上のみで、保存・アニメーションへの焼き込みは未実装。IK/FK切り替え時の姿勢自動マッチング、関節の可動域制限、衝突回避も未実装です。届かない目標は骨を伸ばさず到達可能な距離に制限します。
just ikで生成・Blender制約検証・GLB出力・レンダリング。生成はhuman/models/traveler/src/build_ik.py、IK計算はviewer/ik.ts、ドラッグ操作はviewer/ik-editor.tsに分離しています。静止版・歩行版は別ファイルとして維持します。
- GLB / プレビュー / Blender
- キャラクターをViewerで開く
just characterで生成・GLB再読み込み検証・レンダリング。- 生成元は
human/models/traveler/src/build_character.py。頭、胴体、左右の腕・脚、リュックを名前付きグループに分割。 - 静止モデルです。リグ、スキニング、アニメーションは含みません。各パーツは個別のメッシュで、3Dプリント用の一体形状ではありません。
噴水広場を囲む小さなローポリの町並み。10棟の家・商店と時計塔、カフェのテラス、街路樹、ベンチ、街灯、花売りのカートを配置しています。
- GLBモデル：外部テクスチャ不要の単体ファイル。glTF標準のY-up、単位はメートル。
- プレビュー画像：GLBをBlenderに再読み込みしてレンダリングした画像。
- Blenderファイル：モデルに撮影用カメラ・照明・背景を追加した編集用ファイル。
台座は約28 × 24 m。建物の室内は作っていません。マテリアルは単色のPBR設定で、GLBの見え方は読み込み先の照明によって変わります。撮影用の床・照明・カメラはGLBには含めていません。
pnpm install
just devhttp://127.0.0.1:5188 を開くと、共通のThree.js Viewerを表示します。初期表示はRAVEN-03で、モデル一覧からSuzu、MiloのIK版・歩行版・静止版や町にも切り替えられます。
- ドラッグで回転、ホイール／ピンチでズーム、右ドラッグ／2本指で移動。
- 斜め・正面・側面・上面の視点切り替え、全体表示（キャンバスにフォーカスしてFキー）。
- 部品をダブルクリックしてフォーカス。選択したオブジェクト名も表示。
- ワイヤーフレーム、グリッド、自動回転、明るさの調整。
- アニメーションがあるGLBでは、クリップ選択・再生／一時停止・速度変更・タイムラインの時間送り・骨格表示が使えます。時間送りや部品へのフォーカスは再生を一時停止します。
- 「GLBを開く」またはドラッグ＆ドロップでローカルGLBを表示。ファイルをサーバーへアップロードする処理はありません。
- 生成コードを実行した後、「再読み込み」で選択中のモデルを更新。ローカルで選んだファイルを外部アプリで編集した場合は「GLBを開く」で再選択してください。
- 各モデルの
output/直下へGLBを追加するとモデル一覧に自動追加。output/parts/の単体部品は一覧に含めません。表示名と推奨カメラ方向はviewer/catalog.tsで任意に指定できます。 ?model=travelerや?model=little-townでモデルを指定して直接開けます。
外部ファイルに依存しないGLB 2.0を想定しています。Draco・KTX2等の追加デコーダーが必要な圧縮形式は未対応です。表示寸法はglTFのメートル単位に従い、アニメーションでは選択中のクリップを36分割でサンプルした移動範囲を表示します。
just viewer-buildで一覧の全GLBを含む静的配信用のdist/を生成し、pnpm previewで確認できます。静的ビルドにはビルド時点のモデルが含まれるため、モデルを更新したらビューアも再ビルドしてください。
画面と入力処理はviewer/main.ts、計測・カメラ距離計算・解放処理はviewer/model.ts、再生状態とクリップ管理はruntime/animation-player.ts、IKの計算と状態はruntime/solvers.tsとruntime/ik.tsに分離しています。
just testでGLB形式とカメラ・計測ロジック、just test-e2eでPlaywrightによる表示・視点切り替え・ファイル選択・エラーからの復帰・モバイル表示を検証します。初回にテスト用ブラウザがない場合はpnpm exec playwright install chromiumを実行してください。
歩行については、Pythonで接地・左右交互の足運び・ループ接続を検証し、Node上でGLBをThree.jsに読み込んで実際のスキン変形、ループ端のボーン行列、全36フレームの全頂点の地面へのめり込みを検査します。E2Eでは一時停止・時間送り・速度選択・骨格表示・静止モデルへの切り替えを確認します。
Blender 5.0.1、Node.js 24、pnpm、justで動作確認しています。
pnpm install
just alljust buildで町のGLBとblendを生成し、GLBの再読み込みと寸法を検証します。just characterで静止版の旅人、just walkで歩行版、just ikでIK版を生成します。just testでGLBと歩行・再生・IKロジックを検証します。just renderで町のPNGを生成し、just allで全モデルを再生成します。
macOSでは /Applications/Blender.app/Contents/MacOS/Blender、それ以外ではPATH上のblenderを使用します。別の場所にある場合はBLENDER環境変数を指定してください。
生成元はmodels/little-town/src/build_town.pyです。PALETTEで配色、create_town()で建物・小物の配置、stage()で撮影条件を変更できます。乱数シードは固定しています。