← 回到首页
PLAYGROUND · INTERACTIVE SVG
鹈鹕骑自行车
把大模型经典测试题做成一个打开就能玩的海滨兜风场景：复古薄荷绿菱形钢架、双连杆逆运动学踩踏与握把、带阻尼弹簧物理的大喉囊，声音与画面全部在浏览器内实时生成。
👆 点击画面任意位置投喂小鱼
操作与互动说明
| 操作 / 快捷键 | 效果 |
|---|---|
| 点击画布任意处 / F | 从点击位置抛出一条银鱼，鹈鹕预判距离自动张开巨喙接鱼，喉囊弹簧下沉晃动 |
| B | Web Audio 实时合成清脆黄铜双响车铃泛音，把立铜铃震动并飘出音符 |
| W | 以后轮轴心为支点拉起前轮平衡翘头骑行，地面投影随抬起角度实时缩放 |
| 拖动踏频滑块 / Space | 0x 定格观察几何细节；超过 1.3x 自动压低躯干进入破风冲刺姿态 |
| 1 / 2 / 3 或 H | 切换清晨、落日余晖与星夜车灯模式（夜间点亮前大灯光束、红尾灯与海岬灯塔），H 切换骑行小帽与护目镜 |
| 导出 SVG 按钮 | 将当前动画帧直接序列化下载为独立标准 .svg 矢量文件 |
背后的几何与运动学细节
「鹈鹕骑自行车」之所以常让模型翻车，是因为它同时要求机械车架拓扑正确、鸟类解剖特征鲜明，以及曲柄圆周运动与肢体关节闭合。这个页面用纯内联 SVG 与百余行原生脚本把三件事锁在同一套坐标系里：
- 真实菱形车架与零打滑约束：后轴
(330, 354)、前轴(576, 354)、五通(428, 360)构成标准五通下沉（BB Drop）与72.8°立管倾角，前叉末端带真实偏移（Fork Rake）。曲柄、五爪牙盘、链条stroke-dashoffset、前后轮辐条与路面标线严格满足外胎周长无滑动关系，轮胎在地面不会空转打滑。 - 双连杆逆运动学（2-Bone IK）：髋关节到旋转踏板踝点的距离在
[99px, 168px]之间往复变化，大腿92px与小腿88px每帧实时解算朝车头方向的膝关节交点，既不锁死超伸也不穿模前轮；双翼同理根据躯干俯身角实时解算翼肘下垂，并用动态<clipPath>让炭黑初级飞羽严丝合缝包裹真皮把套。 - 二阶弹簧喉囊与零素材合成音效：标志性的橙色大喉囊（Gular Pouch）由阻尼弹簧振子驱动，踩踏时自然微颤，接到小鱼瞬间产生冲量下沉并缓慢消化回弹；黄铜车铃的三重泛音与接鱼音效全部由浏览器
AudioContext即时合成，整页零外部脚本、字体或音频依赖。