分享下从国庆节做到劳动节的 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 盘的形式，可以很方便展示自己喜欢的东西

[secondwtq]

永硕 E 盘 ... 楼主几岁了？

[SuneBear]

@secondwtq 初中的时候挺喜欢这种资源汇集形式的，感觉不比现在的 Notion 个人主页差，Notion 的中性色 + Emoji 更符合现代 UI ，不过网络问题一直没有得到解决

[rabbbit]

这个水是 shader ？

[ccyu220]

赞👍

[cccb]

m1 chrome cpu 占用直接起飞

[SuneBear]

@rabbbit 不知道你说的哪个地方的水，我在网站中总共用了三种方式实现 Wave 效果：1 ） Svg Sine Wave ，基于 d3-shape 生成 path ，再用 ticker 做动画，2 ）加载时的 Wave ，这里用到了 perlin noise ，3 ） 3D 场景的水面，几何是一个两三角 Plane ，材质是 Shader ，其中移动时的轨迹用到 FBO 记录后传给水面

[SuneBear]

@cccb 包含动画的 3D 场景资源消耗高暂时无解，目前用到的渲染方式和游戏一样，每次都会重新执行所有 Draw Call + Render 。没办法像 DOM 一样做 Patch

[ddiu8081]

三个岛逛完了，从文案到实际的渲染都很厉害！👍

[SuneBear]

@ddiu8081 感谢体验，目前三渲二的效果还很糟糕，折腾了一些 Post Processing 导致帧数直线下降，不敢再搞了～后续打算学这门课程《 GAMES101: 现代计算机图形学入门》，把更多的事情放到 GPU 中处理

[rabbbit]

咦我这笔记本很流畅啊，4600H 才占了 5%。
话说那个钥匙在哪？

[rabbbit]

显卡占了 25%，其实我觉着这个优化可以了。

[SuneBear]

@rabbbit 你是游戏本吗？我自己的本子是 Intel MBP ，打开像 PPT 一样（与用 Mac 玩 Dota 2 类似），用台式机可以正常刷帧。箱子的钥匙我还没有做～预计后面是放一些福利内容进去

[teem]

很喜欢简单的手绘 UI 风格。

[DreamCMS]

苹果树下

[LeegoYih]

看上去很棒

[yl20181003]

效果很棒，不过有点点卡，我笔记本只有核显 hhh

[WhateverYouLike]

真好看呀🥰，不过确实有点点卡。设备 Android Chrome mobile

[lizhenda]

iphone 超级流畅

[tq0106]

炫酷！

[isSamle]

牛逼 3 连， 马上（抄）研究下，我之前想写一个 3D 小镇，然后用建筑代表自己的项目，图书馆→文库，电影院→观影 h5 ，库房→物流管理，写字楼→项目管理……但是 Three.js 随便导入一个模型都好大