这是一款基于原生 WebGL、着色器与 JavaScript技术实现的带惯性滚动的循环作品画廊。图片沿带有弧度的空间轨迹展开,滚动或拖拽时连续经过画面中央,松开后仍有短暂惯性。画廊把多张图片整理到纹理中,再交给着色器投影和绘制。底部标志与推广链接已改为 TZW,适合设计作品与专题图片展示。
无限作品画廊怎样响应滚动与拖拽
滚轮和拖拽共用运动状态。输入改变目标位置,再由插值带动画面平滑追赶。
图片带可以循环浏览。展示位置与作品索引分开处理,经过末尾后继续衔接。
交互位置与画面对应。点击根据可见作品计算目标,标签随当前作品更新。
纹理图集与着色器如何形成弯曲图片带
场景使用 WebGL 着色器计算投影、位置与形变,纹理图集减少多图切换的复杂度。拖动速度与目标状态参与视觉反馈,停止输入后逐渐收敛。图片本身仍是普通本地资源,作品标题和链接由项目数组管理。
uniform sampler2D atlas;
惯性画廊的作品和空间参数在哪里替换
作品图片、标题与跳转地址在 script.js 的 projects 数组,图像位于 img;投影、惯性与形变参数也在脚本中,背景与 TZW 标志样式在 style.css。更换比例差异较大的作品时,需要检查裁切方式。
WebGL作品画廊的图片与链接问题
点击图片会打开哪里?
当前作品入口已统一指向童哲网,可在项目数组中设置自己的目标页面。
需要三维模型吗?
不需要。画面由图片纹理和程序几何组织,不依赖外部模型文件。
图片太大应该先改哪里?
优先压缩原图体积与分辨率,再调整图集和显示参数,避免把不可见的高分辨率内容全部送入显存。
适合设计作品集、专题画廊和惯性滚动展示。下载后可查看无界图片带的完整结构与参数,按自己的内容继续调整。