最近 GitHub 上一个叫Kage 的项目火速出圈，刷爆前端圈子。
没有 React、没有 Vue、没有 Vite 构建流程，仅仅依靠单个 HTML 文件，就在浏览器中构建出一座氛围感拉满的京都山寺夜景。
用户只需要滑动鼠标滚轮，就如同亲身漫步在山间古寺，开启一场沉浸式的夜间漫游，网页不再是静态图文，而是可以走进去的互动数字世界。
滚轮驱动3D镜头交互
颠覆传统网页滚动逻辑：普通网页滚动改变页面位置，Kage 中滚动直接控制 WebGL 相机的位置、旋转角度。滚动进度映射整个场景流程，镜头位移之后同步更新灯光、雾气、雨水、落叶粒子，配合文字淡入淡出完成故事叙事，滚动即是控制器。
浏览器实时程序化特效
寺庙建筑、鸟居、山地地形、月亮等 3D 物体，雨、落叶、山间雾霭、灯笼光晕全部为浏览器运行时动态生成，并非预渲染视频。
搭配 Bloom 辉光后处理，实现电影级氛围感，粒子、光影可以实时响应镜头变化，保证交互自由度。
AI素材 + WebGL 融合渲染
场景的电影感画面素材由 GPT Image 2 生成，经过艺术加工处理后，与 Three.js 实时 3D 空间、HTML 文本图层叠加渲染。AI 负责视觉素材生产，WebGL 负责空间动态交互，HTML 承担文字排版，三者协同输出最终画面效果。
✨极简工程架构
市面上同类视觉 3D 站点大多依赖 Next.js、大量 NPM 依赖、复杂打包流程。Kage 反其道而行，单文件 HTML 整合 HTML、CSS、业务 JS、Three.js 渲染逻辑，零构建步骤。
✨AI不再直接生成完整项目，转型创作工具链一环
很多人会误解 Kage 是 AI 一键写出来的网站，实际并非如此。AI 主要产出美术素材，空间搭建、镜头逻辑、粒子动画、交互控制依旧由 Three.js 实现。AI 是素材生产工具，而不是直接替代前端开发，提供了一套「AI 生成素材 + 开发者把控交互与空间逻辑」的全新协作范式。
✨开源资产升级，Prompt 与 Skill 和代码同等重要
传统开源项目交付：源码 + Readme 说明。 AI 时代 Kage 交付：源码 + Readme + Prompt 文档 + Skill 能力库。 代码告诉机器怎么实现，Prompt 告诉 AI 为什么这么设计，Skill 沉淀行业最佳实践。
品牌创意营销官网
文旅、潮牌、艺术展、汽车品牌的专题落地页。可以打造滚动漫游式虚拟展厅，用户滚动浏览就游览虚拟展馆，替代传统静态活动页面，强化品牌记忆，提升访客沉浸感。
数字叙事与线上展览
文学故事、艺术展览、博物馆线上展厅。用滚动驱动镜头，把故事、展品放置在 3D 虚拟空间，以漫游方式完成叙事，打造线上沉浸式观展体验。
产品概念展示页
新品概念宣传，构建虚拟 3D 场景，用户滚动浏览逐步了解产品概念，用空间化表达替代传统图文卖点罗列。
前端创意学习与技术实验
适合前端开发者学习 Scroll‑driven 3D 动画、WebGL 后处理、粒子系统、AI+WebGL 协同开发思路，练习创意编程思维。
GitHub：https://github.com/MengTo/kage项目官网：https://mengto.github.io/kage/
欢迎扫码加入社群
一起交流AI前沿技术！
小编免费共享AI开源项目知识库，
实现大家的AI资讯自由！
直接扫码或点击链接即可查看！
AI开源项目知识库：https://qyxznlkmwx.feishu.cn/wiki/BwWIwsCOuiMWGmkUzNHcKLvPnPh
