Labs
作り直した変な小島
Claude Code × Blender MCP × Three.js
最初の島は、平らな緑の円盤に変なものが置いてあるだけでした。同じ島に木・岩・草・小道・滝・遠くの浮島を足して作り直したのがこちらです。歩き回って見比べてみてください。
ESC：カーソルを戻す
みつけた変なもの 0 / 7
この島には、もう何もない……たぶん。
この環境では WebGL を使えないため、島を表示できませんでした。
島の上に、変なものが7つ置いてあります。近づくと名前だけ出ます。
島を1周する動画
21秒・音なし。ブラウザで実際に動いている画面をそのまま録画したものです。
前の島から何が変わったか
変なものも、地面の高さも、歩く操作も、最初の島とまったく同じです。変えたのは島の中身だけで、足したのは次の6つになります。
- 木・岩・草・茂みを数百個ばらまいた (同じ形を並べる仕組みなので、増やしても描画は数回で済みます)
- 島を横切る土の小道を敷き、変なものの足元を暗くした
- 切り立っていた縁を、段のある崖に作り直した
- 縁から滝を落として、下に霧を置いた
- 遠くに浮島を7つ並べて、ゆっくり上下させた
- 変なものを1つ増やした (やけに大きいハンバーガー)
どう作っているか
島・空・光・一人称の移動と視点はThree.jsで書いてあります。木や岩はBlenderで1個ずつ作って1つのGLBにまとめ、ブラウザ側で位置と大きさを散らして並べています。撒く場所は毎回同じ結果になる乱数で決めていて、小道の上と変なものの足元は避けます。変なものの側は最初の島と同じ名簿とGLBをそのまま読んでいます。
いまの段階
島の上の変なもの7つは、すべてBlender製です。
使用技術
- Three.js
- WebGL
- Blender
- Blender MCP
- Claude Code
- Astro
- TypeScript
やってみて分かったこと
最初の島で足りなかったのは、1つ1つのモデルの出来よりも、島に何も置かれていないことでした。木と草と岩を撒いて小道を通しただけで、同じモデル・同じ光のまま見え方がかなり変わります。一方で、目標にした絵に入っている描き込み (看板の文字や塗り分け) には手が届いていません。そこはテクスチャの領域で、この島がまだ触っていないところです。
最初の島をBlender未経験から作ったときの過程は、記事にまとめてあります。