SuperAPI AI 工具集

infinite-webgl-grid

前端与建站

查看项目

更新于 10-16 01:14

技能介绍

用途:构建 N×N 图片瓦片网格,支持指针拖拽或滚轮滚动,在任意方向产生“无限延伸”的浏览体验。核心是坐标取模:拖拽/滚动只累加虚拟 offset,每个 mesh 的显示位置由 wrap(localX - offset.x) 计算,相机保持静止,运行时不新增或销毁 mesh。

主要能力:固定网格 mesh 与纹理池复用;瓦片越界时按虚拟索引切换 material.map;拖拽带惯性(velocity 乘阻尼 0.92 衰减);提供 destroy() 清理监听器、材质、几何体、纹理与渲染器。默认 gridSize=7(约 5×5 可见加一圈缓冲),避免移动端纹理单元超限。

使用方式:优先复制原作者 CodePen(MIT)原始文件,保留署名注释,仅改内容、图片与颜色;项目不允许引入外部库时改用 assets/ 下的 vanilla 版本,调整 gridSize/tileSize/gap/poolSize 并替换占位图为真实图片。必须通过 HTTP 本地运行,不能使用 file://。wheel 与 pointermove 监听需注册 { passive: false } 并调用 preventDefault(),容器加 CSS touch-action: none。

适用场景:作品集、画廊、海报墙等需要多方向无限浏览的页面。

限制:不适用于粒子汇聚成单图或两图过渡效果;需要更多不同图片时应使用纹理图集而非无限增大 poolSize;需用 Playwright 验证四方向拖拽前后截图与 console 无错误,WebGL 错误常静默,必须读 console。