液态气泡
Liquid Glass液态玻璃气泡效果,Three.js实现的Metaball折射交互动画这是一款液态玻璃气泡效果,基于 Three.js + WebGL + Metaball 算法技术实现,模拟真实水泡的透明质感、光线折射与表面张力——气泡之间靠近时会自然"粘连融合",拖拽可实时交...
滚动切换
WebGL 滚动驱动三维场景切换效果——五段几何形态无缝过渡实现方案这是一款基于 WebGL + SDF 光线步进技术实现的滚动联动三维渲染效果。页面滚动即驱动场景演进,依次呈现球体、圆环、立方体、八面体、双环五种几何形态,形态之间连续融合过渡,没有跳切感。配色...
3D果肉魔方
次表面散射艺术:赋予 Web 3D 材质“生命力”的多汁果肉魔方(Canvas + WebGL)这是一款 3D 物理材质模拟动态魔方效果,支持魔方多种形态自动变化。它基于 Canvas + WebGL 技术实现,核心突破在于对「次表面散射」的细腻刻画。这种效果模拟了光线进入物体内部并发生折...
冰晶动态背景
Canvas+WebGL大号冰晶质感雪花飘落动画背景这是一款冬季雪景动画背景效果,基于Canvas+WebGL技术实现,通过实时渲染逼真的超大号雪花粒子,逼真的还原了冰晶质感的雪花形态,营造出漫天飘雪的沉浸式视觉氛围。每片雪花形态各异,带有晶莹剔...
互动光标
WebGL 梦幻星云流体鼠标拖尾互动特效这是一款 WebGL 流体光标跟随效果,基于 WebGL 技术实现,当光标在页面上移动时,通过模拟粒子流动与光线散射,呈现出如星云般梦幻的色彩柔和、带有流动质感的烟雾光影效果,极具视觉冲击力和沉...
脉冲光波
WebGL+Canvas实现极具冲击力的脉冲光波动画效果这是一款基于WebGL+Canvas实现的脉冲扩散动画效果,通过图形之间的无限过渡变化形成从中心往四周扩散的脉冲动画效果,形成光环从中心点快速扩散的冲击脉冲光波,视觉效果拉满,极具冲击力,适合科...
首屏3D动画
用 WebGL 打造的沉浸式折射晶体玻璃态动画 Hero 首屏布局这是一款 WebGL 折射晶体玻璃态 Hero 首屏区域 3D 动画效果,基于 WebGL+GLSL 着色器技术实现,通过光线追踪渲染出晶莹剔透的折射晶体场景,搭配玻璃拟态风格的UI元素,营造出...
火焰螺旋
WebGL 交互式 GLSL 火焰螺旋动效,用鼠标点燃的火焰风暴!这是一款全屏火焰螺旋动画效果,基于WebGL与GLSL着色器技术实现,通过程序化方式生成的动态光效呈现出极具视觉冲击力的火焰漩涡。画面中色彩不断流转,线条如火焰般舞动,中心向外辐射出强烈的能量感...
梦幻过渡
像素流动图像切换轮播过渡效果 - 基于WebGL与Three.js的超现实视觉转换这是一款基于WebGL和GLSL着色器技术实现的着色器图像过渡效果,能够将一张图片以丝滑、梦幻的方式变形为另一张图像,仿佛在零重力空间中展开的像素之舞。画面中的图像如同被无形之力牵引,逐层解构又...
燃烧弹出框
WebGL 实现弹窗以火焰燃烧特效消失效果 - 让DOM元素动态燃起来这是一款主要基于WebGL+GSAP+three.js技术实现的动态火焰燃烧特效,可让弹窗(Pop-Up)、按钮或其他DOM元素在点击交互时呈现逼真的燃烧动画消失效果。火焰可随交互实时变化,支持...
触屏生花
WebGL实现点击屏幕随机长出一株漂亮小花效果古有“妙笔生花”,今有“触屏生花”,这是一款创意绘画交互效果,基于WebGL结合Three.js技术实现,通过点击触发花朵粒子生成,将用户操作转化为即时绽放的彩色花丛,适用于艺术创作平台、儿童教...
旋转地球仪
Three.js SVG交互式三维旋转地球仪(矢量地图WebGL渲染方案)这是一款交互式三维转动地球仪,基于Three.js+SVG+GSAP技术实现,通过将平面矢量地图动态投影到WebGL球体表面,清晰的展示国家与地区的分布,并且支持鼠标悬停展示名称,同时还支持通过...