3Dモデルを使える素材にする

形、トポロジー、UV、リグ、配布形式

読む目安：約8分。教材としての制作提案です。生成・性能・料金の比較実験は実行していません。

この章で身につけること

• モデルの形と描画を区別する
• 画像から3Dにするときの不確実性を理解する
• Web向け納品で確かめることを知る

書き出しの境界を越えて素材を検査する

1. 1必要な角度と動き
2. 2ブロックアウト
3. 3トポロジーとUVと必要なリグ
4. 4配布形式へ書き出す
5. 5実行環境へ再読込
6. 6形と材質を検査

自作の受け渡し図で、書き出し後に独立した完成判定を置いています。編集原本と実行用素材は用途が違うため、対応しない機能を納品前に解決します。

仕事の役割

• モデラー：形と面の構造
• リガー：変形と操作
• テクニカルアーティスト：書き出しと実行性能

入力

• 用途、必要な角度、サイズ
• 参照図と見えない部分の仕様
• 実行環境の形式と容量目標

制作工程

1. 球と箱でブロックアウトする
2. 正面・横・後ろから比率を見る
3. 必要な細部、UV、材質を作る
4. 動くものだけリグや差分を追加する
5. 配布形式へ書き出し、読込先で再検査する

出力

• 編集原本
• GLB等の配布素材
• サムネイルと仕様メモ

まず形を作る

3Dモデリングは、空間の中に頂点や面などを置いて形を作る作業です。最初は箱や球の組み合わせで大きさと比率を決めます。この段階をブロックアウトと呼びます。細かい模様を先に足しても、大きな形やシルエットの問題は解決しません。

表面の構造には用途がある

トポロジーは頂点や面のつながり方です。曲げる関節、影の出方、編集のしやすさに関わります。UVは3Dの表面と2Dのテクスチャの対応を決める座標です。リグは骨や制御点など動かす仕組み、スキニングは骨の動きを表面へ伝える割り当てです。静物を回転させるだけなら、キャラクター用の複雑なリグは不要です。

AI 3Dの結果を確認する

一枚の画像には裏側や内部が写っていません。画像から3Dを提案する方法でも、見えない形は推定を含みます。プレビューが良くても、底面、穴、厚み、テクスチャの継ぎ目、編集可能性を確認します。「モデルが出た」と「用途に使えるモデルができた」は別の工程です。

作業原本と配布ファイルを分ける

編集用の原本と、Webに配布するGLBなどの成果物を分けて保存します。glTF/GLBは実行環境へ3D素材を届けるために使われますが、制作ソフトの全機能がそのまま移るとは限りません。エクスポート後、別のビューアや実際のThree.js画面へ読み込み、材質、サイズ、向き、アニメーションを検査します。

品質チェック

• 裏側と底面を含め穴や重なりを確認
• 単位、原点、向き、尺度が意図通り
• 必要なテクスチャとアニメが同梱
• 実端末で読込時間とフレーム時間を確認

失敗を切り分ける

症状	原因	次にすること
正面は良いが回すと崩れる	一方向だけで合格判定	ターンテーブルで全周を確認する
書き出すと材質が違う	対応しないノードや設定	対応する材質へ置き換え、必要な見た目はベイクを検討する

実験課題：マスコットの立体ブロックアウト

状態：未実行（not-run）。実測結果ではなく、これから取り組む課題です。

課題：球と箱だけでマスコットを作り、正面・横・背面を記録する。細部を足す前にシルエットで同じキャラと分かるか判断する。

成果物：立体ラフと3方向の比較

完了条件：画像とモデルで必要な情報の違いを説明できる

関連するCatalog候補と実践

先に読む章：つくるものと仕事の全体地図 · キャラクターを一人の存在にする

• キャラクターの三面図 (Catalog候補: anime-reference-sheet)
• 丸く親しみやすい3Dマスコット (Catalog候補: mascot-soft-3d)

実験記録表で計画と証拠を残す

実験ノートを開く

一次資料

• Khronos glTF — 確認日: 2026-10-03
• Three.js GLTFLoader — 確認日: 2026-10-03
• Three.js Mesh — 確認日: 2026-10-03

2026-10-04に確認した出典の範囲

GLTFLoader はglTF 2.0と対応する拡張を明記しています。書き出す機能が実行環境へ届くかは対応一覧から確認し、ファイルを開けただけで対応したと判断しません。