赛博遛猫 · 3D

Three.js 实时 3D · 骨骼步态 + 牵引绳物理 + 可拖拽视角
3D 模式:猫是带 36 根骨骼的低多边形模型,实时蒙皮渲染。 左键拖动 = 旋转视角,滚轮 = 缩放; 鼠标移到地面 蓝点 上 = 牵引猫走过去; ←/→ 推动猫,Space 坐下,P 扑击。 全程离线渲染,无任何外部 API 调用。
正在加载 3D 引擎…
需 WebGL 支持
猫位置 X
0.00
猫朝向
+X
速度
0.00
姿态
站立
牵引绳
松弛
FPS
—

3D 渲染管线

  • 模型:glTF 低多边形猫,约 1800 顶点 / 2600 面 / 36 骨骼
  • 蒙皮:SkinnedMesh + Skeleton,逐帧写入骨骼旋转后实时蒙皮
  • 步态:对角步态(前左+后右 / 前右+后左 反相),膝盖只向后弯
  • 地面网格:1 单位网格烘焙进 canvas 贴图,靠 mipmap 抗锯齿
  • 光照:HemisphereLight + DirectionalLight 投射阴影
  • 相机:PerspectiveCamera + 手写轨道控制(拖拽旋转 / 滚轮缩放)

参数 全部 HEURISTIC

参数值
猫高3.0 单位
猫体长~3.6 单位
牵引绳长1.55 体长
步态相位差π(对角反相)
尾巴摆幅22°
速度上限1.4 体长/秒
静止坐下5 秒后

自检(断网可跑)

等待执行…
对应 §8 外设总线 PER/LEASH 分类。
Three.js r160 本地加载(assets/vendor/three.module.min.js),无任何 CDN 依赖。 猫模型为 Toon Cat(Omabuarts Studio,CC-BY 4.0),已清理为单网格 + 36 骨骼。
HEURISTIC = 行为学里没有这个数的明确定量。