一个学校随机点名系统（代excel 自定义导入名字，+随机点名）

一个学校随机点名系统开发

（代excel 自定义导入名字，+随机点名）

---

🎯 3D随机点名系统

一个基于Three.js的3D球面随机点名抽奖系统，支持Excel导入、语音播报、全屏展示等功能。

✨ 功能特性

🎪 3D视觉效果

• 3D球面分布：使用斐波那契螺旋算法实现名字的均匀分布
• 流畅旋转动画：支持自动旋转和手动拖拽控制
• 精美视觉设计：每个名字配有小熊🧸图标和发光效果
• 高性能渲染：基于WebGL的Three.js引擎，支持大量对象

📊 智能名单管理

• Excel导入：支持.xlsx、.xls、.csv格式文件导入
• 自动识别：智能提取Excel中所有文本内容作为名单
• 动态更新：导入后自动调整球体数量和点名选项
• 长名字优化：特别适配维吾尔族等少数民族长名字显示

🎲 灵活抽取功能

• 动态数量：根据名单人数自动生成1-N人的抽取选项
• 公平随机：使用JavaScript内置随机算法确保公平性
• 视觉高亮：被选中的名字会放大并高亮显示
• 实时反馈：抽取过程中暂停旋转便于观察

🔊 语音播报系统

• 中文TTS：基于Web Speech API的中文语音合成
• 智能播报：单人直接播报，多人依次播报（0.5秒间隔）
• 可控开关：支持语音播报的开启/关闭
• 浏览器兼容：自动检测浏览器支持并提供降级

🎨 全屏展示体验

• 华丽展示：抽取完成后全屏显示获奖者
• 动画效果：获奖者卡片依次弹出动画
• 自动还原：播报完成后2秒自动返回初始状态
• 交互友好：支持点击关闭或背景关闭

🌐 完全离线化

• 无网络依赖：所有依赖库已本地化，支持完全离线使用
• 单文件部署：核心HTML文件+两个JS库文件即可运行
• 跨平台兼容：支持Windows、macOS、Linux等所有平台

🚀 快速开始

环境要求

• 现代浏览器（支持WebGL和Web Speech API）
• 推荐：Chrome 80+、Firefox 75+、Safari 13+、Edge 80+

安装使用

1. 下载项目

   git clone https://github.com/tomxjc305/classroom.git
   cd classroom
   

2. 运行项目

   • 直接双击 1.html 文件在浏览器中打开
   • 或使用本地服务器：python -m http.server 8000

3. 准备名单

   • 创建Excel文件，将所有名字放入任意单元格
   • 推荐格式：A列从A1开始依次填入名字

4. 开始使用

   • 点击"导入Excel"选择您的名单文件
   • 选择要抽取的人数
   • 点击"抽取"按钮开始随机选择

📋 使用说明

Excel文件格式

• 支持格式：.xlsx（推荐）、.xls、.csv
• 数据要求：名字必须是文本格式（非数字）
• 位置要求：名字可放在任意单元格，系统自动识别
• 布局灵活：支持单列、单行、多行多列等任意布局

📋 Excel模板示例

项目包含了 1.xlsx 示例文件，包含以下格式的名单：

方式一：单列布局（推荐）

A1: 张三
A2: 李四  
A3: 王五
A4: 赵六
...

方式二：多列布局

A1: 张三    B1: 李四    C1: 王五
A2: 赵六    B2: 孙七    C2: 周八
...

方式三：混合布局
名字可以分散在Excel的任意单元格中，系统会自动识别所有非空文本内容。

🔧 Excel文件制作步骤

1. 创建Excel文件 - 新建.xlsx文件
2. 填入名字 - 将所有学生/员工姓名填入任意单元格
3. 保存文件 - 确保保存为.xlsx格式
4. 导入系统 - 点击"导入Excel"按钮选择文件

⚠️ 注意事项

• 确保名字为文本格式（避免纯数字）
• 空白单元格会被自动忽略
• 支持中文、英文及少数民族姓名
• 长名字会自动换行显示（如：阿布都热合曼·买买提）

操作指南

1. 导入名单：点击"导入Excel" → 选择文件 → 等待"已导入X个名字"提示
2. 选择人数：在"点名数量"下拉菜单中选择要抽取的人数
3. 开始抽取：点击"抽取"按钮开始随机选择
4. 查看结果：观看3D高亮效果和全屏展示，聆听语音播报
5. 下轮抽取：系统自动还原，可继续下一轮抽取

控制按钮

• 开始：启动/恢复3D球体旋转
• 停止：暂停3D球体旋转
• 重置：重置球体位置并开始旋转
• 抽取：执行随机点名并展示结果

高级功能

• 语音控制：勾选/取消"语音播报"开关
• 手动控制：拖拽鼠标旋转3D球体
• 暂停功能：双击画面暂停/继续旋转
• 键盘操作：ESC键关闭全屏展示

🛠 技术架构

核心技术栈

• 3D渲染：Three.js 0.160.0（WebGL）
• 文件处理：SheetJS 0.18.5（Excel解析）
• 语音合成：Web Speech API（浏览器原生）
• 前端技术：HTML5 + CSS3 + ES6

关键算法

• 斐波那契螺旋分布：实现球面上的均匀分布
• Fisher-Yates洗牌算法：确保随机选择的公平性
• Canvas动态纹理生成：实时生成名字标签贴图
• 自适应文字渲染：智能处理长名字的显示

性能优化

• 纹理复用：避免重复生成相同纹理
• 内存管理：及时清理WebGL资源
• 渲染优化：限制像素比，使用高性能GPU
• 动画优化：使用requestAnimationFrame确保流畅

📁 项目结构

fish_pro/
├── 1.html              # 主程序文件（19.9KB）
├── three.min.js        # Three.js库（669KB）
├── xlsx.full.min.js    # SheetJS库（881KB）
├── backup/             # 备份文件夹
│   ├── 1_original_backup.html
│   └── 1_complete_version_*.html
├── CLAUDE.md           # 开发文档
└── README.md           # 项目说明文档

🎯 应用场景

• 教育场景：课堂随机点名、分组抽选、作业检查
• 企业培训：会议发言、培训互动、团队建设
• 活动抽奖：年会抽奖、活动抽奖、游戏选择
• 社区活动：志愿者选择、活动参与、投票统计

🔧 自定义配置

修改主题颜色

在CSS中修改 --ui 变量：

:root{--ui:#21e0c0;} /* 青色主题 */
:root{--ui:#ff6b6b;} /* 红色主题 */

调整旋转速度

在JavaScript中修改 spin * 0.1 的系数：

group.rotation.y += spin * 0.1; // 当前速度
group.rotation.y += spin * 0.05; // 减慢速度

更换表情符号

在 makeLabelTexture 函数中修改：

ctx.fillText('🧸', size/2, size/2 - 35); // 小熊
ctx.fillText('⭐', size/2, size/2 - 35); // 星星

🤝 贡献指南

欢迎提交Issue和Pull Request！

1. Fork 本项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

开发环境

• 推荐使用 VS Code + Live Server 扩展
• 确保浏览器开启开发者工具进行调试

总结

具体见https://github.com/tomxjc305/classroom)