V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ciaochaos
V2EX  ›  React

开了个 React 组件库,一键给网页添加 WebGL 动态背景,欢迎 PR!

  •  7
     
  •   ciaochaos ·
    ciaochaos · 54 天前 · 6477 次点击
    这是一个创建于 54 天前的主题,其中的信息可能已经有所发展或是发生改变。

    刚开始整,架构还不是很完善,欢迎讨论~~

    第 1 条附言  ·  50 天前
    更新了一个 Slides 组件!可以把 MDX 转为 React ,并加上动态背景 & 动画组件,欢迎尝试

    https://uvcanvas.com/docs/components/slides

    74 条回复    2024-03-25 12:20:24 +08:00
    lawted
        1
    lawted  
       54 天前
    赞👍
    rizon
        2
    rizon  
       54 天前 via iPhone
    支持,佩服这些可以做漂亮 ui 的大佬
    leoskey
        3
    leoskey  
       54 天前
    效果很赞👍
    HaroldFinchNYC
        4
    HaroldFinchNYC  
       54 天前
    这是我浏览器版本不够的原因么?

    guguji5
        5
    guguji5  
       54 天前
    很赞,但是这几个图好像没显示出来

    ciaochaos
        6
    ciaochaos  
    OP
       54 天前
    @HaroldFinchNYC @guguji5 你们发现了华点 😀 这几个还只是占位,我现在边开发边部署了,还没有做分支管理
    LinYa
        7
    LinYa  
       54 天前
    我想知道,作为初级的前端开发者,实现这些渐变动态背景需要学习哪些知识吗?例如需要找计算机图形学方面的书籍来看吗?
    ciaochaos
        8
    ciaochaos  
    OP
       54 天前   ❤️ 3
    @LinYa 如果是想直接上手 WebGL 我推荐这篇: https://www.labri.fr/perso/nrougier/python-opengl/,也可以用 https://github.com/pmndrs/react-three-fiber 快速搭一些前端。图形学的书体系都比较复杂,比较值得参考的是 Real-Time Rendering 和 Physically Based Rendering 这两本,除此之外还可以看看 Unity 的 ShaderLab / Shader Graph / Compute Shader
    johnnyNg
        9
    johnnyNg  
       54 天前
    什么时候支持 webgpu
    litor
        10
    litor  
       54 天前
    赞👍,已 star
    Steps
        11
    Steps  
       54 天前
    我从 <Serenex /> 之后不支持了
    ciaochaos
        12
    ciaochaos  
    OP
       54 天前
    @johnnyNg 等 WGSL 的标准吵完吧哈哈
    ciaochaos
        13
    ciaochaos  
    OP
       54 天前
    @Steps 还没做,这是在画大饼呢 🤣
    liarsa
        14
    liarsa  
       54 天前
    已点 star
    rm0gang0rf
        15
    rm0gang0rf  
       54 天前
    没有 react 的怎么办...
    ciaochaos
        16
    ciaochaos  
    OP
       54 天前
    @rm0gang0rf 如果发展的好的话,后面我看看能不能抽出一个通用的~
    LinYa
        17
    LinYa  
       54 天前
    @ciaochaos #8 好哒 Thanks♪(・ω・)ノ
    MoTao
        18
    MoTao  
       54 天前
    支持支持,谢谢大佬贡献
    tbc3211
        19
    tbc3211  
       54 天前
    rm0gang0rf
        20
    rm0gang0rf  
       54 天前
    @ciaochaos 抽吧, react 才几个人
    vczyh
        21
    vczyh  
       54 天前
    @rm0gang0rf 哈哈哈哈
    rabbbit
        22
    rabbbit  
       54 天前
    shadertoy 的默认协议为 CC BY-NC-SA 3.0 DEED ,需要署名且禁止商业使用。
    这可能会导致一定的协议问题,可以改为由用户上传或分发 Shader 。

    https://creativecommons.org/licenses/by-nc-sa/3.0/deed.zh-hans
    https://www.shadertoy.com/terms
    rabbbit
        23
    rabbbit  
       54 天前
    并且 cc3.0 限制不能改变协议
    ciaochaos
        24
    ciaochaos  
    OP
       54 天前
    @rabbbit nice 感谢,起步阶段先加了一些 shadertoy ,后续尽可能保持原创并给这几个来自 shadertoy 的打上 non-commercial 的标签
    ciaochaos
        25
    ciaochaos  
    OP
       54 天前
    @rabbbit 不能改变协议的协议,就只能要么后续下架,要么留联系方式请作者联系了,哈哈
    LiuJiang
        26
    LiuJiang  
       54 天前
    已 star ,谢谢大佬贡献
    rabbbit
        27
    rabbbit  
       54 天前
    @ciaochaos
    感觉挂个标签让用户自己选择就行,cc3.0 应该不像 GPL 传染吧。
    ciaochaos
        28
    ciaochaos  
    OP
       54 天前
    @rabbbit 嗯嗯
    alphardex
        29
    alphardex  
       54 天前 via iPhone   ❤️ 1
    同喜欢玩 Shader ,资瓷下
    xieqiqiang00
        30
    xieqiqiang00  
       53 天前 via Android
    v2 里少有的的真正让人眼前一亮的项目
    admol
        31
    admol  
       53 天前
    和我想的加背景有点不一样,我以为是给某个 Div 加背景,结果是占位加背景。

    <Zenitho /> 好像有 BUG ,我放在我一个 div 里面的,就它宽度会 1680 ,其他都是和外面 Div 一样的宽度

    <div class="isLoaded"><canvas style="--gradient-color-1:#ef008f; --gradient-color-2:#6ec3f4; --gradient-color-3:#7038ff; --gradient-color-4:#ffba27;" width="1680" height="600" class="isLoaded"></canvas></div>
    admol
        32
    admol  
       53 天前
    xmtpw
        33
    xmtpw  
       53 天前
    支持大佬,加星
    ciaochaos
        34
    ciaochaos  
    OP
       53 天前
    @admol 666

    也感谢各位支持!现在这个项目还很不完善哈哈,受宠若惊,后面想加一个 MDX 的幻灯片组件,然后可以一键加上动态背景~欢迎前来交流
    hellofreckles
        35
    hellofreckles  
       53 天前
    逻辑不复杂,完全可以用一套适配层生成 react vue selvet 一系列库
    rain0002009
        36
    rain0002009  
       53 天前
    字体背景搞成这样的是不是更炫酷一点
    7gugu
        37
    7gugu  
       53 天前
    感觉 UI 很精致
    murongxdb
        38
    murongxdb  
       53 天前
    Jack927
        39
    Jack927  
       53 天前
    希望有 js 原生的版本,或者 web component 的版本,这样就能在任何地方使用了。
    Cubat
        40
    Cubat  
       53 天前
    太强了,很精致
    drylong
        41
    drylong  
       52 天前
    very good ! 使我领结旋转!
    最近在学习可视化 又有项目可以学习了
    泰裤辣!
    xiaojun996
        42
    xiaojun996  
       52 天前
    很酷很精致很帅!
    abcdecsf
        43
    abcdecsf  
       52 天前
    👍🏻赞
    q2677855779
        44
    q2677855779  
       52 天前
    酷炫
    chengo
        45
    chengo  
       52 天前
    顺手看了下主页,原来是之前做 SD + QR code 的那位大佬,而且已经商业化了,厉害。
    Leviathann
        46
    Leviathann  
       52 天前
    这些特效的名字是怎么起的
    LHRUN
        47
    LHRUN  
       52 天前
    牛逼 已 star
    ciaochaos
        48
    ciaochaos  
    OP
       52 天前   ❤️ 2
    @Leviathann GPT4:给我一些像宜家家居命名的名字
    Leviathann
        49
    Leviathann  
       52 天前
    @ciaochaos 听说宜家家居不少是有具体意义的瑞典语单词,只不过都是音译,让人不明觉厉
    oneWill
        50
    oneWill  
       51 天前
    支持,stared
    oneWill
        51
    oneWill  
       51 天前
    能增加支持自定义背景动态图吗
    daguozi
        52
    daguozi  
       50 天前
    已经用上了!谢谢 hard work 很给力!只是有点太鲜艳了我用了 grayscale 直接 filter 了一下下。希望以后有更多的 design !
    www.eletypes.com 我简单地给小网站加了几个 theme 以后慢慢调色。很好用!
    谢谢老哥。以前我试着 babylonjs 写过类似的背景组件但是没有结果 performance 的问题。
    ciaochaos
        53
    ciaochaos  
    OP
       50 天前
    @daguozi wow cool

    @oneWill 目前还没有
    ciaochaos
        54
    ciaochaos  
    OP
       50 天前
    更新了一个 Slides 组件!可以把 MDX 转为 React ,并加上动态背景 & 动画组件,欢迎尝试

    https://uvcanvas.com/docs/components/slides

    silencil
        55
    silencil  
       50 天前
    大佬啊 网友很漂亮
    lune
        56
    lune  
       50 天前
    帅👍
    okakuyang
        57
    okakuyang  
       50 天前 via iPhone
    有没有商业化的思路?或者走捐赠的想法?
    dartabe
        58
    dartabe  
       50 天前
    好看的 单独看没啥感觉 放到页面里挺酷的
    vinsony
        59
    vinsony  
       50 天前
    opulento 那个有点酷哦
    heftyMan
        60
    heftyMan  
       50 天前
    那么我就要去出个 Vue3 版了,哈哈哈
    ciaochaos
        61
    ciaochaos  
    OP
       50 天前
    @Leviathann hhh 确实
    ciaochaos
        62
    ciaochaos  
    OP
       50 天前
    @okakuyang 没有,side project 玩玩

    @heftyMan 哈哈哈 antfu 的 slidev 更新很勤
    veveue
        63
    veveue  
       50 天前
    来点国风水墨的
    lijianan
        64
    lijianan  
       50 天前
    star 了,不错
    wolfan
        65
    wolfan  
       50 天前
    CPU 终结者
    ceeeeeeeeeeeeeeb
        66
    ceeeeeeeeeeeeeeb  
       50 天前
    大佬🍵
    gxvsko
        67
    gxvsko  
       50 天前
    https://particles.js.org/
    粒子类的动态背景可以看下这个库,看看有没有参考的地方
    goldeye0351
        68
    goldeye0351  
       49 天前 via iPhone
    up ,cool ,star
    FByron
        69
    FByron  
       49 天前
    大佬请问怎样全屏幕展示呢 react+tailwindcss
    skyworker
        70
    skyworker  
       49 天前
    挺好玩的, 能不能升级支持一些类似 BI 之类的商业效果
    tedding
        71
    tedding  
       46 天前 via iPhone
    提问:我能抄一份 Angular 的组件库吗😬
    ciaochaos
        72
    ciaochaos  
    OP
       43 天前
    @tedding 抄吧抄吧哈哈
    devzhaoyou
        73
    devzhaoyou  
       36 天前
    牛 x 的很,star 一波
    ciaochaos
        74
    ciaochaos  
    OP
       33 天前
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3017 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 13:33 · PVG 21:33 · LAX 06:33 · JFK 09:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.