glTFモデルデータの書き出し - moxuse/ushio-3D-comic-icc GitHub Wiki

glTF モデルデータの書き出し

Blender glTF ファイルの書き出し

書き出すオブジェクトを全て選択してしてからメニューの、File >> Export >> glTF 2.0 (.glb/.gltf) を選択

0img

ファイルビューワーが出たら、右側の書き出し設定で

  • Format glTF Binary (.glb) を選択

  • Limit to : Selected Objevcts をチェック

  • +Y Up をチェック

  • Aplly Modifires をチェック

ファイル名を指定して保存します。

1img

書き出した .glb ファイルは /web/data/model/ に置きます。置いたら data/config.json の fileName に書き出したファイル名を指定しておきます。

config.json の設定

config.json ではスクロールのスピード、カメラの始点終点座標、モデルファイル名などを設定しておけます。

パラメータ名 説明
fileName 読み込む.glbモデルファイルの名前
camera speed スクロールの速度
begin x, y, z カメラの開始点の座標
end x, y, z カメラの終点座標
fogStartDistance フォグ処理の開始点の距離
fogEndDistance フォグ処理の終止点の距離

Bleder座標系 WeGL座標系の変換について

Blernder では 画面に対してZ軸が上方向になるのに対して、WebGLでは Y軸になります。なので、config.json での座標はZ軸とY軸を入れける必要が出てきます。また、Z方向の向きが逆になっているので、置き換え後の数値に -1 をかけた数値を指定します。例えば Blender 上で次のような座標がある場合、

{ x: 0.3, y: -0.7, z: 0.1 }

WebGL上では以下のようになります。

{ x: 0.3, y: 0.1, z: 0.7 }

Bleder座標系 の単位

Blender上で座標を調べる場合は Metric（メートル、デフォルトではMetric)ではなく None を使って座標を調べます。

unit_setting