首页时事民生政务教育文化科技财富体娱健康情感

旅行百科职场楼市企业乐活学术汽车时尚创业美食幽默美体文摘

Three.js 页面滚动扭曲和颗粒效果

文化 2024-10-19 15:00 河南

了解如何使用 Three.js 着色器在滚动上创建扭曲和颗粒效果，并将 HTML 图像与 WebGL 同步。

有了着色器，我们只需几行代码、一点数学知识以及大量的实验和试错成功，就可以创造出令人惊叹的东西。在本教程中，我将向您展示我的设置以及如何使用 Three.js 中的着色器在滚动上获得有趣的扭曲和颗粒效果。

源码

https://github.com/jankohlbach/codrops-shader-on-scroll

在线预览

https://tympanus.net/Tutorials/ShaderOnScroll/

启动

yarn installyarn dev

感谢您的阅读

在看点赞好文不断

http://mp.weixin.qq.com/s?__biz=MzIzOTkxMTI2MA==&mid=2247490596&idx=1&sn=e4f2a02b87f4c729956a83f8ba03f8f0

初识 Three.js 的奇妙世界，走进三维空间，与小编一起拥抱前端技术，涉及WebGL、WebGPU、Threejs、Shader、GIS、VR/AR、数字孪生、3D图形学等。

最新文章

Three.js 程序化模型

Three.js 点云实验，效果炸裂！

Three.js 地球交互案例

Three.js 保时捷 911

基于 React-Three-Fiber 物理特效案例

Three.js 炫酷背景 3D 网格

Three.js 具备物理特性的汽车，酷！

Three.js 灯光跟随炫酷蜘蛛侠

Three.js 制作特漂亮的行星

Three.js 苹果设备展示

Three.js 特效风暴龙卷风

Three.js 平滑运动的秒针

Blender + Three.js 硬核小车

Three.js 莫比乌斯带

Three.js 炫酷极光特效

Three.js 时空隧道

Three.js 霓虹灯跟随鼠标光标

Three.js 网格位移纹理与RGB偏移

Three.js 实现跟随物体的2d标签文本

Three.js 之 JS 啤酒 - 万圣节版

Three.js 可动人偶的简单模型

Three.js 程序化 3D 资产，开源

Three.js 和 WebVideo 动画

Three.js 几十个特效案例！快收藏！

Three.js 轮缘具有粗糙度的轮子

Three.js 勇敢牛牛

Three.js 逼真的海面效果

Three.js + 高德地图，打造智慧景区大屏

Three.js 球体着色器

Three.js 古怪的艺术画廊

Three.js 简约的3D房间

Three.js 三角形特效

Three.js 终极角色配置器

今年这情况，大家还是多一手准备吧！

Three.js 之 ThreePipe框架

Three.js 假 3D 图像？

Three.js 泡泡场景

Three.js 页面滚动扭曲和颗粒效果

Three.js 自定义材质创建动画位移球体

Three.js 12个免费 3D 动态图形

Three.js 自定义shader实现线元素

Three.js 令人惊叹的个人网站

Three.js 蒸汽机模型基于现实世界的套件

Three.js 变形动画

Three.js 彩色玻璃

Three.js + 高德地图，实现飞线、运动边界和炫酷标牌

Three.js 我的互动花园

Three.js 离子特性启发的动画

Three.js 有趣的 3D 航行

Three.js 雨和屋顶

分类

原创标签

时事社会财经军事教育体育科技汽车科学房产搞笑综艺明星音乐动漫游戏时尚健康旅游美食生活摄影宠物职场育儿情感小说曲艺文化历史三农文学娱乐电影视频图片新闻宗教电视剧纪录片广告创意壁纸头像心灵鸡汤星座命理教育培训艺术文化金融财经健康医疗美妆时尚餐饮美食母婴育儿社会新闻工业农业时事政治星座占卜幽默笑话独立短篇连载作品文化历史科技互联网

发布位置

广东北京山东江苏河南浙江山西福建河北上海四川陕西湖南安徽湖北内蒙古江西云南广西甘肃辽宁黑龙江贵州新疆重庆吉林天津海南青海宁夏西藏香港澳门台湾美国加拿大澳大利亚日本新加坡英国西班牙新西兰韩国泰国法国德国意大利缅甸菲律宾马来西亚越南荷兰柬埔寨俄罗斯巴西智利卢森堡芬兰瑞典比利时瑞士土耳其斐济挪威朝鲜尼日利亚阿根廷匈牙利爱尔兰印度老挝葡萄牙乌克兰印度尼西亚哈萨克斯坦塔吉克斯坦希腊南非蒙古奥地利肯尼亚加纳丹麦津巴布韦埃及坦桑尼亚捷克阿联酋安哥拉