V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
but0n

一个炫酷的 3D 破碎效果网页

  •  
  •   but0n ·
    but0n · Jun 28, 2018 · 7272 views
    This topic created in 2869 days ago, the information mentioned may be changed or developed.
    44 replies    2018-07-08 08:43:33 +08:00
    ingin
        1
    ingin  
       Jun 28, 2018 via Android   ❤️ 1
    ballshapesdsd
        2
    ballshapesdsd  
       Jun 28, 2018
    你这明明是表面爆炸。。
    maemolee
        3
    maemolee  
       Jun 28, 2018   ❤️ 1
    卧槽,我的风扇起飞了。
    kY8mbXW833Lu28xn
        4
    kY8mbXW833Lu28xn  
       Jun 28, 2018 via Android
    Vitta
        5
    Vitta  
       Jun 28, 2018

    头晕
    zeroDev
        6
    zeroDev  
       Jun 28, 2018 via Android
    szzhiyang
        7
    szzhiyang  
       Jun 28, 2018
    这个效果的使用场景有哪些?
    agdhole
        8
    agdhole  
       Jun 28, 2018
    炫酷
    Nick
        9
    Nick  
       Jun 28, 2018
    @szzhiyang 现在很多撒币的网站都想把页面做得很酷炫,这个挺适合的:)
    Willjim
        10
    Willjim  
       Jun 28, 2018 via Android
    @Nick 哈哈哈,所以球炸出来的都是币吗😂?

    提醒大家手机看的时候摇晃手机效果更不错。
    zst
        11
    zst  
       Jun 29, 2018 via Android
    不知道为什么 QQ 浏览器打开看不到.....
    OpenJerry
        12
    OpenJerry  
       Jun 29, 2018 via Android
    someonedeng
        13
    someonedeng  
       Jun 29, 2018
    @maemolee +1,我电脑风扇转的飞机引擎似的
    cedoo
        14
    cedoo  
       Jun 29, 2018
    chrome 67, bug 显示不了效果
    but0n
        15
    but0n  
    OP
       Jun 29, 2018 via iPhone
    @cedoo 有什么报错吗?
    skdyk
        16
    skdyk  
       Jun 29, 2018
    jquery.ui.touch-punch.min.js:11 Uncaught TypeError: Cannot read property 'mouse' of undefined

    render.js:13 Uncaught TypeError: Cannot read property 'getExtension' of null
    xiaket
        17
    xiaket  
       Jun 29, 2018
    让我想起塞尔达的神庙...
    but0n
        18
    but0n  
    OP
       Jun 29, 2018 via iPhone
    @skdyk 第一个报错可以忽略,实际上并没有用到 jQuery-touch。第二个报错看样子是没有拿到 WebGL 上下文,什么浏览器?
    skdyk
        19
    skdyk  
       Jun 29, 2018
    @but0n Chrom 67.0.3396.99
    but0n
        20
    but0n  
    OP
       Jun 29, 2018
    @skdyk 我也是 67.0.3396.99 (Official Build) (64-bit), 你是 Android 吗? 我把 jquery-touch 去掉了, 你再试试
    but0n
        21
    but0n  
    OP
       Jun 29, 2018
    @zst 微信是可以的, qq 浏览器好像有些魔改
    AaronWang13
        22
    AaronWang13  
       Jun 29, 2018
    赞!!
    shuizhengqi
        23
    shuizhengqi  
       Jun 29, 2018
    我都怀疑你是不是放了挖矿了,cpu 瞬间百分百
    lyz745704689
        24
    lyz745704689  
       Jun 29, 2018
    看了 10 分钟,也没有爆呀。。。
    but0n
        25
    but0n  
    OP
       Jun 29, 2018 via iPhone
    @lyz745704689 你有没有滑动页面?
    but0n
        26
    but0n  
    OP
       Jun 29, 2018 via iPhone
    @shuizhengqi

    我还没那水平,
    是比较耗 GPU,瞬间百分百不会吧,这个页面只有在鼠标滑动或页面滚动时才会重新渲染
    zk342800
        27
    zk342800  
       Jun 29, 2018 via Android
    不错啊
    cqhme
        28
    cqhme  
       Jun 29, 2018 via Android
    我以为是模拟玻璃破裂 3d 效果……

    不过仍然很赞
    syt123450
        29
    syt123450  
       Jun 29, 2018   ❤️ 1
    cool. 膜拜直接写 webgl 底层的大神
    fourstring
        30
    fourstring  
       Jun 30, 2018 via Android
    膜拜大佬
    lyz745704689
        31
    lyz745704689  
       Jun 30, 2018
    @but0n IE11 和 edge 浏览器没有效果,换个浏览器可以看到了,挺炫酷的。
    Actrace
        32
    Actrace  
       Jun 30, 2018
    确实很炫,不过这个球旋转的时候似乎有一些锯齿,楼主有解决方案吗
    but0n
        33
    but0n  
    OP
       Jun 30, 2018 via iPhone
    @Actrace 三角形貌似没有锯齿吧,你是指球体不够光滑吗?
    Actrace
        34
    Actrace  
       Jun 30, 2018
    @but0n 对的,滚动的时候会出现锯齿。
    but0n
        35
    but0n  
    OP
       Jun 30, 2018 via iPhone
    @Actrace 这个不是 bug,是 feature ←_←
    https://github.com/but0n/frag3d.js/blob/master/static/scripts/frag3d.js#L24
    后面那个参数是球体的 subdivisions,目前算低面数球体,所以边缘不够光滑,表面看起来光滑是因为法线有插值。

    面数过多的话会更耗性能,你可以在本地体验下
    Actrace
        36
    Actrace  
       Jun 30, 2018
    @but0n 可以出几个细腻版本的看看效果。
    but0n
        37
    but0n  
    OP
       Jul 1, 2018
    @Actrace
    https://but0n.github.io/frag3d.js/index.html#100
    试试这个, 后面数字可以自己改,
    建模那块是自己写的, 好像存在一些问题, 在某些段数生成出来的模型会残缺
    but0n
        38
    but0n  
    OP
       Jul 1, 2018 via iPhone
    @lyz745704689
    刚才试了下,Edge 42.17134.1.0 是正常的,
    IE 没画面,貌似是因为 IE 不支持 css 变量
    ResidualWind
        39
    ResidualWind  
       Jul 1, 2018
    360 急速浏览器报错,,,,没任何效果
    but0n
        40
    but0n  
    OP
       Jul 1, 2018 via iPhone
    @ResidualWind 手头上没有 360,贴一下报错信息吧
    but0n
        42
    but0n  
    OP
       Jul 1, 2018 via iPhone
    @ResidualWind 我修改了,你再试试
    but0n
        44
    but0n  
    OP
       Jul 8, 2018 via iPhone
    @ResidualWind https://m.baidu.com/sf_zd/question/515795380.html?word=360 浏览器%20webgl&ms=1&rid=8413559286294154887
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5748 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 110ms · UTC 03:46 · PVG 11:46 · LAX 20:46 · JFK 23:46
    ♥ Do have faith in what you're doing.