# Three.js 鼠标 Instancing 交互特效
> 基于 GPU Instancing 的鼠标轨迹交互特效，纯前端单文件
基于 Three.js Instancing 技术实现的鼠标交互特效，55×55 圆角方块等角网格。
**技术栈：** Three.js r160 · GSAP · WebGL
**特性：**
- GPU Instancing 单次 drawcall 渲染 3025 个实例
- 自定义 vertex shader，鼠标轨迹压陷效果
- 双速度追踪模拟弹簧感
- 入场动画按距中心依次展开
- 纯前端单文件，无需构建工具
## 完整源码
```html
Mouse Instancing
```
---
**分类**：源码
**标签**：鼠标 · js · Instancing
**作者**：Xiao.Xi
**链接**：https://octohz.com/p/1506