積み木ぽいもの

何を試したか

先にChatGPT Sitesだけで作った「積み木ぽいもの」を、同じ題材のまま、より自然な物理挙動と3D表現、そしてブロック同士が色を引き継いで合体する仕組みまで含めて作り直しました。

Sites版から変えたこと

• つかんで離すだけで、そのまま重力で落ちる(右クリック不要)
• ブロック同士が衝突し、回転しながら積み上がる
• 落として静止したブロックが、触れている相手と1つに合体する
• 合体後も、元のブロックの色が領域として残る
• 合体ブロックにさらに落とすと、色を累積しながら再合体する
• どのブロックにも小さな目があり、合体後は1組の目を持つ1体になる
• 合体したキャラは右クリック(PC)で元のブロックたちへ弾けて戻る
• 右端のレバーを引くと、新しい色のブロックが上から降ってくる
• 薄い立体として厚み・面取り・影を持ちつつ、1つの面の上で積んで遊べる
• PCとスマホで基本操作を統一した

どう作ったか

描画はThree.js、物理はRapier(rapier3d-compat)。ブロックは2Dの輪郭をExtrudeGeometryで立体化し、凸包や箱の組み合わせのcolliderで衝突させています。合体は「接触したまま少し静止する」と発動し、接触中のブロックの頂点から新しい凸包の形とcolliderを作り直して、面ごとに元ブロックの色を割り当てています。

使用技術

• Three.js
• WebGL
• Rapier
• Astro
• TypeScript