V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
but0n
V2EX  ›  分享创造

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

  •  
  •   but0n ·
    but0n · 2018-06-28 19:27:12 +08:00 · 6562 次点击
    这是一个创建于 2338 天前的主题,其中的信息可能已经有所发展或是发生改变。
    44 条回复    2018-07-08 08:43:33 +08:00
    ingin
        1
    ingin  
       2018-06-28 19:34:59 +08:00 via Android   ❤️ 1
    ballshapesdsd
        2
    ballshapesdsd  
       2018-06-28 19:36:05 +08:00
    你这明明是表面爆炸。。
    maemolee
        3
    maemolee  
       2018-06-28 20:39:03 +08:00   ❤️ 1
    卧槽,我的风扇起飞了。
    1024MB
        4
    1024MB  
       2018-06-28 20:41:39 +08:00 via Android
    Vitta
        5
    Vitta  
       2018-06-28 21:12:55 +08:00

    头晕
    zeroDev
        6
    zeroDev  
       2018-06-28 21:14:27 +08:00 via Android
    szzhiyang
        7
    szzhiyang  
       2018-06-28 21:23:53 +08:00
    这个效果的使用场景有哪些?
    agdhole
        8
    agdhole  
       2018-06-28 22:06:46 +08:00
    炫酷
    Nick
        9
    Nick  
       2018-06-28 22:15:45 +08:00
    @szzhiyang 现在很多撒币的网站都想把页面做得很酷炫,这个挺适合的:)
    Willjim
        10
    Willjim  
       2018-06-28 22:23:52 +08:00 via Android
    @Nick 哈哈哈,所以球炸出来的都是币吗😂?

    提醒大家手机看的时候摇晃手机效果更不错。
    zst
        11
    zst  
       2018-06-29 00:34:08 +08:00 via Android
    不知道为什么 QQ 浏览器打开看不到.....
    OpenJerry
        12
    OpenJerry  
       2018-06-29 00:35:39 +08:00 via Android
    someonedeng
        13
    someonedeng  
       2018-06-29 01:20:54 +08:00
    @maemolee +1,我电脑风扇转的飞机引擎似的
    cedoo
        14
    cedoo  
       2018-06-29 09:31:58 +08:00
    chrome 67, bug 显示不了效果
    but0n
        15
    but0n  
    OP
       2018-06-29 10:21:24 +08:00 via iPhone
    @cedoo 有什么报错吗?
    skdyk
        16
    skdyk  
       2018-06-29 10:49:57 +08:00
    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  
       2018-06-29 11:02:11 +08:00
    让我想起塞尔达的神庙...
    but0n
        18
    but0n  
    OP
       2018-06-29 11:16:39 +08:00 via iPhone
    @skdyk 第一个报错可以忽略,实际上并没有用到 jQuery-touch。第二个报错看样子是没有拿到 WebGL 上下文,什么浏览器?
    skdyk
        19
    skdyk  
       2018-06-29 11:46:39 +08:00
    @but0n Chrom 67.0.3396.99
    but0n
        20
    but0n  
    OP
       2018-06-29 12:34:16 +08:00
    @skdyk 我也是 67.0.3396.99 (Official Build) (64-bit), 你是 Android 吗? 我把 jquery-touch 去掉了, 你再试试
    but0n
        21
    but0n  
    OP
       2018-06-29 12:49:54 +08:00
    @zst 微信是可以的, qq 浏览器好像有些魔改
    AaronWang13
        22
    AaronWang13  
       2018-06-29 16:22:33 +08:00
    赞!!
    shuizhengqi
        23
    shuizhengqi  
       2018-06-29 17:44:04 +08:00
    我都怀疑你是不是放了挖矿了,cpu 瞬间百分百
    lyz745704689
        24
    lyz745704689  
       2018-06-29 18:02:48 +08:00
    看了 10 分钟,也没有爆呀。。。
    but0n
        25
    but0n  
    OP
       2018-06-29 18:16:42 +08:00 via iPhone
    @lyz745704689 你有没有滑动页面?
    but0n
        26
    but0n  
    OP
       2018-06-29 18:19:58 +08:00 via iPhone
    @shuizhengqi

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

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

    面数过多的话会更耗性能,你可以在本地体验下
    Actrace
        36
    Actrace  
       2018-06-30 18:47:00 +08:00
    @but0n 可以出几个细腻版本的看看效果。
    but0n
        37
    but0n  
    OP
       2018-07-01 01:09:19 +08:00
    @Actrace
    https://but0n.github.io/frag3d.js/index.html#100
    试试这个, 后面数字可以自己改,
    建模那块是自己写的, 好像存在一些问题, 在某些段数生成出来的模型会残缺
    but0n
        38
    but0n  
    OP
       2018-07-01 13:24:01 +08:00 via iPhone
    @lyz745704689
    刚才试了下,Edge 42.17134.1.0 是正常的,
    IE 没画面,貌似是因为 IE 不支持 css 变量
    ResidualWind
        39
    ResidualWind  
       2018-07-01 13:29:23 +08:00
    360 急速浏览器报错,,,,没任何效果
    but0n
        40
    but0n  
    OP
       2018-07-01 13:51:39 +08:00 via iPhone
    @ResidualWind 手头上没有 360,贴一下报错信息吧
    ResidualWind
        41
    ResidualWind  
       2018-07-01 15:58:33 +08:00
    but0n
        42
    but0n  
    OP
       2018-07-01 16:43:36 +08:00 via iPhone
    @ResidualWind 我修改了,你再试试
    ResidualWind
        43
    ResidualWind  
       2018-07-01 18:19:41 +08:00
    but0n
        44
    but0n  
    OP
       2018-07-08 08:43:33 +08:00 via iPhone
    @ResidualWind https://m.baidu.com/sf_zd/question/515795380.html?word=360 浏览器%20webgl&ms=1&rid=8413559286294154887
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1091 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:54 · PVG 06:54 · LAX 14:54 · JFK 17:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.