电学探索者3D实验室

电学探索者3D实验室

```
作为一名专精于Three.js的教育游戏开发专家，你擅长将初中电学知识转化为引人入胜的交互式3D游戏体验。请为我创建一个关于初中电学的游戏化学习HTML应用，融合电学教学内容与沉浸式3D游戏元素，优先保证代码复杂度可控可运行前提下生成。

## 游戏化学习核心要素

构建以下游戏化元素激发学习动机：
- 将电路基础知识转化为游戏任务和挑战
- 进度系统（经验值、关卡解锁和电学成就徽章）
- 即时反馈机制（电流流动动画和音效提示）
- 基于探索的电路搭建学习路径
- 互动式电路测试挑战，检验知识掌握程度
- 以"小小电工"故事情境包装学习内容，提升参与感

## 技术实现框架

使用以下技术栈构建教育游戏体验：
- Three.js (https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/three.js/110/three.min.js)
- 内嵌自定义控件代码，避免外部依赖问题
- Tailwind CSS (https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css)
- Font Awesome (https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
- 中文排版使用 Noto Serif SC 和 Noto Sans SC
- GSAP动画库 (https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js)
- 简化版电路物理引擎实现互动效果

## 3D游戏场景设计

设计一个完整的电学实验室Three.js游戏场景：
- 将电路元件转化为可视化3D元素（电池、电阻、灯泡、开关等）
- 创建电学实验室环境，包含工作台、仪器设备和电路元件架
- 设计电工角色引导学习者完成电路搭建任务
- 添加可交互的3D电路元件，点击后展示相关电学知识点
- 使用电流流动动画和元件发光效果强化概念理解
- 通过电火花粒子效果、光照和材质增强视觉吸引力

## 直观交互设计原则

采用苹果式设计理念，创造自然直观的交互体验：
- 放大电路元件交互热区：确保可拖拽区域足够大（至少60x60像素）
- 视觉暗示：使用微光效果和颜色变化引导用户连接正确电路
- 自动化流程：完成电路搭建后自动进行测试，显示电流流动
- 预测性设计：预测用户可能犯的连接错误，提前提供提示
- 触觉反馈：通过元件发光、电流音效提供即时反馈
- 宽容错误：允许错误连接，但提供安全提示和纠正建议

## 创意游戏机制

实现以下创新游戏机制提升学习趣味性：
- 元件收集器：设计虚拟工具箱收集不同电路元件
- 环境互动：允许切换实验室照明条件，观察不同亮度下的电路效果
- 电路解谜：设计电路谜题，需要正确连接元件才能点亮灯泡
- 进度叙事：随着学习进展，实验室设备升级，解锁更复杂电路
- 技能树：解锁新元件后可以搭建先前无法完成的电路
- 成就系统：完成特定电路挑战解锁电工徽章和视觉奖励
- 游戏性：参考解谜游戏设计，满足探索和发现乐趣
- 彩蛋机制：隐藏特殊电路组合，发现后解锁额外知识点

## 自动化学习路径

设计智能引导系统确保学习流畅进行：
- 完成当前电路任务后自动引导至下一个知识点
- 提供光束指引指向需要使用的下一个元件
- 实现智能提示系统，根据连接错误提供针对性帮助
- 设置适当的元件拖拽灵敏度，确保交互轻松
- 在用户停滞时提供渐进式电路连接提示
- 保留手动探索选项，允许自主搭建电路

## 界面控制与用户自主性

确保用户对学习体验有完全控制权：
- 为所有信息窗口提供明确的关闭按钮（尺寸足够大）
- 允许用户随时保存电路设计进度
- 提供跳过简单讲解或加速演示的选项
- 设计直观的元件库导航，便于选择不同元件
- 确保所有交互元件有清晰的选中状态反馈
- 支持自定义电路实验，鼓励创造性探索

## 教育内容整合

确保游戏体验与电学教育目标紧密结合：
- 将电路概念分解为可游戏化的小单元（串联、并联等）
- 设计循序渐进的学习路径，从简单电路到复杂电路
- 通过实际问题场景包装教学内容（如修复故障电路）
- 提供多种学习方式（视觉电流演示、听觉反馈、动手搭建）
- 在游戏过程中嵌入电路测试和自我评估机会
- 确保游戏机制服务于电学学习目标

## 技术优化与性能

确保流畅的游戏化学习体验：
- 3D元件模型预加载和进度指示
- 纹理优化，确保快速加载
- 针对不同设备性能自适应调整视觉效果
- 保存电路设计到本地存储
- 优雅降级：在低性能设备上提供简化版电路演示
- 错误处理机制，确保学习不中断

## 输出成果

提供包含以下内容的完整教育游戏解决方案：
1. 单一HTML文件，包含所有必要CSS和JavaScript
2. 只输出HTML，不要其他任何引导语和介绍
3. 确保电学游戏化学习体验能在现代浏览器中流畅运行
```