这是一个创建于 963 天前的主题，其中的信息可能已经有所发展或是发生改变。
最早个人网站是用 Hexo 做的，可以满足 Markdown 文档需求。 如果要自定义交互组件实现起来会比较麻烦，于是迁移到了 Nuxt 。 基于 Vue + Three.js 做了三件事：
1. 自我介绍
除了加一些点击彩蛋，还在结尾添加了以月为单位的回忆录
2. 手绘 UI
用 CSS + SVG Filter 模拟了一些扭曲效果，让 UI 看起来有手工感。如果不需要兼容 Safari ，这套方案完全可以用到生产环境中，可以省去很多切图
2. 3D 交互实验
这部分加载界面直接用 Canvas 2D 进行渲染，加载完后的场景用 WebGL 渲染。有一部分需要定位的 UI 会用到混合渲染。具体的幕后实现（从想法到实施）我做了 一个页面来详细说明
如果你对这三个部分感兴趣，可以去 https://github.com/SuneBear/sunebear.com 查看源代码
欢迎分享交流各种有趣的个人网站，比如把个人网站做成 Notion/永硕 E 盘的形式，可以很方便展示自己喜欢的东西
 |
1
secondwtq 2022-05-06 19:10:30 +08:00
永硕 E 盘 ... 楼主几岁了？
|
 |
2
SuneBear OP @secondwtq 初中的时候挺喜欢这种资源汇集形式的，感觉不比现在的 Notion 个人主页差，Notion 的中性色 + Emoji 更符合现代 UI ，不过网络问题一直没有得到解决
|
 |
3
rabbbit 2022-05-06 19:24:37 +08:00
这个水是 shader ？
|
 |
4
ccyu220 2022-05-06 19:25:17 +08:00
赞👍
|
 |
5
cccb 2022-05-06 19:26:31 +08:00
m1 chrome cpu 占用直接起飞
|
|
6
SuneBear OP  1
@rabbbit 不知道你说的哪个地方的水，我在网站中总共用了三种方式实现 Wave 效果：1 ） Svg Sine Wave ，基于 d3-shape 生成 path ，再用 ticker 做动画，2 ）加载时的 Wave ，这里用到了 perlin noise ，3 ） 3D 场景的水面，几何是一个两三角 Plane ，材质是 Shader ，其中移动时的轨迹用到 FBO 记录后传给水面
|
|
7
SuneBear OP @cccb 包含动画的 3D 场景资源消耗高暂时无解，目前用到的渲染方式和游戏一样，每次都会重新执行所有 Draw Call + Render 。没办法像 DOM 一样做 Patch
|
 |
8
ddiu8081 2022-05-06 19:46:13 +08:00 1
三个岛逛完了，从文案到实际的渲染都很厉害！👍
|
|
9
SuneBear OP @ddiu8081 感谢体验，目前三渲二的效果还很糟糕，折腾了一些 Post Processing 导致帧数直线下降，不敢再搞了～后续打算学这门课程《 GAMES101: 现代计算机图形学入门》，把更多的事情放到 GPU 中处理
|
|
10
rabbbit 2022-05-06 20:13:31 +08:00
咦我这笔记本很流畅啊，4600H 才占了 5%。
话说那个钥匙在哪？ |
|
11
rabbbit 2022-05-06 20:15:31 +08:00
显卡占了 25%，其实我觉着这个优化可以了。
|
|
12
SuneBear OP @rabbbit 你是游戏本吗？我自己的本子是 Intel MBP ，打开像 PPT 一样（与用 Mac 玩 Dota 2 类似），用台式机可以正常刷帧。箱子的钥匙我还没有做～预计后面是放一些福利内容进去
|
 |
13
teem 2022-05-06 22:18:32 +08:00 1
很喜欢简单的手绘 UI 风格。
|
 |
14
DreamCMS 2022-05-06 22:26:49 +08:00
苹果树下
|
 |
15
LeegoYih 2022-05-06 22:35:01 +08:00 1
看上去很棒
|
 |
16
yl20181003 2022-05-06 22:44:50 +08:00 1
效果很棒，不过有点点卡，我笔记本只有核显 hhh
|
 |
17
WhateverYouLike 2022-05-06 22:47:43 +08:00 1
真好看呀🥰，不过确实有点点卡。设备 Android Chrome mobile
|
 |
18
lizhenda 2022-05-06 23:11:51 +08:00 via iPhone 1
iphone 超级流畅
|
 |
19
tq0106 2022-05-06 23:41:58 +08:00 1
炫酷！
|
 |
20
isSamle 2022-05-07 08:53:39 +08:00 1
牛逼 3 连， 马上（抄）研究下，我之前想写一个 3D 小镇，然后用建筑代表自己的项目，图书馆→文库，电影院→观影 h5 ，库房→物流管理，写字楼→项目管理……但是 Three.js 随便导入一个模型都好大
|
 |
21
maypu 2022-05-07 09:20:17 +08:00 1
可以，真的牛，而且看起来楼主年龄很小
|
|
22
SuneBear OP @isSamle 牛，期待你早日发布，做个虚拟电影院出来，放一些会座椅和观众白噪音会非常有感觉。目前仅用 Three.js 实现成本确实太高了，各种模型放到 Blender 可以用，在 Web 上抠门文件体积是绕不开的话题…
|
 |
23
oldshensheep 2022-05-07 09:47:05 +08:00 1
|
 |
24
VitaminC1989 2022-05-07 10:17:37 +08:00
楼主这也太强了吧 请问手绘 UI 效果的库会开源吗
|
 |
25
bytesfold 2022-05-07 10:35:17 +08:00
棒
|
|
26
SuneBear OP @VitaminC1989 已经是开源的，具体链接 https://github.com/SuneBear/sunebear.com/tree/master/components/cear-ui 。目前这个 UI 库没有写文档，我建议直接看 SVG Distort Filter 相关文章 https://www.smashingmagazine.com/2021/09/deep-dive-wonderful-world-svg-displacement-filtering/
|
 |
27
ixoy 2022-05-07 11:26:28 +08:00 1
有趣的体验。期待楼主多放几个彩蛋，哈哈 O(∩_∩)O
|
 |
28
WillBC 2022-05-07 13:29:57 +08:00 1
|
 |
29
LonelyShadow 2022-05-07 13:49:17 +08:00 1
很棒的网站，OP 厉害👍
|
 |
30
orangeshine 2022-05-07 14:23:46 +08:00 via iPhone 1
OP 好棒👍
学习了 |
 |
31
superliwei 2022-05-07 16:21:09 +08:00 1
挺棒的，M1 的 mini 体验很流畅，给你点赞👍
|
 |
32
yyh0808 2022-05-07 16:25:26 +08:00 1
很可爱，有意思👍
|
 |
33
EvilDevilJin 2022-05-07 16:48:33 +08:00 1
好厉害 好牛逼
|
 |
34
dNib9U2o8x 2022-05-07 18:40:38 +08:00 1
牛逼
|
|
35
VitaminC1989 2022-05-08 09:39:40 +08:00 via iPhone
@SuneBear 好嘞老哥 我这就去研究下
|
 |
36
easymbol 2022-05-09 10:07:49 +08:00 1
厉害了 老哥
|
 |
37
lzcers 2022-05-11 16:01:42 +08:00 1
好可爱
|
 |
38
unii23i 2022-05-11 17:17:08 +08:00 1
挺可爱的
|
 |
39
hu1e 2022-05-13 17:53:22 +08:00
效果好棒～不过我的 mbp 风扇声也拉满了😂
|
 |
40
Mexion 2022-05-16 10:44:15 +08:00
效果可以
|
Select Language