Three.js 3D 示例合集：从基础场景到完整项目的学习资源
dragonir/3d 是一个基于 Three.js 的 WebGL 页面开发合集，收录了 30 多个不同主题的 3D 可视化示例。
项目的核心目标是提供可运行、可学习的 Three.js 实战案例。每个示例都是独立的 React 组件，包含完整的场景搭建、模型加载、动画控制等代码实现。
项目解决的问题：
- 为 Three.js 学习者提供从简单到复杂的实战参考
- 展示 WebGL 在不同场景下的应用方式
- 提供可直接运行和修改的代码基础
项目不解决的问题：
- 这不是一个 Three.js 教程或系统课程
- 不提供封装好的组件库或工具函数
- 示例代码侧重于效果展示，不一定遵循生产级代码规范
功能与示例内容
项目包含 30+ 个 3D 示例，按主题可分为以下几类：
地球与天体可视化
- Earth：基础地球模型渲染
- EarthDigital：数据驱动的数字地球效果，赛博朋克风格大屏
- Ocean：海洋场景模拟
游戏与角色
- Ring：艾尔登法环火焰 Logo 效果
- Olympic：冬奥会吉祥物冰墩墩与雪容融
- Zelda：塞尔达传说角色重现
- Human：元人类角色模型
- Metaverse：阿狸的多元宇宙开放世界小游戏
城市与建筑
- City：数字城市可视化
- CityLowploy：低多边形风格城市
- VisualLand：地形可视化
动画与交互效果
- Floating：悬浮文字动画
- Scroll：滚动驱动的 3D 布局
- Comic：3D 漫画效果
- Gravity：重力模拟效果
节日与创意
- Lunar：虎年春节主题
- Heart：心形动画
- Diamond：钻石渲染效果
其他
- Car：汽车模型展示
- Cell：细胞结构可视化
- Live：虚拟主播效果
怎么用
安装方式
项目基于 Create React App 构建，使用 Yarn 作为包管理器。
# 克隆仓库
git clone https://github.com/dragonir/3d.git
# 进入目录
cd 3d
# 安装依赖
yarn install运行命令
| 命令 | 作用 |
|---|---|
yarn start | 启动开发服务器，访问 localhost:3000 |
yarn build | 构建生产版本 |
yarn test | 运行测试 |
yarn eject | 导出 CRA 配置（不可逆操作） |
使用示例
假设你想学习地球可视化的实现：
- 运行
yarn start启动项目 - 在浏览器中打开 localhost:3000
- 从首页导航进入 Earth 或 EarthDigital 示例
- 查看
src/containers/Earth或src/containers/EarthDigital目录下的源码 - 修改代码，观察实时效果变化
在线预览
如果只是想查看效果，可以直接访问在线部署版本：
- GitHub Pages：https://dragonir.github.io/3d/ (opens in a new tab)
- Vercel 镜像：https://3d-dragonir.vercel.app/ (opens in a new tab)
项目结构
src/
└── containers/
├── Earth/ # 地球示例
├── City/ # 城市示例
├── Zelda/ # 塞尔达角色
├── Scroll/ # 滚动布局
└── ... # 其他 30+ 示例每个示例都是独立的目录，包含该场景所需的全部代码和资源。
定位与适用场景
- Three.js 初学者：通过实际案例理解场景搭建、光照、材质、动画等概念
- 寻找灵感：浏览不同类型的 3D 效果，获取项目创意
- 快速原型：基于现有示例修改，快速搭建演示效果
- 面试准备：学习常见 3D 可视化场景的实现方式
总结
dragonir/3d 是一个收录了 30 多个 Three.js 实战示例的开源项目。它的价值在于提供了多种场景类型的完整实现代码，从地球可视化到游戏角色、从城市建模到动画效果。
对于正在学习 Three.js 的开发者，这个项目可以作为参考资源，帮助理解不同 3D 效果的实现方式。但需要注意的是，示例代码更侧重于效果展示，在实际项目中使用时可能需要根据具体需求进行调整和优化。
项目目前有 2.8k Star，持续维护中，部分示例仍在开发。
GitHub 地址：https://github.com/dragonir/3d (opens in a new tab)