互动教育可视化建筑师
把任意教学主题瞬间转化为沉浸式3D交互教学网页
AetherViz Master 是一个基于 AI 的互动教育可视化工具，专注于将抽象的教学概念转化为生动、直观的 3D 交互式网页。无论你是教师、学生还是教育内容创作者，只需输入一个主题，它就能为你生成一个完整的、可交互的教学页面。
- 一键生成：输入主题 → 自动生成 3D 交互网页
- 智能适配：自动识别学科领域，匹配最佳配色和可视化方案
- 零门槛使用：无需编程基础，生成的 HTML 直接可用
- 专业品质：Three.js + SVG 混合渲染，60fps 流畅体验
- 基于 Three.js r134 的专业级 3D 场景
- 支持物理模拟、粒子系统、矢量箭头
- 内置 OrbitControls，支持鼠标拖拽旋转、滚轮缩放
- 触控设备支持：触摸旋转、双指缩放
- 可在 3D 场景上叠加 SVG 2D 图表
- 函数图像、坐标系、流程图
- D3.js 数据驱动图表（可选）
- 3D-2D 坐标实时同步
| 识别维度 | 说明 |
|---|---|
| 学科识别 | 物理/化学/生物/数学/天文/编程，自动切换配色主题 |
| 渲染方案 | 根据关键词自动选择 Three.js / SVG / 混合模式 |
| 语言适配 | 自动检测中文/英文，输出对应语言 |
- 玻璃拟态（Glassmorphism）风格
- 赛博教育风 + 霓虹强调色
- 响应式布局，适配桌面/平板/手机
- 侧边栏 + 控制面板 + HUD 数据展示
- 学习目标（可勾选追踪）
- KaTeX 数学公式实时渲染
- 原理讲解（生动比喻，高中-大学水平）
- 可折叠小测验面板
- 播放/暂停/单步/速度控制
- 现代浏览器（Chrome/Edge/Firefox/Safari）
- 支持 WebGL
# 1. 克隆仓库
git clone https://github.com/andyhuo520/aetherviz-master.git
cd aetherviz-master
# 2. 启动本地服务器（任选一种）
python -m http.server 8080
# 或
npx serve .
# 或
php -S localhost:8080
# 3. 访问 http://localhost:8080# 1. 启动 Claude Code
claude
# 2. 输入主题
/aetherviz-master
# 或直接输入：
牛顿第二定律
# 或：
匀速运动
# 或：
光合作用系统将自动生成完整的 HTML 文件。
- 牛顿第二定律
- 匀速运动 / 匀变速运动
- 电磁感应
- 相对论时间膨胀
- 量子隧穿效应
- 光合作用
- 酸碱中和
- 氧化还原反应
- 分子结构
- DNA复制
- 细胞呼吸
- 有丝分裂
- 遗传规律
- 勾股定理
- 三角函数
- 正弦函数图像
- 概率分布
- 行星运动定律
- 宇宙膨胀
- 黑洞
- 日食月食
- 算法复杂度
- 数据结构
- 排序算法
- 设计模式
| 技术 | 用途 | 版本 |
|---|---|---|
| Three.js | 3D 渲染引擎 | r134 |
| Tailwind CSS | UI 样式框架 | v3.4+ |
| KaTeX | 数学公式渲染 | 0.16.11 |
| D3.js | 数据可视化（可选） | v7 |
| OrbitControls | 3D 场景控制 | 内联简化版 |
┌─────────────────────────────────────────────────────────────┐
│ 主题输入分析 │
├─────────────────────────────────────────────────────────────┤
│ 关键词检测 │
│ ├── 运动/粒子/分子/机械/天体 → 纯 Three.js 3D │
│ ├── 函数/图像/曲线/几何 → SVG 2D 图表 │
│ └── 牛顿/波动/能量/电磁 → Three.js + SVG 混合模式 │
└─────────────────────────────────────────────────────────────┘
aetherviz-master/
├── README.md # 项目说明文档
├── LICENSE # MIT 许可证
├── SKILL.md # Claude Skill 定义文件
└── docs/
└── skill.md # 技能详细文档
输入主题后，系统自动：
- 识别为「物理」学科 → 蓝色渐变主题
- 检测「运动」关键词 → Three.js 纯 3D 模式
- 生成：小球运动模拟 + 速度滑块 + 位移轨迹
输入主题后，系统自动：
- 识别为「数学」学科 → 金黄渐变主题
- 检测「函数/图像」关键词 → SVG 模式
- 生成：函数波形 SVG 图表 + 参数滑块 + 实时绘制
输入主题后，系统自动：
- 识别为「物理」学科
- 检测「波动」关键词 → 混合模式
- 生成：3D 弹簧振子 + SVG 波形图叠加
欢迎贡献代码、提交问题或提供建议！
# 1. Fork 本仓库
# 2. 创建特性分支
git checkout -b feature/your-feature
# 3. 提交更改
git commit -m 'Add amazing feature'
# 4. 推送分支
git push origin feature/your-feature
# 5. 打开 Pull RequestMIT License - 详见 LICENSE 文件
- ✅ 新增 SVG + Three.js 混合渲染
- ✅ 新增渲染方案自动识别
- ✅ 新增 D3.js 支持
- ✅ 优化坐标同步机制
- ✅ 优化面板布局
- ✅ 小测验面板可折叠
- ✅ 新增右下角悬浮按钮
用 ❤️ 打造 | 每一个知识都值得被可视化
由 AetherViz Master 为你生成 ❤️