Three.jsGSAPWebGL
害羞鸡
Three.js + GSAP 3D 互动小鸟
在下方区域内移动鼠标：中间的小鸟会看你的光标，盯太久两侧的小鸟会害羞转头。
全屏打开演示简介
三只 Low Poly 小鸟：中间一只跟随鼠标注视，两侧在你盯太久时会「害羞」转头、变色。展示 WebGL 角色互动与 GSAP 补间。
收录日期 2026-01-29 · 来源 前端嘛 · Code Fun
技术栈
Three.jsGSAPWebGL
解析
注视逻辑
鼠标位置映射为 horizontal / vertical angle，驱动瞳孔、身体顶点变形；side bird 监听中间鸟角度触发 lookAway / stare。
依赖 CDN
使用 Three.js r70 与 GSAP 1.x CDN，部署需保证外网可访问；现代项目可升级版本但 API 会有差异。
应用场景
- ▸趣味 404 / 关于页吉祥物
- ▸WebGL 入门教学
- ▸展示「角色有性格」的 micro-interaction
完整源码
← 更多效果加载源码中…
请稍候…