安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
Three.js 3D 螺旋图片无限滚动效果 - WebGL 惯性画廊特效
编号:Three.js螺旋画廊

Three.js 3D 螺旋图片无限滚动效果 - WebGL 惯性画廊特效

大小 35 KB
总文件 6 个
发布 2026-08-11
更新 2026-08-11
架构 Three.js(WebGL)
分类 前端资源 - 切换与轮播
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

    这是一款三维螺旋图片无限滚动效果,基于 HTML+JavaScript 与 Three.js(WebGL)加自定义着色器实现。二十多张图片沿螺旋轨迹环绕成一条上升的"胶片带",滚轮或触屏上下滑动即可让它连续旋转穿行,松手后带着摩擦衰减的惯性慢慢停下;鼠标拖拽能小幅倾斜整个螺旋换视角,左右方向键可微调远近。

    有意思的是它的实现思路:并没有摆二十多张独立卡片,而是把所有图先拼进一张长条画布当作总贴图,再把一个平面网格按公式弯成螺旋,滚动时只是平移 UV 坐标并循环取值——所以既没有接缝,帧率也稳,图片再多也是同一次绘制。换图很简单,改 imageUrls 数组即可,圈数和高度会跟着数量自动调整,每张图的宽高比也会保留。要注意两点:图片被烘进单张贴图,数量或分辨率过高会顶到显卡贴图尺寸上限,建议控制在几十张、单边不超过 800px;另外用了 canvas 读图,图片源必须支持跨域,否则会加载失败。

    适用于摄影作品集与图集展示、品牌视觉首屏、活动专题页、数字展厅与沉浸式产品陈列等场景。

    

模板目录结构

    最新资源

    CSS彼岸花绽放,随机花丛与飘散光点动画效果

    彼岸花海

    CSS彼岸花绽放,随机花丛与飘散光点动画效果
    Three.js重力球体官网,滚动坠落聚合与穿越效果

    重力球阵

    Three.js重力球体官网,滚动坠落聚合与穿越效果
    律师事务所与法律咨询 HTML 响应式网站模板

    正衡

    律师事务所与法律咨询 HTML 响应式网站模板
    教育培训与课程展示 HTML 响应式网站模板

    学程

    教育培训与课程展示 HTML 响应式网站模板
    切水果 HTML 小游戏,连击炸弹与冻结时间游戏

    水果切切

    切水果 HTML 小游戏,连击炸弹与冻结时间游戏
    Reactive CSS日期尺组件,拖动刻度与数字滚轮选择

    滚轮日历

    Reactive CSS日期尺组件,拖动刻度与数字滚轮选择