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

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

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

文章目录

一个学校随机点名系统开发
- [（代excel 自定义导入名字，+随机点名）](#（代excel 自定义导入名字，+随机点名）)
[🎯 3D随机点名系统](#🎯 3D随机点名系统)
- [✨ 功能特性](#✨ 功能特性)
- - [🎪 3D视觉效果](#🎪 3D视觉效果)
  - [📊 智能名单管理](#📊 智能名单管理)
  - [🎲 灵活抽取功能](#🎲 灵活抽取功能)
  - [🔊 语音播报系统](#🔊 语音播报系统)
  - [🎨 全屏展示体验](#🎨 全屏展示体验)
  - [🌐 完全离线化](#🌐 完全离线化)
- [🚀 快速开始](#🚀 快速开始)
- - 环境要求
  - 安装使用
- [📋 使用说明](#📋 使用说明)
- - Excel文件格式
  - - [📋 Excel模板示例](#📋 Excel模板示例)
    - [🔧 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+

安装使用

下载项目

bash 复制代码

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

运行项目
- 直接双击 1.html 文件在浏览器中打开
- 或使用本地服务器：python -m http.server 8000
准备名单
- 创建Excel文件，将所有名字放入任意单元格
- 推荐格式：A列从A1开始依次填入名字
开始使用
- 点击"导入Excel"选择您的名单文件
- 选择要抽取的人数
- 点击"抽取"按钮开始随机选择

📋 使用说明

Excel文件格式

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

📋 Excel模板示例

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

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

复制代码

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

方式二：多列布局

复制代码

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

方式三：混合布局

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

🔧 Excel文件制作步骤

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

⚠️ 注意事项

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

操作指南

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

控制按钮

开始：启动/恢复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 变量：

css 复制代码

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

调整旋转速度

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

javascript 复制代码

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

更换表情符号

在 makeLabelTexture 函数中修改：

javascript 复制代码

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

🤝 贡献指南

欢迎提交Issue和Pull Request！

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

开发环境

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

总结

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