Three.jsとWebGPUで作るインタラクティブなソフトボディ・スライム

作者のメモ

新しいディレクトリを作り、ブラウザで遊べる1ページ構成のスライムアプリを作ってください。Three.jsとWebGPUを使い、WebGLで済ませないでください。 中央に、丸くてふっくらしたスライムを配置します。色はピンクまたは青緑で、半透明にし、内部に気泡がうっすら見えるようにしてください。マウスで押したり、ドラッグして動かしたりできるようにし、離すと揺れながら元の形に戻るようにします。少し重力を持たせ、見えないテーブル面に軽くぶつかるようにしてください。硬いボールではなく、柔らかな肉感のある見た目にします。 顔にはかわいらしい表情を付けます。黒い豆粒のような目を2つと小さな口を配置し、目と口が本体から分離せず、表面の変形に合わせて一緒に押しつぶされるようにしてください。右側には、色・硬さ・ダンピングを調整できるシンプルなコントロールをいくつか配置します。「つつく」ボタンを押すと、スライムが跳ねるようにしてください。 ページはすっきりとしたデザインにし、背景は明るいグレー、タイトルは大きな文字にします。60fpsで動作するようにしてください。まず目標となる完成イメージを1枚作成し、そのイメージをもとに構築します。スクリーンショットがイメージに近づいてから、細部を追加してください。