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.

中文翻譯

構建一條交互式 3D 果凍河豚(fugu),作爲一個單獨的自包含 HTML 頁面,使用來自 CDN 的 three.js。

魚是一條坐在桌子上的軟體軟糖。把身體建模爲一個封閉的、icosphere 拓撲的蒙皮,每個頂點有兩個靜止形態:平靜的魚(鈍圓的頭部、身體逐漸收窄到短尾柄、略微扁平的腹部)和完全鼓起的球(球體,同樣伸出尾柄)。用一個“inflation”值在兩者之間混合。用 XPBD 以固定 1/600 秒子步長(與幀率無關)模擬:邊長約束、全局體積約束、朝混合後靜止形態的柔和全局形狀匹配拉力(通過極分解求旋轉,輕輕傾斜至直立)、帶摩擦的地面碰撞,以及對晃動施加的阻尼(相對於身體平均值的速度),讓它抖動但約一秒內穩定下來。用一次 Loop 細分渲染出光滑表面。

行爲:點擊魚會讓它受驚。它會吞三次空氣(每次吞嚥時嘴張開,帶一點過沖),直到變成圓球,鼓着約 4 秒,然後慢慢泄氣,同時從嘴裏吹出虹彩氣泡。拖拽會在局部抓住並拉伸果凍;拖拽空白處會環繞旋轉相機;滾輪或雙指捏合可縮放。

細節:約 260 根柔軟的棘刺,平靜時平伏隱藏,鼓起時一根接一根(錯開地)彈起,按各自的彈簧晃動,抵着桌子彎曲,並把球體頂起,讓它立在棘刺上。大而光澤的眼睛(金綠色虹膜、大瞳孔、白色反光點)跟隨光標。噘起的嘴脣,帶一個極小的白色喙。半透明的放射狀條紋魚鰭:飄動的胸鰭、搖擺的尾扇、起伏的背鰭和臀鰭,受驚時全都動得更快。背部有深色斑點,腹部蒼白,果凍內部困着幾個氣泡。

外觀:帶有 transmission、clearcoat 和 sheen 的 MeshPhysicalMaterial,營造糖果軟糖的觀感;柔和的環境貼圖;柔和的有色陰影,地板上有一絲淡淡的焦散,地板與頁面背景一致。口味預設:Yuzu、Ramune、Momo、Matcha。編輯式“Material Studies”版式:大號斜體襯線標題“Fugu Jelly.”、一個帶口味色塊的側面板、Firmness 和 Wobble 滑塊、Startle / Calm / Reset 按鈕、¼ speed 和 Sound 開關,以及音量、棘刺角度和情緒的實時讀數。用 WebAudio 合成的音效:吞嚥聲、點擊時的“boing”、泄氣時的嘶聲和細小的氣泡爆裂聲。響應式適配到手機寬度。

溯源

原作者
vib3coded
發佈日期
2026-10-02(由推文 ID 反解)
原始出處
查看原帖 ↗
收錄來源
zhuyansen/awesome-opus-5.5-video · 2105957241148813340 · 未聲明授權