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

破碎

炫酷

网页

效果

44 条回复 • 2018-07-08 08:43:33 +08:00

1

ingin

2018-06-28 19:34:59 +08:00 via Android

1

酷

2

ballshapesdsd

2018-06-28 19:36:05 +08:00

你这明明是表面爆炸。。

3

maemolee

2018-06-28 20:39:03 +08:00

1

卧槽，我的风扇起飞了。

4

1024MB

2018-06-28 20:41:39 +08:00 via Android

5

Vitta

2018-06-28 21:12:55 +08:00

赞
头晕

6

zeroDev

2018-06-28 21:14:27 +08:00 via Android

7

szzhiyang

2018-06-28 21:23:53 +08:00

这个效果的使用场景有哪些？

8

agdhole

2018-06-28 22:06:46 +08:00

炫酷

9

Nick

2018-06-28 22:15:45 +08:00

@szzhiyang 现在很多撒币的网站都想把页面做得很酷炫，这个挺适合的：）

10

Willjim

2018-06-28 22:23:52 +08:00 via Android

@Nick 哈哈哈，所以球炸出来的都是币吗😂？

提醒大家手机看的时候摇晃手机效果更不错。

11

zst

2018-06-29 00:34:08 +08:00 via Android

不知道为什么 QQ 浏览器打开看不到.....

12

OpenJerry

2018-06-29 00:35:39 +08:00 via Android

酷

13

someonedeng

2018-06-29 01:20:54 +08:00

@maemolee +1，我电脑风扇转的飞机引擎似的

14

cedoo

2018-06-29 09:31:58 +08:00

chrome 67, bug 显示不了效果

15

but0n

OP

2018-06-29 10:21:24 +08:00 via iPhone

@cedoo 有什么报错吗？

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

17

xiaket

2018-06-29 11:02:11 +08:00

让我想起塞尔达的神庙...

18

but0n

OP

2018-06-29 11:16:39 +08:00 via iPhone

@skdyk 第一个报错可以忽略，实际上并没有用到 jQuery-touch。第二个报错看样子是没有拿到 WebGL 上下文，什么浏览器？

19

skdyk

2018-06-29 11:46:39 +08:00

@but0n Chrom 67.0.3396.99

20

but0n

OP

2018-06-29 12:34:16 +08:00

@skdyk 我也是 67.0.3396.99 (Official Build) (64-bit), 你是 Android 吗? 我把 jquery-touch 去掉了, 你再试试

21

but0n

OP

2018-06-29 12:49:54 +08:00

@zst 微信是可以的, qq 浏览器好像有些魔改

22

AaronWang13

2018-06-29 16:22:33 +08:00

赞!!

23

shuizhengqi

2018-06-29 17:44:04 +08:00

我都怀疑你是不是放了挖矿了，cpu 瞬间百分百

24

lyz745704689

2018-06-29 18:02:48 +08:00

看了 10 分钟，也没有爆呀。。。

25

but0n

OP

2018-06-29 18:16:42 +08:00 via iPhone

@lyz745704689 你有没有滑动页面？

26

but0n

OP

2018-06-29 18:19:58 +08:00 via iPhone

@shuizhengqi

我还没那水平，
是比较耗 GPU，瞬间百分百不会吧，这个页面只有在鼠标滑动或页面滚动时才会重新渲染

27

zk342800

2018-06-29 19:01:42 +08:00 via Android

不错啊

28

cqhme

2018-06-29 20:39:04 +08:00 via Android

我以为是模拟玻璃破裂 3d 效果……

不过仍然很赞

29

syt123450

2018-06-29 20:47:32 +08:00

1

cool. 膜拜直接写 webgl 底层的大神

30

fourstring

2018-06-30 08:58:10 +08:00 via Android

膜拜大佬

31

lyz745704689

2018-06-30 09:26:15 +08:00

@but0n IE11 和 edge 浏览器没有效果，换个浏览器可以看到了，挺炫酷的。

32

Actrace

2018-06-30 12:09:29 +08:00

确实很炫，不过这个球旋转的时候似乎有一些锯齿，楼主有解决方案吗

33

but0n

OP

2018-06-30 12:15:12 +08:00 via iPhone

@Actrace 三角形貌似没有锯齿吧，你是指球体不够光滑吗？

34

Actrace

2018-06-30 15:20:15 +08:00

@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，目前算低面数球体，所以边缘不够光滑，表面看起来光滑是因为法线有插值。

面数过多的话会更耗性能，你可以在本地体验下

36

Actrace

2018-06-30 18:47:00 +08:00

@but0n 可以出几个细腻版本的看看效果。

37

but0n

OP

2018-07-01 01:09:19 +08:00

@Actrace
https://but0n.github.io/frag3d.js/index.html#100
试试这个, 后面数字可以自己改,
建模那块是自己写的, 好像存在一些问题, 在某些段数生成出来的模型会残缺

38

but0n

OP

2018-07-01 13:24:01 +08:00 via iPhone

@lyz745704689
刚才试了下，Edge 42.17134.1.0 是正常的，
IE 没画面，貌似是因为 IE 不支持 css 变量

39

ResidualWind

2018-07-01 13:29:23 +08:00

360 急速浏览器报错,,,,没任何效果

40

but0n

OP

2018-07-01 13:51:39 +08:00 via iPhone

@ResidualWind 手头上没有 360，贴一下报错信息吧

41

ResidualWind

2018-07-01 15:58:33 +08:00

@but0n https://i.niupic.com/images/2018/07/01/5xVq.png

42

but0n

OP

2018-07-01 16:43:36 +08:00 via iPhone

@ResidualWind 我修改了，你再试试

43

ResidualWind

2018-07-01 18:19:41 +08:00

https://i.niupic.com/images/2018/07/01/5xVF.png
@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