ブレンダーで遊ぶ

three.jsでマッピングしたパッケージ。
UVマッピングっていうのをしないといい感じに貼れない。

パッケージは適当にfigmaで作った。2の冪乗のサイズの画像が好ましい。
各面の6枚分画像を作るのではなく、1枚の画像の展開図を作成すればいい。

※UVマッピングとは、画像の使用したい部分を自分で%で指定する方法。長方形くらいの簡単な形状ならBlenderよりもthree.jsで指定する方が楽。
一面ごとに好きに変えられるので、時間で真ん中の画像を変えるなどのことができるらしい。マイクラの炉？の炎がメラメラする感じも3枚の火の形が違う画像を用意して、一定時間で3枚が切り替わる感じにしたら作れるみたい。

BlenderでUVマッピングした。3DではUVマッピングって名前が共通みたい。

円柱を作る時間は5分くらい。展開図を適用するのに2時間、、、（調べるのに時間がかかった）
自分でどういう展開図にするか想像しながら作るのが一般的。
シームっていうので好きな位置でオブジェクトに切れ込みを入れる。→切り込んだ位置で展開図が作られる。

展開図を作成したら、Blenderで画像の設定もできるが、展開図をpngでダウンロードしてイラレやフォトショでデザインを作るのが一番ずれなくていい。楽しい。

WebGLスクールの第2回目の課題で作った首振り扇風機の一部。ネットで見た扇風機が可愛かったので、形を参考にしつつ自分でモデリングした。課題の中で一番気に入ってる。アヒルが可愛く作れた。

完成系はこちら

ハンバーガー。時間があったからYoutube見ながら作ってみた。
初「物理演算」使用。

チーズに物理演算かかってる。クロスのエフェクト?かけて、パテに沿うような感じでトロッと感を出すんだって。すごい。チーズのツヤっと感は、マテリアルの色の荒さを荒くするとツヤっとする。

ファイルサイズが最初16MBもあるとんでもないファイルになちゃったけど、削減方法をネットで見つけて594KBまで減らせた。見た目に問題なし。
頂点の数はなるべく減らすのが吉。

部屋風。同じくYoutube見ながら作ってみた。

Blenderはショートカットがきつい。ショートカットで頭焼き切れそう。

特に書くことはない。作ってみたかったからやってみた。
時間があったらもっと細かく作って、アニメーション組み込んでも楽しかったかも。

一個一個バラバラでthree.js上で呼び出したら、スクロールに合わせて床→壁→家具達が出現する、みたいなアニメーションができるのかも？今度やってみる