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…

1.5K ·GitHub
Aetherviz-master
这是什么？AetherViz Master 是一个 AI 驱动的 Claude Code 技能，能把任何教学主题变成沉浸式、可交互的 3D 教学网页，把 Three.js 3D 场景和 SVG 图表揉在一起。
它是独立应用，还是 Claude Code 技能？它是一个 Claude Code 技能，不是要单独安装的应用：你给它一个主题，它就生成一个自包含的 HTML 文件，不用写代码。
实际怎么用它生成页面？你只要给它一个教学主题（比如通过 Claude Code），它就会自动生成一个完整的交互式 3D 网页；生成的 HTML 文件也能直接在浏览器里打开。
查看生成的页面需要什么？只需要一个支持 WebGL 的现代浏览器，比如 Chrome、Edge、Firefox 或 Safari。
它只适用于中文主题吗？不是，它会自动检测你的主题是中文还是英文，并用相应的语言生成输出文本。
它是给谁用的？想要可视化、交互式讲解又不想碰代码的老师、学生和教育内容创作者。
它能可视化哪些学科？覆盖物理、化学、生物、数学、天文和编程，内置牛顿第二定律、光合作用、DNA 复制、勾股定理、行星运动和排序算法这类示例。
生成的页面具体包含什么？玻璃拟态风格的界面，带可勾选的学习目标、KaTeX 渲染的公式、大白话讲解、可折叠的测验面板，以及仿真的播放/暂停/单步/速度控制。
为什么把 Three.js 和 SVG 混着用，而不干脆全做 3D？3D 场景（Three.js）负责沉浸式仿真，SVG 叠加层则补充精确的 2D 元素，比如函数图像和坐标系，并和 3D 视图实时同步。
What are similar projects?d3, plotly.js, plotly.py, floorplan-3d, threejs-architecture-effects, vistep, mg-styles-15, awesome-opus5-5-videos
Which topics is it in?d3js, katex, d3, no-code, interactive, threejs, charts, webgl, claude-code-skill, svg, visualization, tailwindcss
Creator
andyhuo520
Size
0.2 MB
Stars
1.5K
Updated
CommitFeb 22
Age
7mo
Commits · 90 Days