单产品网站建设seo手机排名软件

单产品网站建设,seo手机排名软件,asp.net网站建设实战 pdf,中山网站建设策划log-lottery 项目完整教程 log-lottery 是目前最受欢迎的开源 3D球体年会抽奖程序 之一#xff08;2025年底数据#xff1a;GitHub 约 2k stars#xff0c;432 forks#xff09;。 它采用 Vue 3 Three.js 技术栈#xff0c;实现炫酷的3D动态球体抽奖效果#xff0c;非常…log-lottery 项目完整教程log-lottery是目前最受欢迎的开源3D球体年会抽奖程序之一2025年底数据GitHub 约 2k stars432 forks。它采用Vue 3 Three.js技术栈实现炫酷的3D动态球体抽奖效果非常适合公司年会、团队团建、线上直播抽奖、员工生日抽奖等场景。项目GitHubhttps://github.com/LOG1997/log-lottery在线体验推荐先看效果https://log1997.github.io/log-lottery/https://to2026.xyz/log-lottery/https://1kw20.fun/log-lottery/ 备用一、核心理念视觉优先仪式感拉满抛弃传统平面转盘/九宫格采用3D球体将所有参与者姓名分布在球面上。抽奖过程高速旋转 → 渐减速 → 停止 → 中奖者放大高亮整个动画科技感与沉浸感极强。高度配置化低代码/零代码上手奖项、人员、背景、音乐、颜色、Logo 等几乎全部通过界面配置完成无需修改源码。纯前端 本地持久化数据存储在浏览器IndexedDB支持图片/音乐上传持久化无需后端服务器。支持 Excel 一键导入参与人员 导出中奖结果适合临时/一次性活动。开箱即用 现代化部署支持静态托管、GitHub Pages、Docker 一键部署特别友好NAS/内网/服务器场景。二、主要功能一览功能支持说明3D球体动态抽奖✅Three.js 核心球体旋转中奖聚焦动画多奖项/多轮次支持✅可设置不同奖品、数量、参与规则全员/部分Excel 导入参与人员✅下载模板 → 填写 → 一键导入支持姓名/工号等多列Excel 导出中奖结果✅抽完一轮/全部后导出方便统计/发奖背景音乐 抽奖音效✅可上传/切换支持开关自定义背景/颜色/Logo✅上传图片、修改标题/配色/布局临时加奖/现场调整✅抽奖过程中可快速新增奖项本地数据持久化✅IndexedDB 保存配置刷新/关机不丢图片音乐也支持多语言i18n部分主要中文国际化支持正在完善弹幕/评论互动开发中计划支持直播场景互动后端依赖无纯前端项目三、技术选型前端框架Vue 3Composition API script setup3D渲染Three.js状态管理PiniaUI组件DaisyUI Tailwind CSS文件处理SheetJSxlsx 导入导出构建工具Vite存储IndexedDB主 / localStorage 降级包管理pnpm部署Docker / Nginx 静态托管 / GitHub Pages四、快速上手5分钟跑通方式1Docker最推荐适合NAS/服务器/公司内网# 拉取社区维护的活跃镜像原作者或社区常用dockerpull fooololo/log-lottery:latest# 快速运行dockerrun-d\--namelog-lottery\-p9279:80\fooololo/log-lottery:latest# 访问http://你的IP:9279/log-lottery/或使用docker-compose.yml更方便持久化version:3.8services:lottery:image:fooololo/log-lottery:latestcontainer_name:log-lotteryrestart:unless-stoppedports:-6719:80# 或你想要的端口# volumes: # 如需持久化数据可打开# - ./data:/app/data方式2本地开发/调试适合想改代码的人gitclone https://github.com/LOG1997/log-lottery.gitcdlog-lotterypnpminstall# 推荐 pnpm也可用 npm/yarnpnpmdev# 启动开发模式 http://localhost:5173/打包静态文件pnpmbuild# dist 目录即可部署到 Nginx / GitHub Pages注意首次使用建议用最新版 Chrome/EdgePC端最佳手机端仅适合控制不推荐投屏主界面。五、标准使用流程打开页面 → 右上角「设置」进入配置奖项配置→ 添加奖品名称、数量、图片、参与规则人员管理→ 下载模板 → 填姓名 → 导入 Excel界面配置→ 修改标题、颜色、背景图、布局列数等图片/音乐管理→ 上传自定义背景/Logo/音乐自动存 IndexedDB返回首页 → 选择当前奖项 → 「开始抽奖」抽奖中可暂停/重新抽 → 确认中奖后人员自动移除避免重复抽完 → 右上角导出 Excel 结果小技巧如果图片/音乐加载异常 → 全局配置 → 「重置所有数据」 → 刷新页面。六、典型案例 代码片段案例300–500人公司年会奖项示例一等奖iPhone / iPad × 1–3二等奖智能手表 / 耳机 × 5–10参与奖红包/积分 × 剩余操作建议提前1–2天导入名单 测试抽奖动画当天接投影/大屏 外接音箱播放背景音乐主持人/工作人员操作键盘/鼠标控制开始/停止核心代码片段解读3D球体生成简化版stores/lottery.jsimport*asTHREEfromthreeimport{defineStore}frompiniaexportconstuseLotteryStoredefineStore(lottery,{state:()({scene:null,camera:null,renderer:null,particles:[]// 姓名文本精灵数组}),actions:{init3D(container){this.scenenewTHREE.Scene()this.cameranewTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,2000)this.renderernewTHREE.WebGLRenderer({antialias:true})// ... 添加光源、轨道控制器等container.appendChild(this.renderer.domElement)},createNameParticles(names,radius800){this.particles.forEach(pthis.scene.remove(p))this.particles[]names.forEach((name,i){constspritethis.createTextSprite(name)// 生成2D文字纹理 → Sprite// 黄金分割角均匀分布在球面上constthetaMath.acos(2*(i0.5)/names.length-1)constphii*Math.PI*(1Math.sqrt(5))sprite.position.set(radius*Math.sin(theta)*Math.cos(phi),radius*Math.sin(theta)*Math.sin(phi),radius*Math.cos(theta))this.particles.push(sprite)this.scene.add(sprite)})},// ... 旋转动画、停止聚焦中奖者等方法使用 GSAP 或 RAF 实现}})七、常见问题 优化建议问题解决办法人数多800卡顿开启低配模式 / 减小文字大小 / 分批抽奖图片音乐加载失败全局配置 → 重置所有数据 → 重新上传想持久化到服务器二次开发加 Node 服务存 JSON或 fork 参考 moshang-xc/lottery有后端多轮不重复抽奖已内置支持中奖者自动从球体移除手机/平板体验差PC/笔记本投屏主界面手机仅作控制端想加概率控制/防作弊当前纯随机可参考 fuzhengwei/Lottery 项目Java后端完整概率系统这份教程基于 2025 年 12 月最新版本整理希望能帮你在 2026 年年会/活动中快速用上最酷炫的 3D 抽奖