aetherviz-master README

The project's README from github.com/andyhuo520/aetherviz-master. As one markdown file: README.md.

AetherViz Master

Version License Three.js Tailwind SVG AI Powered

AetherViz Master Demo

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


📖 项目简介

AetherViz Master 是一个基于 AI 的互动教育可视化工具,专注于将抽象的教学概念转化为生动、直观的 3D 交互式网页。无论你是教师、学生还是教育内容创作者,只需输入一个主题,它就能为你生成一个完整的、可交互的教学页面。

核心能力


✨ 核心特性

1. 3D 可视化引擎

2. SVG 增强渲染

3. 智能自动识别

识别维度 说明
学科识别 物理/化学/生物/数学/天文/编程,自动切换配色主题
渲染方案 根据关键词自动选择 Three.js / SVG / 混合模式
语言适配 自动检测中文/英文,输出对应语言

4. 现代化 UI 设计

5. 完整教学功能


🚀 快速开始

环境要求

本地运行

# 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 使用

# 1. 启动 Claude Code
claude

# 2. 输入主题
/aetherviz-master
# 或直接输入:
牛顿第二定律
# 或:
匀速运动
# 或:
光合作用

系统将自动生成完整的 HTML 文件。


📚 支持的主题领域

物理

化学

生物

数学

天文

编程


🛠 技术栈

技术 用途 版本
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 波形图叠加

🤝 贡献指南

欢迎贡献代码、提交问题或提供建议!

# 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 文件


🔗 相关链接


📝 更新日志

v5.0 (2026-02-22)

v4.0 (2026-02-22)


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

aetherviz-master (andyhuo520/aetherviz-master)

Searching Database…

Что это?AetherViz Master — навык для Claude Code на базе ИИ, который превращает любую учебную тему в захватывающую интерактивную образовательную 3D-веб-страницу, соединяя 3D-сцены Three.js с SVG-диаграммами.
Это самостоятельное приложение или навык Claude Code?Это навык Claude Code, а не приложение, которое ставится отдельно: вы даёте тему — он генерирует самодостаточный HTML-файл, без какого-либо программирования.
Как на деле сгенерировать с его помощью страницу?Вы просто даёте ему учебную тему (например, через Claude Code), и он автоматически генерирует целую интерактивную 3D-страницу; получившийся HTML-файл можно также открыть прямо в браузере.
Что нужно для просмотра сгенерированных страниц?Лишь современный браузер с поддержкой WebGL, например Chrome, Edge, Firefox или Safari.
Работает ли он только с темами на китайском?Нет, он сам определяет, китайская ваша тема или английская, и генерирует текст результата на соответствующем языке.
Для кого это предназначено?Для учителей, студентов и создателей образовательного контента, которым нужны наглядные интерактивные объяснения без всякого кода.
Какие предметы он умеет визуализировать?Он охватывает физику, химию, биологию, математику, астрономию и программирование, со встроенными примерами вроде второго закона Ньютона, фотосинтеза, репликации ДНК, теоремы Пифагора, движения планет и алгоритмов сортировки.
Что на деле включает сгенерированная страница?Интерфейс в стиле glassmorphism с отмечаемыми целями обучения, формулами, отрисованными KaTeX, объяснением простым языком, сворачиваемой панелью квиза и кнопками play/pause/step/speed для симуляции.
Зачем смешивать Three.js и SVG, вместо того чтобы обойтись чистым 3D?3D-сцена (Three.js) отвечает за иммерсивную симуляцию, а SVG-наложения добавляют точные 2D-элементы вроде графиков функций и систем координат, которые синхронизируются в реальном времени с 3D-видом.
Creator
andyhuo520
Size
0.2 MB
Stars
1.5K
Updated
CommitFeb 22
Age
7mo
Commits · 90 Days