这是一款基于Three.js、GSAP 与原生 JavaScript技术实现的沿拖动轨迹展开的三维照片胶带。照片像印在纸带上,卷轴跟随拖动方向前进,已经经过的路径留下平铺照片,转弯时还能看到纸带的曲折与层次。页面提供收回按钮,方便重新展开另一条轨迹。
照片胶带如何跟着指针铺开和收回
卷轴与铺开的照片带相互衔接。展开长度改变时,卷起和落地部分同步更新。
轨迹带有速度与转向限制。目标位置不会直接瞬移成折角,而是平滑改变方向。
照片按纸带顺序显示。多张图片组合为连续纹理,沿着已铺出的部分依次出现。
路径采样与卷轴几何怎样连接
几何体按长度细分,脚本记录路径采样并更新带面位置,卷轴部分则根据剩余长度计算外形。纸张厚度与层间微小高度差帮助表现缠绕关系,GSAP 处理加载完成与回收等过渡。它不是预先录好的模型动画,路径会响应操作。
core: 0.7,
三维照片带的图片与纸张参数在哪里调整
照片列表与纸带长度、宽度、厚度等参数集中在 script.js,背景、提示与按钮在 style.css。替换图片时保持相近比例,并检查加载完成逻辑;改变纸带长度后要考虑细分数量与路径采样开销。
拖拽照片卷的加载与用途问题
可以把照片自动铺成固定形状吗?
当前由指针轨迹驱动,没有固定形状编辑器。可以进一步提供预设路径,但需要另行组织采样数据。
为什么加载时有进度提示?
页面需要先准备多张照片纹理,全部就绪后再进入主要展示。图片已本地化,仍应保持路径完整。
适合直接当作商品目录吗?
它更适合视觉相册,现有纸带没有逐图商品详情或筛选系统,业务入口需要另行增加。
适合创意相册、旅行回忆和照片卷轴交互。下载后可查看照片胶带卷的完整结构与参数,按自己的内容继续调整。