AetherViz Master - 互动教育可视化建筑师
2026-02-23 2026年02月 AetherViz-Master-互动教育可视化.md

AetherViz Master - 互动教育可视化建筑师

整理时间： 2026-02-22
GitHub： https://github.com/andyhuo520/aetherviz-master
许可证： MIT License
整理人： AI助手

项目简介

AetherViz Master是一款基于AI的互动教育可视化工具，专注于将抽象的教学概念转化为生动、直观的3D交互式网页。

核心理念：把任意教学主题瞬间转化为沉浸式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数学公式实时渲染
  • ✅ 原理讲解（生动比喻，高中-大学水平）
  • ✅ 可折叠小测验面板
  • ✅ 播放/暂停/单步/速度控制

支持的学科领域

物理

  • 牛顿第二定律
  • 匀速运动 / 匀变速运动
  • 电磁感应
  • 相对论时间膨胀
  • 量子隧穿效应

化学

  • 光合作用
  • 酸碱中和
  • 氧化还原反应
  • 分子结构

生物

  • 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混合模式

快速开始

本地运行

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

使用示例

示例1：匀速运动

  • 识别为「物理」学科 → 蓝色渐变主题
  • 检测「运动」关键词 → Three.js纯3D模式
  • 生成：小球运动模拟 + 速度滑块 + 位移轨迹

示例2：三角函数

  • 识别为「数学」学科 → 金黄渐变主题
  • 检测「函数/图像」关键词 → SVG模式
  • 生成：函数波形SVG图表 + 参数滑块 + 实时绘制

示例3：波动与振动

  • 识别为「物理」学科
  • 检测「波动」关键词 → 混合模式
  • 生成：3D弹簧振子 + SVG波形图叠加

应用场景

人群 价值
一线老师 快速制作3D互动课件
在线教育创作者 生成吸引眼球的交互内容
学生 秒懂抽象知识
教育机构 提升教学品质和效率

更新日志

v5.0 (2026-02-22)

  • ✅ 新增SVG + Three.js混合渲染
  • ✅ 新增渲染方案自动识别
  • ✅ 新增D3.js支持
  • ✅ 优化坐标同步机制

v4.0 (2026-02-22)

  • ✅ 优化面板布局
  • ✅ 小测验面板可折叠
  • ✅ 新增右下角悬浮按钮

要点提炼

  • 🎓 教育神器：老师秒变3D课件大师
  • 🌐 一键生成：输入主题自动生成3D网页
  • 🧠 智能识别：物理/化学/生物/数学/天文/编程
  • 🎨 专业渲染：Three.js r134 + SVG混合
  • 📱 全平台响应：手机/平板/电脑
  • ✨ 教学功能完整：公式/测验/打卡/播放控制
  • 🤖 Claude Code集成：直接对话生成

用 ❤️ 打造 | 每一个知识都值得被可视化