安全下载,经人工审核 精选优质前端模板 支持定制开发咨询 持续更新资源
Three.js 黑洞引力透镜特效:GLSL 实时光线弯曲与吸积盘渲染
编号:黑洞特效

Three.js 黑洞引力透镜特效:GLSL 实时光线弯曲与吸积盘渲染

大小 38 KB
总文件 6 个
发布 2026-08-13
更新 2026-08-13
架构 Three.js + GLSL
分类 前端资源 - WebGL动画
目录 结构详情
童哲网
童哲网
 ·  专注前端模板资源分享
人工审核 安全可信

    这是一款黑洞引力透镜效果,基于 Three.js + GLSL 着色器实时渲染,全屏画面里没有一张贴图,全部由片元着色器逐像素算出来。它的核心是光线弯曲:屏幕上每个像素都发一条光线,在黑洞引力场里一步步积分推进,被吞掉的进入黑色视界,擦边而过的被拉成弯曲光弧——所以你能看到吸积盘绕过黑洞顶部再从底部翻上来的那个经典画面。吸积盘用体积积分累积亮度,还加了相对论多普勒效应,转向你这侧偏蓝更亮、远离一侧偏红变暗,符合真实观测中的不对称亮环。背景星空与星云同样被透镜扭曲,可以顺带看出时空的形变。

    后期串了四道处理:亮部提取、两轮高斯模糊、bloom 合成,最后走 ACES 色调映射,再补上色散、镜头鬼影和暗角。

    右侧面板可调曝光、辉光、转速、色温,能开关多普勒和星云,还提供低/中/高三档质量(本质是调整光线步进次数)。有意思的是可以往空间里输入一段文字,它会被摆在黑洞背后随透镜一起扭曲滚动。

    适用于科普展示、天文与科技主题页面、创意站首屏背景、WebGL 着色器学习参考等场景。

    

模板目录结构

    免责声明

    • 如非特殊说明,本站对本文提供的代码或者素材不拥有任何权利,其版权归原著者拥有。
    • 以上提供的代码或者素材均为作者提供和网友推荐收集整理而来,仅供学习和研究使用。
    • 如有侵犯你版权的,请来信(邮箱:tongzhewangluo@163.com)指出,核实后本站将立即改正。
    • 如有链接无法下载、失效或广告,请通过网站提供的微信联系作者!
    • 以上资源售价只是赞助,不代表代码或者素材本身价格,收取费用仅维持本站的服务器开销。
    • 所有代码素材效果均为演示打包,最终效果请参考演示效果,本站不提供任何技术支持和服务。
    • 代码素材均为虚拟物品,演示和描述无错的情况下,无法进行退换服务。

    最新资源

    纯 CSS 肥皂泡特效:渐变干涉色+多层高光的写实气泡

    肥皂泡动画

    纯 CSS 肥皂泡特效:渐变干涉色+多层高光的写实气泡
    Three.js 黑洞引力透镜特效:GLSL 实时光线弯曲与吸积盘渲染

    黑洞特效

    Three.js 黑洞引力透镜特效:GLSL 实时光线弯曲与吸积盘渲染
    深色拟物控制面板 UI:可拖拽旋钮+推子的纯 CSS 质感界面

    拟物化UI

    深色拟物控制面板 UI:可拖拽旋钮+推子的纯 CSS 质感界面
    GSAP 横向滚动 3D 卡片轮播:Coverflow 立体展示区

    横向滚动轮播

    GSAP 横向滚动 3D 卡片轮播:Coverflow 立体展示区
    GSAP 节点连线信息图(脑图)动画效果:SVG 路径描边+图标浮动

    脑图

    GSAP 节点连线信息图(脑图)动画效果:SVG 路径描边+图标浮动
    人力资源与猎头招聘服务 HTML 建站模板 | HR外包/人才测评/企业咨询三套首页

    沃弗斯

    人力资源与猎头招聘服务 HTML 建站模板 | HR外包/人才测评/企业咨询三套首页