[WEB App] 3D Scale & Transform Adjuster - GLB/GLTFモデルのスケール調整&ベイクツール

[WEB App] 3D Scale & Transform Adjuster - GLB/GLTFモデルのスケール調整&ベイクツール

概要

GLB / GLTFファイルのスケール変更、Y軸回転、原点補正、トランスフォームの頂点ベイクをブラウザ上で完結させるWebツール。 アップロード不要で、ファイルはローカル環境(ブラウザ内)で処理され、外部サーバーには送信されません。

MMDモデル(cm単位)をメートル単位に変換したい、VRoidモデルのスケールを微調整したい、向きが反転しているモデルを修正したい — そういった「GLBをちょっと直したい」ケースに対応するツールです。

🔗 ツールを開く: 3D Scale & Transform Adjuster

サンプルは以下でお借りしています。

3D Model:NTak_indies

[WEB App] 3D Scale & Transform Adjuster - GLB/GLTFモデルのスケール調整&ベイクツール [WEB App] 3D Scale & Transform Adjuster - GLB/GLTFモデルのスケール調整&ベイクツール [WEB App] 3D Scale & Transform Adjuster - GLB/GLTFモデルのスケール調整&ベイクツール

開発の経緯

lain-lab.com の各プロジェクトでGLB/GLTFモデルを扱う中で、モデルのスケールや向きの不一致に何度も直面しました。

  • MMD由来のモデルはcm単位(×0.01が必要)
  • VRoidモデルはやや大きめ(×0.8で丁度いい)
  • Blenderからのエクスポート時に向きが180°反転する
  • トランスフォームがノード階層に残ったままで、他のツールで読み込むと位置がズレる

Blenderを立ち上げてスケール→適用→エクスポートを繰り返すのは非効率なので、ブラウザ上で完結するツールとして作りました。

使い方

1. モデルを読み込む

左サイドバーの「モデル読み込み」エリアからファイルを読み込みます。

  • ドラッグ&ドロップ — GLBまたはGLTFファイルを破線エリアにドロップ
  • クリックで選択 — エリアをクリックしてファイル選択ダイアログから選ぶ

読み込みが完了すると、右側の3Dビューポートにモデルが表示され、バウンディングボックス(緑線)で囲まれます。グリッドの1マスが1メートルに対応しているため、モデルの実寸を直感的に把握できます。

[WEB App] 3D Scale & Transform Adjuster - GLB/GLTFモデルのスケール調整&ベイクツール( 1. モデルを読み込む)

2. スケールを調整する

一括スケール (Uniform)

スライダーまたは数値入力でモデル全体のスケールを調整します。よく使うスケール値はプリセットボタンから一発で設定できます。

プリセット用途
0.01 (MMD-cm to m)MMDモデル(cm単位)をメートル単位に変換
0.1 (10%)10倍サイズのモデルを正規化
0.8 (VRoid fix)VRoidモデルのサイズ微調整
1.0 (100%)デフォルト(等倍)
10 (10x)小さいモデルを10倍に拡大
100 (100x)cm単位モデルの100倍拡大

軸別スケール (X / Y / Z)

「軸ごとのアスペクト比を固定」チェックを外すと、X・Y・Z軸を個別に調整できます。特定の軸だけ引き伸ばしたい場合に使用します。

[WEB App] 3D Scale & Transform Adjuster - GLB/GLTFモデルのスケール調整&ベイクツール(  2. スケールを調整する )

3. 原点・位置・向きを補正する

オプション内容
Y軸回転 (向き)0° / 90° / 180° / 270° でモデルの向きを変更。180°反転の修正に便利
XZ軸を中心に自動配置モデルのXZ中心を原点 (0, 0) に移動
底面を Y=0 に自動配置モデルの底面を地面(Y=0)に揃える
トランスフォームを頂点へベイク位置・回転・スケールを頂点座標に焼き込み、ノードのトランスフォームをリセット
アニメーション移動量も拡大縮小アニメーションのpositionトラックにもスケールを適用

「トランスフォームを頂点へベイク」は、スケールや回転をノード階層ではなくジオメトリに直接適用します。他のツールやエンジンでの読み込み時にトランスフォームのズレが起きなくなります(スキンメッシュ含むモデルではベイクはスキップされます)。

[WEB App] 3D Scale & Transform Adjuster - GLB/GLTFモデルのスケール調整&ベイクツール( 3. 原点・位置・向きを補正する )

4. サイズを確認してエクスポート

画面下部の「サイズ情報 (Bounding Box)」で、元のサイズと調整後のサイズをリアルタイムに確認できます。高さはメートルとセンチメートル両方で表示されるため、キャラクターモデルの身長確認にも便利です。

調整が完了したら「💾 調整済み GLB をエクスポート」ボタンでGLBファイルをダウンロードします。ファイル名は 元のファイル名_adjusted.glb になります。

[WEB App] 3D Scale & Transform Adjuster - GLB/GLTFモデルのスケール調整&ベイクツール( 3. 原点・位置・向きを補正する )

典型的なワークフロー

MMDモデル → GLB(メートル単位)

  1. MMD to GLB でPMX + VMDからGLBを生成
  2. 本ツールで 0.01 プリセットを適用(cm → m変換)
  3. 必要に応じて180°回転で向きを修正
  4. ベイクしてエクスポート

VRoidモデルのサイズ修正

  1. VRMからGLBに変換済みのモデルを読み込み
  2. 0.8 プリセットで微調整
  3. 底面Y=0で接地させてエクスポート

Blenderエクスポート後の向き修正

  1. GLBファイルを読み込み
  2. Y軸回転で 180° を設定
  3. ベイクしてエクスポート(回転がジオメトリに焼き込まれる)

関連ツール

ツール用途
MMD to GLBPMX + VMDからアニメーション付きGLBを生成
VRM to GLBVRM + VRMAから軽量GLBを生成
VRM OptimizerVRMモデルのWebP + Draco圧縮
VRM ValidatorVRMファイルのバリデーション
PMX CheckerPMXファイルのチェック&修復

技術仕様

項目内容
3DエンジンThree.js r128
モデル読み込みGLTFLoader
エクスポートGLTFExporter(バイナリGLB出力)
スケルトン複製SkeletonUtils.clone
ベイク方式matrixWorldを頂点に適用後、ノードトランスフォームをリセット
フレームワークAstro
データ処理全てブラウザ内、サーバー通信なし

対応ブラウザ

WebGL対応のモダンブラウザ(Chrome / Edge / Firefox / Safari)。

利用上の注意

  • スキンメッシュ(ボーン付きモデル)を含む場合、トランスフォームの頂点ベイクはスキップされます。スケール・回転はノード階層に残ります
  • アニメーションのスケーリングはpositionトラックのみが対象です。回転トラックは変更されません
  • 3Dモデルの利用にあたっては、各データの利用規約を遵守してください