published_at: 2026-02-24 platform: 前端号 title_final: 找不到好的 WebGL 案例？这 133 个网站打包拿走，本地直接跑 media_id: IBFk8fgBcWNwp3Epx-oZGzmZb_li8dXT6xDnhbSux38vfkP53z2jJYe8PiVdpODY

做 3D Web 没有灵感？有人把 133 个绝美网站全存下来了

做 WebGL 或 Three.js 开发有个常见困境：知道技术怎么用，但不知道能做出什么东西。

搜索"WebGL 案例"能找到一堆，点进去要么是付费教程，要么是只能看不能研究的线上演示，要么——干脆打不开了，网站已经下线。

AwesomeSites 做的事情是：把那些让人眼前一亮的网站，在消失之前备份下来，整理好分类，让你直接 clone 到本地跑起来。

目前收录了 133 个网站，1.9k star，项目还在持续更新中。

收录了哪些网站

项目按网站类型分为 10 个方向，分散在 6 个 Pack 仓库里。

Car — 汽车品牌

兰博基尼、丰田 Gazoo Racing、大众、雷诺、小米 SU7、BMW、经典车库（classics-garage.com）等。

汽车品牌站是 3D 展示密度最高的方向，通常包含完整的模型加载、灯光调节、颜色切换等交互。是研究产品 3D 展示最直接的参照。

Portfolio — 个人作品集

bruno-simon.com（3D 驾车式作品集）、david-hckh.com、microwaver59.com、alexanderperrin.com.au、activetheory.net、samsy.ninja、marchantweb.com 等。

通常是开发者个人作品，技术密度高，shader 和动画处理方式值得细看。

E-Commerce — 电商与品牌体验

芬迪 Baguette 包袋体验、欧莱雅 Future of Beauty、爱马仕香水（fragrance.hermes.com）、罗意威（howls.loewe.com）、卡地亚旅程、杜嘉班纳礼品等。

奢侈品牌在网页 3D 方面投入大，这类站点的模型质量、材质表现和光照方案接近商业落地水准。

Metaverse — 虚拟空间

Coastal World、OPPO InnoDay 2021、抖音狂欢节、工商银行虚拟营业厅、equinox.space、virtual.cleverfarm.ag 等。

以虚拟展厅和品牌活动场景为主，适合研究大范围空间漫游的组织方式。

Exhibition & Room — 展览与空间体验

Adobe × Bowie 75、Hennessy House of Moves、45r.jp 靛蓝白书、anumberfromtheghost 音乐体验等。

叙事节奏和空间引导设计做得比较成熟，适合研究如何把 3D 场景与内容叙事结合。

Only4Mobile — 仅限移动端

专为手机体验设计的站点，桌面端效果不完整，建议在手机浏览器下访问。

项目结构

仓库本体是一个索引，实际文件分散在 6 个 Pack 仓库里：

• AwesomeSites-Pack01 至 AwesomeSites-Pack06

每个 Pack 是一个独立的 GitHub 仓库，内部按分类建目录，每个网站一个文件夹。文件都是从浏览器缓存中提取的，作者逐一做过测试和修复，确保在本地服务器环境下可以正常运行。

怎么跑起来

需要提前准备：Node.js 环境（用来运行本地服务器）。

安装本地服务器工具：

npm install -g live-server

live-server 是一个轻量的本地静态服务器，支持热更新，适合直接预览前端文件。

使用步骤：

启动后浏览器会自动打开，网站就在本地跑起来了。

选哪个 Pack： 6 个 Pack 的分类是混合的，没有明确的"Pack01 全是游戏"这种规则。建议直接去主仓库的 README 里看各 Pack 的网站列表，找自己感兴趣的方向再决定 clone 哪个。

网站下线是真实问题

很多人觉得"直接去 Google 搜不就行了"，但这类创意展示站的生命周期通常很短。

品牌活动结束、项目合约到期、服务器费用不续，三个月前还能访问的网站可能现在已经 404 了。这类资源的价值正好在于"固定时间点的快照"——不管原始网站现在是否还在，本地都能跑。

写在最后

AwesomeSites 本质上是一个持续维护的前端创意存档，解决的是"好案例难以长期保存"的问题。

对于已经掌握 Three.js 基础但不知道能做什么的开发者，这个资源库的价值在于提供一个参照系——原来品牌展示站是这个密度，原来游戏类网站的交互逻辑是这样组织的。

需要注意的是，所有文件来自浏览器缓存，作者明确说明仅供学习使用，不能用于商业项目。实际开发中如果需要借鉴某个效果，理清思路之后还是要自己实现。

GitHub：https://github.com/ezshine/AwesomeSites (opens in a new tab)