Labs
Three Kubo
Claude Code × Three.js
既存の2Dキャラクター「kubo」を、外部3Dモデルを使わずThree.jsだけで立体化した実験。
state A
マウスを動かすとゆっくりこちらを向き、クリック / タップで A ⇄ C に変形します。
何を試したか
ぽいもの本舗で使っている2Dキャラクター「kubo」を、外部の3Dモデルを用意せず、既存の形をそのまま使って立体化できるか試しました。
どう作ったか
キャラクターのSVG PathをThree.jsのShapeに変換し、ExtrudeGeometryで厚みを付けています。クリックやタップでの形態変化も別の3Dモデルへの切り替えではなく、同じ形状の頂点を動かしてA⇄Cを変形させています。
使用技術
- Three.js
- WebGL
- Astro
- TypeScript
やってみて分かったこと
今回のような「既存キャラクターを立体化して、マウスに反応させ、形を変える」くらいの範囲なら、Blenderのような外部の3D制作ソフトを使わなくても、Three.jsだけで十分成立しました。一方で、もっと有機的な変形や複雑な3D造形が必要になった場合は、そうしたツールを組み合わせる余地があります。