ai21.net
言語

ブラウザのゼリーフグ比較

ブラウザのゼリーフグ比較 — 1

プロンプト

Build an interactive 3D jelly pufferfish (fugu) as a single self-contained HTML page using three.js from a CDN.

The fish is a soft-body gummy sitting on a table. Model the body as one closed icosphere-topology skin with two rest shapes per vertex: a calm fish (blunt round head, body tapering to a short tail stalk, slightly flattened belly) and a fully inflated ball (sphere with the same tail stalk sticking out). Blend between them with an "inflation" value. Simulate with XPBD at a fixed 1/600 s substep (frame-rate independent): edge-length constraints, a global volume constraint, a soft global shape-matching pull toward the blended rest shape (rotation via polar decomposition, gently leaning upright), ground collision with friction, and damping applied to the wobble (velocity relative to the body's mean) so it jiggles but settles in about a second. Render with one Loop-subdivision pass for a smooth surface.

Behaviour: tapping the fish startles it. It gulps air three times (mouth opens on each gulp, small overshoot) until it is a round ball, stays puffed about 4 seconds, then slowly deflates while blowing iridescent bubbles from its mouth. Dragging grabs and stretches the jelly locally; dragging empty space orbits the camera; wheel or pinch zooms.

Details: ~260 soft spines that lie flat and hidden when calm, pop up one by one (staggered) as it inflates, wobble on their own springs, bend against the table, and lift the ball so it stands on its spines. Big glossy eyes (gold-green iris, large pupil, white catchlight) that follow the cursor. Puckered lips with a tiny white beak. Translucent ray-striped fins: fluttering pectorals, swaying tail fan, rippling dorsal and anal fins, all faster when alarmed. Dark freckles on the back, pale belly, a few air bubbles trapped inside the jelly.

Look: MeshPhysicalMaterial with transmission, clearcoat and sheen for a candy-gummy look; a soft environment map; a soft colored shadow with a faint caustic on a floor that matches the page background. Flavour presets Yuzu, Ramune, Momo, Matcha. Editorial "Material Studies" layout: big italic serif title "Fugu Jelly.", a side panel with flavour swatches, Firmness and Wobble sliders, Startle / Calm / Reset buttons, ¼ speed and Sound toggles, and live readouts for volume, spine angle and mood. Synthesized WebAudio sounds for gulps, a boing on tap, a hiss while deflating and tiny bubble pops. Responsive down to phone width.

日本語訳

CDN から読み込んだ three.js を使って、インタラクティブな 3D ゼリーのフグを単一の自己完結型 HTML ページとして制作する。

この魚はテーブルの上に置かれたソフトボディのグミだ。体は、閉じた icosphere トポロジーの1枚のスキンとしてモデリングし、各頂点に2つのレスト形状を持たせる:落ち着いた魚(鈍く丸い頭、短い尾柄へ向かって細くなる体、わずかに平らになった腹)と、完全に膨らんだ球(同じ尾柄が突き出た球)。「inflation」値でそれらの間をブレンドする。固定 1/600 秒のサブステップ(フレームレート非依存)で XPBD によりシミュレーションする:エッジ長制約、グローバル体積制約、ブレンドされたレスト形状へのソフトなグローバル形状マッチングの引き(回転は極分解による、穏やかに直立へ傾く)、摩擦付きの地面衝突、そして揺れに適用する減衰(体の平均に対する相対速度)により、ぷるぷる震えながらも約1秒で落ち着く。滑らかな表面のために Loop 細分割を1パス適用してレンダリングする。

挙動:魚をタップすると驚く。丸い球になるまで3回空気を飲み込み(飲み込むたびに口が開き、わずかにオーバーシュートする)、約4秒間膨らんだままになり、その後ゆっくりとしぼみながら口から虹色の泡を吹き出す。ドラッグするとゼリーを局所的に掴んで伸ばす;空の空間をドラッグするとカメラがオービットする;ホイールまたはピンチでズームする。

詳細:約260本の柔らかい棘は、落ち着いているときは平らに伏せて隠れており、膨らむにつれて(ずらしながら)1本ずつ飛び出し、それぞれのバネで揺れ、テーブルに当たって曲がり、球を持ち上げて棘の上に立たせる。カーソルを追う大きな光沢のある目(金緑色の虹彩、大きな瞳孔、白いキャッチライト)。小さな白いくちばしのある、すぼめた唇。半透明の条線模様の鰭:はためく胸鰭、揺れる尾鰭、さざ波のように動く背鰭と臀鰭、驚くとどれも速くなる。背中には濃いそばかす、淡い腹、ゼリーの中に閉じ込められた少数の気泡。

見た目:キャンディグミのような質感のために transmission、clearcoat、sheen を備えた MeshPhysicalMaterial;柔らかな環境マップ;ページ背景に合わせた床の上に、かすかなコースティクスを伴う柔らかな色付きの影。フレーバーのプリセットは Yuzu、Ramune、Momo、Matcha。エディトリアルな「Material Studies」レイアウト:大きなイタリックのセリフ体タイトル「Fugu Jelly.」、フレーバーのスウォッチ、Firmness と Wobble のスライダー、Startle / Calm / Reset ボタン、¼ speed と Sound のトグル、そして体積、棘の角度、機嫌のライブ表示を備えたサイドパネル。飲み込む音、タップ時のボイン、しぼむ間のシューという音、小さな泡がはじける音のための WebAudio 合成音。スマートフォンの幅までレスポンシブ対応。

出典

原作者
vib3coded
公開日
2026-10-02(由推文 ID 反解)
原典
元の投稿を見る ↗
収録元
zhuyansen/awesome-opus-5.5-video · 2105957241148813340 · ライセンス未表明