这是一个创建于 1323 天前的主题，其中的信息可能已经有所发展或是发生改变。
最早个人网站是用 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 玩 Dot 2 类似），用台式机可以正常刷帧。箱子的钥匙我还没有做～预计后面是放一些福利内容进去 |
 | 13 teem 2022-05-06 22:18:32 +08:00 1 很喜欢简单的手绘 UI 风格。 |
 | 14 TOTOP 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 体验很流畅，给你点赞 |
Select Language