金三银四，面试官连连夸赞的个人网页，如何打造？

不知道大家有没有同样的感觉： 今年的 “金三银四”，似乎没有想象中那么热闹。 尤其是 前端岗位，不少公司都在收缩，机会明显少了很多。 我最近也参加了几场大厂面试（我面的是 AI 全栈开发岗）。 有一件事让我挺意外的。 某度的面试官在面试完后加微信聊天的时候说： “刚看到你简历上的个人网站时，就明显感觉到你是一个有技术追求的同学，还让 hr 赶快联系一下面试。” 然后就把这个网站发到分享到小红书上，b站上去了（之前看过类似的效果，特地复刻了一版），反响很不错，所以特此非常以下里面的技术细节。 效果如下： 点击跳转在线地址 同时，欢迎大家关注我的微信公众号：ai超级个人，会有更多的炫酷网页分享 这篇文章会稍微偏技术一些。 如果你： 对网页动效感兴趣 或者几乎没有 Three.js 基础 甚至不太懂 3D 这些思路依然很有价值。 尤其是在 你让 AI 帮你调试代码、改造项目的时候，理解这些结构会非常有帮助。 如果你想系统学习 Three.js，我只推荐一套教程： Three.js Journey（点击跳转 B 站） 这是我心中目前全球范围内，从 0 到 1 最完美的 Three.js 课程。说实话，市面上很多所谓的基础教程，且不说是否存在“割韭菜”的行为，单是乏味的教学逻辑就在浪费你的学习生命。 好了，回到正文。今天我们要深度拆解上面网站效果，以及解决如下三个核心问题： 1. 空间定位：如何在网页中调试模型位置？ 在 3D 世界里，任何模型都有它的坐标。以下面这个电脑模型为例： 模型默认被放置在原点 $(0, 0, 0)$，这通常没问题。但真正的痛点在于：摄像机应该架在哪？ 打个比方，这就好比现实中的人像摄影： 被拍的人 → 相当于 3D 模型 摄影师 → 相当于 Camera（相机） 模型在那不动，但摄影师的位置（Position）和对焦的方向（LookAt）决定了最终的画面。 而且我们能不能像在 Blender（知名的 3D 图形软件）里一样，在网页端也能直观地旋转、调整远近，从而找到那个最完美的视觉角度？如下图是 blender 的界面： 2. 跨次元融合：如何将真实网页嵌入 3D 场景？ 请看下图： 在这台 3D 电脑模型的屏幕中央，其实嵌套了一个真实的网页（前端术语叫 iframe）。 所以问题来了，在 three.js 中如何嵌套一个别的网站的网页呢？ 3. 精准对位：如何调试 iframe 的 3D 坐标？ 这是上一个问题的延伸。iframe（网页） 作为一个平面，在 3D 空间中同样拥有自己的坐标和旋转参数。但问题是： 你很难凭直觉盲猜出电脑模型那块屏幕的精确数值。 因此，我们需要一套可视化的调试界面。然后配合我们第一步提到的工具，让我们可以在页面上手动微调 iframe 的位置，直到它与模型屏幕完美贴合。 最后，直接将调试好的坐标参数“写死”在代码里就能保证初始化电脑模型和网页都在合适的坐标上。 接下来，我们一步一步，从 0 到 1 实现这个过程： 网页中调整相机位置小技巧 初始的时候，我们假设有如下代码（精简后的 demo ）。代码主要做的是将电脑的模型贴图加载进来。 如果你有不了解的代码块可以借助 ai 了解详细信息，因为已经是最基础的 three.js 代码，如果缺乏必要的基础，建议学习上面的教程。