以前から3Dモデリングに関心があり、Three.js や fiber なんかを触っています。

今回は、自作した3DモデルをWeb上に描画する
ということをやってみました。

Three.js
fiber

Blender チュートリアル

無料で使えるツール Blender を使って
カサハラCG さんのチュートリアルに沿って、実際に3Dモデルを作ってみました。
（めちゃくちゃ分かりやすく大変参考になりました）

完成品

そうして完成したのがこちら↓

動画の通りにやって、結構うまく作れました。
Blender 上でレンダリングしたもののスクショになります。

実際に3Dモデルを自分で作ってみて思ったことは、
モデリング用のツールは操作性がかなり独特で、感覚的に扱えるようになるには慣れが必要そうだということ。
今回のバーガーを作るのに数時間はかかりました。。

3次元を表す xyz の向きが Web（というか一般的な認識）とは違っている、など細かな違いもあります。
Blender では、Y軸が上方向ではなく奥に伸びていきます。
数学で出てくる平面のグラフをパタンと奥に倒したイメージですね。

Three.js コード上で3D空間を扱う場合は、横x 縦y 奥z になります。
（一般的な認識に近いはず）

Blender で作ったオブジェクトは色んな形式で書き出しが可能です。
今回は扱いやすいとされている、GLTF 形式で書き出しました。

Three.js でロードして表示する

3Dモデルは、fiber の useLoader で読み込み、キャンバス上に描画できます。
gltf の他にも、fbx や obj 形式にも対応しています。

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

const Model = () => {
  const gltf = useLoader(GLTFLoader, "./Poimandres.gltf");
  return (
    <>
      <primitive object={gltf.scene} scale={0.4} />
    </>
  );
};

<Canvas>
  <Model />
</Canvas>

早速Webページに表示してみると、、

Blender 上では照明やら何やらで結構盛ることができたが、
Web上にレンダリングしてみると、いまひとつな仕上がりに。

今回の動画はチュートリアル用だったこともあり、表面の素材は細かく指定してなく、質感がプラスティックっぽくなっていました。
マテリアル（表面素材）の設定が重要だと気付かされました。
光の反射を設定するだけでも結構変わってきそう。
上に乗ってるゴマのパーティクルや、チーズの波形も消えてます。
Blender 上のエフェクトは書き出し時にすべて反映されるわけではないみたい。
この辺はもっと触ってみる必要がありそう。

所管

Three.js でコードで作り込むより楽にいくかと思ったが、そう簡単にもいかなそうでした。
Web上で見栄え良く表示させるには、結構作り込む必要があるなぁと。

ブラウザゲームとか作ってみたい。。