ITom Dev：可在浏览器中行走的开源 3D WebGL 作品集

Mon, 03 Aug 2026 19:57:00 +0800

ITom Dev 是一个开源的沉浸式 3D 开发者作品集。它没有采用常见的卡片式简历页面，而是把个人介绍、项目案例和联系方式放进了一条可以交互探索的手绘走廊中。

访问者可以在浏览器里移动视角，进入 Gallery、Studio、About 和 Contact 等不同房间，查看作者的项目、个人介绍与联系方式。项目由 Tomasz “ITom” Szmajda 开发，源码已经公开在 GitHub。

项目特色

ITom Dev 最特别的地方，是把传统作品集的信息结构改造成了一个可探索的 3D 空间。

主要特点包括：

手绘铅笔风格的墙面、门、走廊和作品画框
可在浏览器中移动和切换房间
使用 WebGL 实时渲染 3D 场景
使用 GSAP 控制转场和交互动画
根据设备性能调整分辨率、抗锯齿和纹理加载
为搜索引擎提供独立的语义化 HTML 内容
支持桌面端和移动端访问

它比较适合用来制作：

前端开发者个人作品集
创意设计师个人网站
WebGL 项目展示页面
互动式个人简历
数字艺术展览或品牌展示网站

主要技术栈

项目主要使用以下前端技术：

React
Vite
Three.js
React Three Fiber
GSAP
WebGL
GLSL Shader

其中，React Three Fiber 用于在 React 中组织和管理 Three.js 场景，GSAP 负责页面动画与交互过渡，WebGL 和 GLSL Shader 则用于实现实时渲染和特殊视觉效果。

本地部署教程

1. 准备运行环境

建议先安装：

Git
Node.js 20 或更高版本
npm

可以通过下面的命令检查版本：

1
2
3

git --version
node --version
npm --version

2. 克隆 GitHub 仓库

1
2

git clone https://github.com/ITomPoland/portfolio-itom.git
cd portfolio-itom

3. 安装项目依赖

`1`	`npm install`

4. 启动开发服务器

`1`	`npm run dev`

启动成功后，根据终端提示打开本地地址，通常为：

`1`	`http://localhost:5173`

5. 测试生产版本

项目包含较多高清纹理和 WebGL 资源，开发模式下第一次加载可能需要等待几秒。

需要测试接近正式部署环境的性能时，可以运行：

1
2

npm run build
npm run preview

官方 README 也建议在测试性能时使用生产构建，而不是只观察开发模式下的加载速度。

浏览器设置建议

由于项目依赖 WebGL 实时渲染，建议在 Chrome、Edge 或其他现代浏览器中开启硬件加速。

以 Chrome 为例：

打开浏览器设置。
进入“系统”。
开启“使用图形加速功能”。
重启浏览器。

如果电脑显卡性能较弱，或者浏览器关闭了硬件加速，可能出现加载缓慢、动画掉帧或纹理显示异常。

二次开发需要修改哪些内容

这个项目可以作为 3D 作品集的技术基础，但不建议直接修改几段文字后上线。

至少需要替换以下内容：

作者姓名和个人介绍
头像与个人照片
项目封面和案例图片
联系方式与社交账号
房间中的介绍文字
品牌名称和 Logo
3D 纹理与手绘素材
网站标题、描述和 SEO 信息

还需要检查代码中是否存在作者自己的统计工具、接口地址、Sanity 配置、社交链接或部署环境变量。

许可证与素材版权

项目程序代码采用 MIT License，可以在遵守许可证要求的前提下使用、修改和发布。

但需要特别注意：MIT 许可证主要适用于仓库中的程序代码，并不代表作者的所有素材都可以自由使用。

GitHub README 明确说明，作者的个人素材、3D 纹理、图片和文案仍归 Tomasz Szmajda 所有，未经明确授权不得复制或重新发布。

因此，二次开发时应当：

保留 MIT License 要求的版权与许可证声明
替换作者的个人图片
替换原有项目案例
替换手绘纹理和品牌素材
重写所有个人介绍与页面文案

比较稳妥的做法是学习它的场景结构、交互方式和性能优化思路，再使用自己的视觉素材重新设计。

是否适合普通个人网站

ITom Dev 的视觉效果很有辨识度，但它并不适合所有个人网站。

比较适合：

希望展示 WebGL 或创意前端能力的开发者
需要突出交互设计能力的设计师
有时间优化纹理、模型和移动端性能的用户
希望把作品集本身作为项目案例的人

不太适合：

只需要快速上线一份在线简历的人
以文章阅读和搜索流量为主的博客
主要面向低性能移动设备的项目
不熟悉 React、Three.js 或 WebGL 的初学者

如果网站主要目标是获得搜索流量或让招聘人员快速查看经历，可以保留一个普通 HTML 作品列表或简历页面，3D 场景作为增强版入口。这样既能展示创意，也能避免所有信息都依赖 WebGL Canvas。

项目地址

GitHub 源码：ITomPoland/portfolio-itom
在线演示：ITom Dev Interactive 3D Portfolio

Vite on 拾光集