Blenderで作った3DモデルをThree.jsで表示するとき詰まったこと
はじめに
先日、Blenderで作った3DモデルをThree.jsで動かすようなWebサイトを初めてしっかりめに作ったので、その過程でぶつかった問題について書き残しておきます。主にBlender側の話です。
実際に作ったサイトはこちらです。
自分のサイトを宣伝するわけではないですが、実際に見てもらった方が記事の内容がより把握しやすいかもしれないので載せておきます。
この記事はタイトルの通り、Blenderで作成した3DモデルをThree.jsで扱う際にハマったポイントについてまとめたものであり、上記のサイトの作り方を解説する記事ではありませんのでご了承ください。
主要技術のバージョン
Blender: 3.0.0
Three.js: r132
react-three-fiber: 7.0.17
Blenderで親子関係を作ると、座標変換により意図しない見た目になることがある
Blenderでは複数のオブジェクトで親子関係を作成することがあると思いますが、親子関係の作成時に座標変換がかかるようで、出力したglbファイルをブラウザで表示するとオブジェクトの位置がおかしくなっていることがあります。Blender上では正しい位置に見えても、glbとしてブラウザに表示すると位置が違ってたりします。
自分も詳しく理解したわけではないですが、とりあえず解決する方法として
-
親子関係を作成する場合
- 作成時、「オブジェクト」 → 「ペアレント」 → 「逆補正を付けず親に」
- ここで子側のオブジェクトの位置や回転が変わってしまうかもしれませんが、その状態がブラウザで表示される際の見た目になります。なので、そこから位置を調整します。
-
すでに親子関係を作成している場合
- 子オブジェクトを選択し、「オブジェクト」 → 「ペアレント」 → 「親との逆行列をクリア」
- ここでもおそらく子オブジェクトの位置が変わってしまうと思いますので、手動で直します。
という方法を取りました。
参考
NLAエディタでストリップアクションの位置を変更しても、出力されるglbに反映されない
主に、最初の家具がぽんぽん出てくるようなアニメーションの話です。
このアニメーションは、Blender上でキーフレームを打って家具のトランスフォームを操作しており、それを家具ごとに少しずつタイミングをずらして動かすような作り方をしています。
BlenderではNLAエディタと呼ばれる仕組みで、こんな感じで一つ一つのストリップアクションがタイムラインのように管理できます。
このストリップをドラッグして、相互のタイミングを後から調整したりできますが、それをしてもどうやら出力するglbには反映されないようです。こちらも座標変換と同様、Blender上では正しく見えてもブラウザでgblを表示すると意図しない挙動になっているパターンです。
対処法ですが、結局正攻法っぽい対策が見つからなかったので、NLAエディタ上でのストリップアクションの移動を諦め、直接キーフレームをまとめて動かしました。
アクションがついているオブジェクトを選択（意外と忘れがち）し、タイミングを変更したいストリップアクションを右クリック → ストリップアクションの調整を開始 を選択 → ドープシートやグラフエディタなどで、アクションのキーフレームを全部選択して左右に動かす、といったことを行いました。
こんな感じで、アニメーション用のエディタを2つ開いておくとやりやすいです
モデルの一部のマテリアルを拡張したい場合、単に「P」キーで分離させただけでは「立方体」として分離するので注意
主に、部屋の中のデスクトップモニターや壁の動く絵などについての話です。
これらは一度3Dモデルを出力した後、Three.js側で部分的にマテリアルを変更して実装しています。
（画像が劣化してるかもしれないです）
部分的にマテリアルを変更するために、例えばモニターの画面部分だけを「Pキー」で別のメッシュに分離しますが、分離したメッシュは厚さがなくても「立方体」になるので、同じ大きさの平面を作成して同じ場所に作り直す方が扱いやすいと思います。
貼り付けたテクスチャが反転することがある
前述の処理の後Three.js側でテクスチャを貼り付けたときに、見た目が反転してしまっていることがあります。
単純な話ではありますが、UVが反転しているので直します。
修正したいメッシュを選択して「編集モード」にする → メニューから「UV Editing」を選択 → UVの編集画面で全選択し、「s, x, -1」の順で入力します。（スケールを-1倍して反転させています。「x」の部分は反転している軸方向を入力してください）
おわり
以上になります。
自分自身まだまだ触りたての素人ですので、間違っている箇所や、より効果的な対処法がありましたらご教示いただけますと幸いです。
Discussion