# aetherviz-master **Repository Path**: zh_lys/aetherviz-master ## Basic Information - **Project Name**: aetherviz-master - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-05 - **Last Updated**: 2026-03-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # AetherViz Master

Version License Three.js Tailwind SVG AI Powered

AetherViz Master Demo

互动教育可视化建筑师
把任意教学主题瞬间转化为沉浸式3D交互教学网页

--- ## 📖 项目简介 AetherViz Master 是一个基于 AI 的互动教育可视化工具,专注于将抽象的教学概念转化为生动、直观的 3D 交互式网页。无论你是教师、学生还是教育内容创作者,只需输入一个主题,它就能为你生成一个完整的、可交互的教学页面。 ### 核心能力 - **一键生成**:输入主题 → 自动生成 3D 交互网页 - **智能适配**:自动识别学科领域,匹配最佳配色和可视化方案 - **零门槛使用**:无需编程基础,生成的 HTML 直接可用 - **专业品质**:Three.js + SVG 混合渲染,60fps 流畅体验 --- ## ✨ 核心特性 ### 1. 3D 可视化引擎 - 基于 Three.js r134 的专业级 3D 场景 - 支持物理模拟、粒子系统、矢量箭头 - 内置 OrbitControls,支持鼠标拖拽旋转、滚轮缩放 - 触控设备支持:触摸旋转、双指缩放 ### 2. SVG 增强渲染 - 可在 3D 场景上叠加 SVG 2D 图表 - 函数图像、坐标系、流程图 - D3.js 数据驱动图表(可选) - 3D-2D 坐标实时同步 ### 3. 智能自动识别 | 识别维度 | 说明 | |----------|------| | **学科识别** | 物理/化学/生物/数学/天文/编程,自动切换配色主题 | | **渲染方案** | 根据关键词自动选择 Three.js / SVG / 混合模式 | | **语言适配** | 自动检测中文/英文,输出对应语言 | ### 4. 现代化 UI 设计 - 玻璃拟态(Glassmorphism)风格 - 赛博教育风 + 霓虹强调色 - 响应式布局,适配桌面/平板/手机 - 侧边栏 + 控制面板 + HUD 数据展示 ### 5. 完整教学功能 - 学习目标(可勾选追踪) - KaTeX 数学公式实时渲染 - 原理讲解(生动比喻,高中-大学水平) - 可折叠小测验面板 - 播放/暂停/单步/速度控制 --- ## 🚀 快速开始 ### 环境要求 - 现代浏览器(Chrome/Edge/Firefox/Safari) - 支持 WebGL ### 本地运行 ```bash # 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 ``` ### 通过 Claude Code 使用 ```bash # 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 # 技能详细文档 ``` --- ## 💡 使用示例 ### 示例 1:匀速运动 输入主题后,系统自动: 1. 识别为「物理」学科 → 蓝色渐变主题 2. 检测「运动」关键词 → Three.js 纯 3D 模式 3. 生成:小球运动模拟 + 速度滑块 + 位移轨迹 ### 示例 2:三角函数 输入主题后,系统自动: 1. 识别为「数学」学科 → 金黄渐变主题 2. 检测「函数/图像」关键词 → SVG 模式 3. 生成:函数波形 SVG 图表 + 参数滑块 + 实时绘制 ### 示例 3:波动与振动 输入主题后,系统自动: 1. 识别为「物理」学科 2. 检测「波动」关键词 → 混合模式 3. 生成:3D 弹簧振子 + SVG 波形图叠加 --- ## 🤝 贡献指南 欢迎贡献代码、提交问题或提供建议! ```bash # 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 Request ``` ### 贡献者 --- ## 📄 许可证 MIT License - 详见 [LICENSE](LICENSE) 文件 --- ## 🔗 相关链接 - [Three.js 官方文档](https://threejs.org/docs/) - [Tailwind CSS](https://tailwindcss.com/) - [KaTeX 数学公式](https://katex.org/) - [D3.js 数据可视化](https://d3js.org/) --- ## 📝 更新日志 ### v5.0 (2026-02-22) - ✅ 新增 SVG + Three.js 混合渲染 - ✅ 新增渲染方案自动识别 - ✅ 新增 D3.js 支持 - ✅ 优化坐标同步机制 ### v4.0 (2026-02-22) - ✅ 优化面板布局 - ✅ 小测验面板可折叠 - ✅ 新增右下角悬浮按钮 ---

用 ❤️ 打造 | 每一个知识都值得被可视化
由 AetherViz Master 为你生成 ❤️