两小儿辩日 · 三维互动课件 ☀️
这是一个基于 Three.js 和 Vite 开发的网页三维互动课件，旨在通过数字孪生与三维动画交互，生动再现《列子·汤问》中的经典古文故事《两小儿辩日》。本课件不仅展示了古文故事的对话场景，更通过三维光影模拟，将“太阳大小与距离”、“温度与影子长度”等天文物理现象直观呈现，融国学经典与现代物理科学探究于一体。
🌟 核心特性
本课件融入了高度定制化的三维渲染与精细的交互逻辑，具体包含以下模块：
1. 交互式三维教学场景
- 低模风格（Low-Poly）手绘渲染：场景内包含古色古香的三维人物角色模型（小儿甲、小儿乙、孔子），并使用 Canvas 生成程序化纹理，渲染出逼真的织物（罗衣）、木质（拐杖与树干）、岩石和草地效果。
- 古代科学仪器（日晷/表）：场景中树立了一座测量影子长度的测影表（Gnomon），可随时间推移实时投影，帮助学生直观感知古人“立表测影”的科学实践。
- 自然地理背景：远景有连绵的锥状山脉，近景有掩映的松树与林间古道，渲染出古朴优雅的辩论氛围。
2. 动态太阳轨迹与光影系统
- 太阳轨道模拟：模拟太阳在早上 6:00 到傍晚 18:00 之间的抛物线运行轨迹（东升西落），并渲染出金黄色的发光太阳球体（Sun Core）与柔和的日冕光晕（Sun Glow Sprite）。
- 实时光影与天空色温变化：
- 清晨与傍晚（低太阳高度角）：光线呈现温暖的橙红色调，阴影拉长，光照强度较低，天空呈现朦胧的浅蓝色。
- 正午（高太阳高度角）：光照强度达到最大，光线呈现亮白/金黄色，阴影缩短，天空澄澈。
- 阴影长度动态计算：场景中的角色与测影表具有完全动态的阴影。阴影的角度、长度和不透明度根据太阳高度角（正切值）实时数学计算并进行平滑插值渲染。
3. 古文对话与情境联动时间轴
- 播放与倍速控制：支持自动播放（Autoplay）时间流逝，可调节播放速度（0.5x 至 3.0x）。
- 古文台词同步字幕：随着时间轴从 6:00 运行至 18:00，底部台词板会同步滚动呈现《两小儿辩日》的对话：
- 06:00 - 08:42：小儿甲发言（“我以日始出时去人近，而日中时远也。” 辩论焦点：日出，判定依据：视觉大小）。
- 08:42 - 12:06：小儿乙发言（“日初出沧沧凉凉，及其日中如探汤。” 辩论焦点：日中，判定依据：体感冷热）。
- 12:06 - 15:12：孔子发言（“大小、冷热都要放进观察条件里比较。” 辩论焦点：比较，判定依据：多变量证据）。
- 15:12 - 18:00：课堂总结（“同一太阳轨迹下，观察角度、空气与参照物会改变感受。” 辩论焦点：总结，判定依据：物理变量）。
- 角色微动作（Speak Motion）：说话的角色手臂会轻轻挥动，头部会微微摆动，增强故事代入感。
4. 多视角智能切换与微调
- 预设教学视角：支持四个预设镜头（通过平滑的三维摄像机插值动画 Tween 过渡）：
- 总览 (Overview)：远眺整个山脉与太阳完整的运行轨迹。
- 辩论 (Debate)：聚焦三人的神态及身体语言。
- 太阳 (Sun)：仰望太阳轨迹与地平线参照。
- 影子 (Shadow)：俯瞰测影表与角色在不同时间的影子拉伸。
- 自由探索控制：内置 OrbitControls，支持鼠标左键拖拽旋转、右键平移、滚轮缩放。同时侧边栏提供精确的平移（上下左右）、缩放（放大/缩小）和重置主按钮。
5. 跨平台响应式布局
- UI 界面采用高质感的半透明玻璃拟物化设计（Glassmorphism，包含 backdrop-filter 模糊与精细的金色边框）。
- 全面适配手机和平板设备，在小屏幕上自动折叠非核心信息，重新编排按钮布局，保证 Three.js 视口完美重绘。
🛠️ 技术栈
- 三维引擎：Three.js (r165) (WebGLRenderer, ACESFilmicToneMapping, PCFSoftShadowMap)
- 构建工具 & 开发服务器：Vite 6.x
- 前端逻辑：Vanilla JavaScript (ES Modules, OrbitControls)
- 页面样式：原生 CSS3 (包含 CSS Variables, Flexbox/Grid, CSS Media Queries)
📂 项目结构two-children-debating-the-sun/
├── index.html # 主页面结构（HTML 骨架与 UI 控制面板）
├── styles.css # 全局样式（自适应布局、玻璃拟物化卡片、控件样式）
├── main.js # 核心业务逻辑（Three.js 初始化、场景建模、动画、交互事件）
├── take_screenshots.js # 自动化截图脚本（使用 Playwright 自动生成文档截图）
├── package.json # 项目依赖与运行脚本
├── package-lock.json # 锁定依赖版本
├── docs/ # 文档资源目录（包含导出的预览截图）
│ └── images/
├── dist/ # 生产编译后的静态资源目录（可选）
└── verification/ # 验证与测试截图资源（包含不同设备、视角的视觉快照）
🚀 快速开始
运行环境准备
请确保你的电脑上已安装 Node.js (推荐 v18 或更高版本)。
1. 安装依赖
在项目根目录下打开终端，执行以下命令安装项目所需的依赖包（主要为 three 和 vite）：
npm install2. 启动本地开发服务
运行以下命令启动 Vite 开发服务器：
npm run dev启动后，终端将输出本地预览地址（通常为 http://127.0.0.1:5173/）。在浏览器中打开此链接即可进行互动体验。
若需指定端口运行（例如 5174），可使用：
npm run dev -- --port 51743. 构建生产包
若需要将该课件部署到静态服务器，运行编译命令：
npm run build编译生成的静态资源将输出到 dist 目录中，可直接托管至任何 Web 服务器。
4. 本地预览构建产物npm run preview5. 重新生成预览截图 (可选)
如果修改了三维场景或界面，可通过以下脚本自动重新截取四个角度的视角画面及正午影子画面（需保持本地开发服务器已运行）：
node take_screenshots.js新截图将自动覆盖并更新至 docs/images/ 目录。
🕹️ 操作指南交互动作键鼠操作移动端操作说明
视角旋转按住鼠标左键并拖拽单指滑动环绕场景进行三维旋转观察
视角平移按住鼠标右键并拖拽双指滑动平移移动相机的观察中心位置
场景缩放滚动鼠标滚轮双指捏合靠近或远离观察主体
时间轴调节拖动底部滑块拖动底部滑块手动调节一天中 (6:00 - 18:00) 的时间与光影
自动运行点击左下角 ▶ 按钮点击 ▶ 按钮自动播放太阳运行，点击 Ⅱ 暂停
镜头切换点击右上角“视角预设”按钮点击“视角预设”按钮切换至 总览/辩论/太阳/影子 四个教学机位
精细微调点击侧边栏的方向/加减键点击侧边栏的方向/加减键进行精确的平移、缩放，点击 ⌂ 键重置当前镜头
🔬 科学背景与古文探究
本课件设计了多项可视化读数，配合教学探讨《两小儿辩日》中的物理与感官变量：
- 视觉大小（小儿甲观点：“日初出大如车盖，及日中则如盘盂”）
- 科学原理：光渗效应与参照物幻觉（庞佐错觉/蓬佐错觉）。清晨太阳地平线升起时，周围有山川、树木等近景参照物，在对比下显得巨大；而正午太阳孤立在空旷的天空中央，缺乏参照物，视觉上显得较小。此外，晨间光线较暗，亮的目标在暗的背景上显得大（光渗）。
- 温度感受（小儿乙观点：“日初出沧沧凉凉，及其日中如探汤”）
- 科学原理：太阳高度角与辐射密度。清晨太阳斜射大地，光束穿过厚厚的大气层，能量损耗大，且单位面积接收的太阳辐射热量少；正午太阳高度角接近直射，光束垂直穿过大气层，路径短，单位面积接收的热辐射能密度极高，温度因此上升。
- 辩论启示（孔子：“孰为汝多知乎？”）
- 课件中通过数据读数面板（时刻、太阳高度、影长、观察点、判断依据）的联动，科学直观地向学生揭示：单一的直觉感受并不能完全反映物理本质，科学探究需要引入精确的观测仪器（如测影表）和控制多变量进行对比。
