blog.in-j.com

BlenderからThree.jsへモデルをエクスポートする設定まとめ【glTF】

Three.js3DCG

Blenderで作ったモデルをThree.jsに持っていくと、「巨大すぎる/小さすぎる」「真っ黒」「アニメーションが暴れる」あたりの問題に必ず一度はぶつかります。原因のほとんどはエクスポート前のBlender側の状態にあるので、今回はエクスポート前の準備 → 書き出し設定 → トラブルシューティングの順にまとめます。

形式は迷わず**glTF(.glb)**です。BlenderのglTFエクスポーターは公式メンテナンスで品質が高く、Three.js側もGLTFLoaderで読むだけです。FBXやOBJをあえて選ぶ理由は今はありません。

エクスポート前にBlender側でやること

1. トランスフォームを適用する(最重要)

オブジェクトモードで Ctrl+A → 「全トランスフォーム」。

Blender上でオブジェクトを拡大縮小・回転していると、その変形が「オブジェクトのプロパティ」として残っています。これを適用せずに書き出すと、Three.js側でスケールや回転が想定と違う値になり、「読み込んだら巨大」「アニメーションさせたら形が崩れる」の原因になります。エクスポート前のCtrl+Aは儀式として毎回やるくらいでちょうどいいです。

2. 原点(ピボット)の位置を確認する

Three.jsで model.position.set(0, 0, 0) としたとき、モデルはBlenderでの原点を基準に置かれます。キャラクターなら足元、建物なら底面に原点を設定しておくと扱いやすいです(右クリック → 原点を設定)。

原点がモデルの中心にあると、地面に置いたつもりが半分埋まる、というお馴染みの現象が起きます。

3. スケールの基準を決めておく

Blenderの1単位 = Three.jsの1単位です。物理エンジンを使うなら1単位=1mが前提なので、Blender側でも実寸(人間なら高さ1.7前後)で作っておくと後がすべて楽になります。

4. マテリアルはプリンシプルBSDFで

glTFに変換できるのは基本的にプリンシプルBSDFのマテリアルです。ノードを複雑に組んだ手続き型マテリアルは持っていけません(その場合はテクスチャにベイクします)。ベースカラー・メタリック・ラフネス・ノーマルマップあたりは問題なく変換されます。

なお、Y軸の向きは気にしなくてOKです。Blenderは Z-up、Three.jsは Y-up ですが、glTFエクスポーターがデフォルト(「+Yが上」チェックON)で自動変換してくれます。

エクスポート設定(ファイル → エクスポート → glTF 2.0)

私が普段使っている設定です。

  • フォーマット: glTFバイナリ(.glb) — テクスチャ込み1ファイルで管理が楽
  • 内容 → 選択したオブジェクト: ON — シーンに転がっている作業用オブジェクトの混入を防ぐ
  • トランスフォーム → +Yが上: ON(デフォルトのまま)
  • データ → 圧縮: モデルが重いならON(Draco圧縮)。読み込み側にDRACOLoaderの設定が必要になる点だけ注意
  • アニメーション: 入れる場合はON

アニメーションの注意

複数のアニメーション(待機・歩き・走りなど)を1つのglbに入れるには、アクションをNLAトラックに落としておく必要があります(アニメーションエディタでアクションを作り、「スタッシュ」または NLAエディタでトラック化)。Three.js側では gltf.animations に配列で入ってきて、名前は THREE.AnimationClip の name で確認できます。

アクション名は英数字にしておくのが無難です。日本語名も一応通りますが、コードで clipAction を名前引きするときに事故りにくくなります。

書き出したら表示確認

Three.jsに組み込む前に、単体で確認すると問題の切り分けが楽です。

  • glTF Viewer — ドラッグ&ドロップで表示、エラーも出してくれる
  • three.js editor — 実際のThree.jsでの見え方を確認できる

ここで正しく表示されるのにThree.jsで表示されないなら、原因はコード側(パス、スケール、ライト)に絞れます。

トラブルシューティング

表示されない — まずコンソールで読み込みエラー(404)を確認。次にスケールを疑って model.scale.setScalar(0.01) などを試す。巨大すぎてカメラが中に入っているか、小さすぎて見えないかのどちらかが大半です。カメラの far が小さすぎて描画範囲外、というのもよくあります。

真っ黒に表示される — glTFの標準マテリアルはライトが必要です。シーンにライトを追加してください。ライトがあるのに黒い場合は、Blenderで法線が裏返っている可能性があります(編集モード → メッシュ → ノーマル → 面の向きを外側に揃える)。

テクスチャが出ない — .glb形式なら同梱されるのでほぼ起きませんが、.gltf(分割形式)の場合はテクスチャ画像の相対パスが正しいか確認。Blender側でテクスチャ画像がパージされている(紫色になる)場合は当然出ません。

アニメーションで形が崩れる — ほぼ「トランスフォーム未適用」が原因です。Ctrl+Aしてから再エクスポート。アーマチュア(ボーン)にもスケールが残っていないか確認してください。

ファイルが重い — Draco圧縮をON。テクスチャが支配的な場合は画像の解像度を落とす(4096→1024で見た目が変わらないことは多い)。それでも重いなら、ポリゴン数自体をデシメートモディファイアで削減します。

まとめ

  • 形式はglb一択。エクスポート前に Ctrl+A(全トランスフォーム適用) と原点確認
  • スケールは1単位=1mで統一しておくと物理エンジン導入時も困らない
  • マテリアルはプリンシプルBSDF、複数アニメはNLAトラックへ
  • 組み込む前にglTF Viewerで単体確認すると切り分けが速い