别再投PDF简历了,用3D网页简历给HR来个暴击

投简历的兄弟姐妹们，你们有没有这种感：

HR扫一眼你的PDF简历，最多看30秒就翻过去了。一页纸挤满了经历，人家根本记不住你是谁。

你辛辛苦苦写的项目经验、获奖荣誉，想在几万人里被记住，比登天还难。

于是有人做了个狠活：一个3D个人简历网页。

打开你的简历，直接是一个3D场景——一个Q版小人就站在网页里，你往下滚，相机跟着动，小人的眼睛还一直盯着你的光标。

这玩意儿，HR想不记住都难。

方案介绍

这就是今天要分享的开源项目——sen-3d-resume，一个基于React Three Fiber的滚动式个人3D简历。

核心卖点：

• • 滚动驱动3D场景，简历像一部小电影
• • 人物模型眼睛跟随光标，很有魂
• • 纯前端SPA，无需后端，部署超简单
• • MIT许可证，随便学随便用

技术栈：React Three Fiber + TypeScript + zustand

web/          前端应用（React Three Fiber + TypeScript）
blender/      场景三维源文件 sen.blend（人物+相机动画+对焦锚点）
tutor/        改造教程（部署、贴纸等）

运行起来就三行：

cd web
npm install
npm run dev   # http://localhost:5173

效果与亮点

跟普通简历比，这玩意儿简直是降维打击：

• • 3个区块：首屏About → 履历时间轴 → 作品集横向画廊
• • 眼睛跟随：人物视线随光标移动，细节拉满
• • 胶片噪点 + Loading遮罩 + 滚动渐暗：氛围感十足
• • 30秒记住你：面试聊到简历时，人家第一反应就是"哦那个3D小人！"

评论区网友直接炸了：

"太cool了"
"创意无敌"
"那个风格的图咋生的，感觉差距好大"

内容全数据驱动，改起来丝滑

这个项目最懂你的地方——内容和表现彻底分离，改内容基本只动数据文件：

每个作品一个极简markdown，媒体放public/works/下用绝对路径引用，会自动渲染成完整详情。

换人物模型（glb约定）

想换成你自己的小人？替换public/models/me.glb即可（源文件在blender/sen.blend，用Blender改完导出覆盖）。

代码按对象名字在glb里查找：

• • CameraAction：相机+相机动画（滚动驱动的镜头路径）
• • focus-start/focus-0：首页对焦锚点
• • focus-1~`focus-5`：时间轴对焦锚点
• • focus-works：作品区对焦锚点
• • 名字含eye的网格：眼睛（跟随鼠标）

相机帧约定：第0帧=首页，第50·k帧=第k个时间轴节点，最后一帧=作品区。

部署也是傻瓜级

npm run build   # → dist/

vite.config.ts里base: './'，产物用相对路径。dist/可直接双击打开，也能传到任意子目录。

部署就是把dist/传到任何静态托管：Netlify / Vercel / GitHub Pages / 对象存储 / 自有服务器，都行。

想零代码做一个？

不想写代码、不想折腾环境？作者还顺手推了个intro3d.com：一个零代码的3D个人主页DIY平台，小白也能上手，一站式解决制作与部署，比这个项目少了「眼球跟随光标」，其余相对完整。

GitHub：

https://github.com/dayinji/sen-3d-resume