AI Demo Collection

AI 辅助生成的交互式前端 Demo 合集

Three.js / Blender / React

STAR ON GITHUB 提示词已开源 OPEN SOURCE · MIT

每个项目都附有生成请求或完整复现提示:怎么问 AI 才能拿到这座 3D 城市、这台拖拉机、这座仓库——历史原文与成品复现规格明确区分。点卡片右下角即可阅读。

栖居 HABITAT · 家庭 3D 空间 实际项目截图
REACT / THREE.JS / 3D HOME

栖居 HABITAT · 家庭 3D 空间

可环绕探索的 108㎡ 家庭模型,支持自动隐墙、多灯独立控制、家电菜单、日夜光影与生活场景联动。

ORBIT · 热泵洗烘结构实验室 实际项目截图
THREE.JS / 热泵结构 / 爆炸拆解

ORBIT · 热泵洗烘结构实验室

19 个装配组的精密洗烘概念模型:连续爆炸、同轴直驱电机、热泵双回路与背面进排水接口,支持部件聚焦、3K 图像及动画 GLB 导出。

AEROSTRUCT · 波音 787-9 实际项目截图
REACT / THREE.JS / 航空结构大屏

AEROSTRUCT · 波音 787-9

九大飞机总成的连续爆炸拆解与客舱剖视,搭配结构健康度、机翼应变、材料与动力监测图表,支持镜头切换、部件点选和视图导出。

小小晴天 · 童趣幼儿园 实际项目截图
THREE.JS / WEBGL / 微缩幼儿园

小小晴天 · 童趣幼儿园

阳光下的实时微缩园区,22 名儿童与 3 名老师持续开展课堂和户外游戏;支持六区聚焦、人物跟随、自动漫游与手机适配。

H₂ NEXUS · 综合能源数字孪生 实际项目截图
THREE.JS / 多能流守恒仿真

H₂ NEXUS · 综合能源数字孪生

电、热、冷、氢与天然气协同的 3D 工业园区,支持设备参数查看、能流粒子、气象与负荷实时调节。

智慧校园 3D 数据大屏 实际项目截图
THREE.JS / CHART.JS

智慧校园 3D 数据大屏

等距视角校园场景 + 数据看板,支持昼夜切换、双相机、悬停提示与循环车流。

双极空气开关精细建模 实际项目截图
BLENDER / 工程动画

双极空气开关精细建模

MCB 断路器程序化建模与 22 秒 8 章节工程动画,Three.js 直接加载 .glb 交互查看。

方寸之间 · 体素工地沙盘 实际项目截图
THREE.JS R160 / 完全离线

方寸之间 · 体素工地沙盘

桌面上的微缩建筑工地:挖掘机、渣土车、塔吊昼夜运转,支持暴雨天气与实体旋钮交互。

深夜拉面摊 · 体素沙盘 实际项目截图
THREE.JS R160 / 完全离线

深夜拉面摊 · 体素沙盘

巷口的深夜拉面摊:摩托穿巷送外卖、师傅抻面下锅、竹竿吊运灯笼,雨夜里水洼映着灯火。

樱花街角 · 电车与便利店 实际项目截图
THREE.JS R186 / 模块化微缩沙盘

樱花街角 · 电车与便利店

晴暖春日的日式乡村车站街角:单线电车与站台、落地玻璃里逐件可见的便利店、带玻璃门的贩卖机,三株樱花与持续落樱。拖拽环视、无极缩放,画面零 UI。

三坊七巷 · 坊巷漫游 实际项目截图
THREE.JS / OPENSTREETMAP / 3D ATLAS

三坊七巷 · 坊巷漫游

基于真实地图的白墙黛瓦古城沙盘:拖拽旋转、滚轮缩放、点击景点飞行,支持搜索、俯瞰、夜景与精选空中漫游。

TERRA 728 · 现代四驱拖拉机 实际项目截图
BLENDER / THREE.JS / 机械动画

TERRA 728 · 现代四驱拖拉机

1482 个对象的程序化精细建模:差速滚动与 Ackermann 转向、可开机罩与发动机舱、驾驶室门与内饰、后三点悬挂、雨刷与操作台,15 秒六章节机械演示。

夕空飞行 · Just breathe 实际项目截图
THREE.JS / 动画风飞行 / 键盘驾驶

夕空飞行 · Just breathe

奶油白单翼机穿越紫金云海:24 秒电影运镜、近距离 WASD 驾驶、翼尖气流与官方原曲配乐,并保留日间双机空战。

WareTrack · 仓储运营中心 实际项目截图
REACT / THREE.JS / 仓储运营

WareTrack · 仓储运营中心

蓝白单仓三维园区:叉车完成取货、运输与卸货闭环,库存、任务和月台同步;支持搜索选择、镜头聚焦与主动巡游。

FIRELINK · 分布式智能消防 实际项目截图
REACT / THREE.JS / 消防概念演示

FIRELINK · 分布式智能消防

模块化消防概念沙盘:分布式调度下,两架承托无人机与一架末端喷射机共用一根水带,配合移动增压、循环补水与重载无人机物资投送。

Roadster 逃离收费站 实际项目截图
THREE.JS R149 / 冷气推进器小游戏

Roadster 逃离收费站

冷气推进器小游戏:三车道换道、空中翻滚、完整飞越车辆补气,速度缓慢提升。保留原有玩家车模和本地排行榜,支持离线运行与手机操作。

浅海 · Ocean Shallows 实际项目截图
THREE.JS / WEBGL / 潮间带

浅海 · Ocean Shallows

俯视视角的热带浅海:白沙沙滩、随风摇曳的棕榈树、由浅绿松石渐变到深蓝的海水,水下焦散光网与七种热带鱼,点击水面投下涟漪

瓶中沧海 · 前进·梅利号
THREE.JS R160 / 体素微缩 / 天气系统

瓶中沧海 · 前进·梅利号

玻璃瓶里的体素海洋,前进·梅利号四点浪高采样浮沉绕岛,四档天气、时刻滑杆与 Space 风暴,全部封闭在瓶内(Three.js r160 单 HTML)

三阶魔方实验室 · CUBE / LAB
PURE CSS 3D / 魔方 / 矩阵动画

三阶魔方实验室 · CUBE / LAB

纯 CSS 3D Transform 的可交互三阶魔方实验室:27 块独立块体沿同心圆弧转层、明暗随朝向动态变化、拖拽视角、20 步打乱与一键复原,单文件零外部资源