Folio 2025 个人 3D 作品集

Folio 2025 是什么

Folio 2025 是创意开发者 Bruno Simon 的 2025 年个人作品集，一个完全运行在浏览器里的开放世界 3D 体验。访问 bruno-simon.com 即可驾驶载具在场景中自由探索，感受昼夜交替、四季变化与实时天气。

项目使用 JavaScript 编写，核心基于 Three.js 渲染，并配有作者自研的物理系统，整体更接近一款小型 3D 游戏而非传统网页。

核心特性

• 开放世界探索：可驾驶的物理载具，配合地形、赛道与碰撞交互
• 时间系统：昼夜循环与年度季节循环，驱动光照、天气与场景状态
• 天气系统：风、雨、雪、闪电、龙卷风等动态效果
• 环境细节：植被、落叶、雾气、水面、灯笼、木箱等大量可交互对象
• 音频与通知：随场景状态触发的音效与提示系统

游戏循环设计

项目最值得学习的是它的游戏循环（Game Loop）组织方式。作者把每一帧的处理拆成编号阶段，每个阶段只负责一类更新，依赖关系一目了然：

0  时间与输入
1  Player:pre-physics
2  PhysicalVehicle:pre-physics
3  Physics（物理步进）
4  物理可视化与场景对象
5  PhysicalVehicle:post-physics
6  Player:post-physics
7  View（相机）
8  Intro / 昼夜 / 季节 / 天气 / 区域 / 载具视觉
9  风 / 光照 / 龙卷风 / 交互点 / 轨迹
10 地形、植被、雨雪、水面等大量视觉元素
998 渲染
999 性能监控

这种「按阶段编号 + 显式依赖」的写法，在大型 Three.js 项目中非常实用，能有效避免更新顺序混乱。

本地运行

先根据 .env.example 创建 .env 文件，安装 Node.js 后执行：

# 安装依赖
npm install --force

# 本地开发，默认 localhost:1234
npm run dev

# 生产构建，输出到 dist/
npm run build

资产管线

项目包含一套 Blender 到 Web 的资产处理流程：

• 导出时需静音调色板纹理节点，使用对应导出预设，暂不压缩
• 执行 npm run compress 后，脚本会遍历 static/ 目录，对 GLB 内嵌纹理与图片做 ETC1S 有损压缩（对 GPU 友好），UI 图片则转为 WebP
• 原始文件会被保留，方便对比与回退

适合谁

如果你正在学习 Three.js、想了解大型 3D 网页项目的架构，或希望打造一个足够惊艳的个人作品集，这个项目是很好的参考样本。不过它没有中文文档，且涉及物理、着色、资产压缩等多方面知识，建议具备一定 WebGL 基础后再深入阅读源码。