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 · 未声明许可