分享下从国庆节做到劳动节的 3D 个人网站

[SuneBear]

最早个人网站是用 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 盘的形式，可以很方便展示自己喜欢的东西

[maypu]

可以，真的牛，而且看起来楼主年龄很小

[SuneBear]

@isSamle 牛，期待你早日发布，做个虚拟电影院出来，放一些会座椅和观众白噪音会非常有感觉。目前仅用 Three.js 实现成本确实太高了，各种模型放到 Blender 可以用，在 Web 上抠门文件体积是绕不开的话题…

[oldshensheep]

楼主 27 岁
@maypu
@secondwtq

[VitaminC1989]

楼主这也太强了吧 请问手绘 UI 效果的库会开源吗

[bytesfold]

棒

[SuneBear]

@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/

[ixoy]

有趣的体验。期待楼主多放几个彩蛋，哈哈 O(∩_∩)O

[WillBC]

顺着你的 GitHub 找到了 https://sunebear.github.io/Piano-Flow/#/pieces

很有意思，谢谢分享。

[LonelyShadow]

很棒的网站，OP 厉害👍

[orangeshine]

OP 好棒👍
学习了

[superliwei]

挺棒的，M1 的 mini 体验很流畅，给你点赞👍

[yyh0808]

很可爱，有意思👍

[EvilDevilJin]

好厉害 好牛逼

[dNib9U2o8x]

牛逼

[VitaminC1989]

@SuneBear 好嘞老哥 我这就去研究下

[easymbol]

厉害了 老哥

[lzcers]

好可爱

[unii23i]

挺可爱的

[hu1e]

效果好棒～不过我的 mbp 风扇声也拉满了😂

[Mexion]

效果可以