AtomGit开源社区

不知道大家有没有同样的感觉：

今年的 “金三银四”，似乎没有想象中那么热闹。
尤其是 前端岗位，不少公司都在收缩，机会明显少了很多。

我最近也参加了几场大厂面试（我面的是 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 代码，如果缺乏必要的基础，建议学习上面的教程。

注：代码使用了 react 框架，你也可以让 ai 改造为你的熟悉的技术栈，例如 vue 或者 html：

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";