非遗·油纸伞项目简介非遗·油纸伞是一个面向非物质文化遗产油纸伞主题的纯前端 Web 展示与互动项目。项目以「传承千年工艺 · 守望文化之美」为理念通过历史叙事、工艺解读、3D 交互、DIY 创作、知识问答与虚拟展厅等模块帮助用户了解、体验与传播油纸伞文化。当前版本为纯前端 Demo无后端服务数据来自本地 Mock 与浏览器localStorage持久化。技术栈类别技术页面结构HTML5样式CSS3Design Tokens、响应式布局、动画脚本原生 JavaScriptES5/ES6 混用3D 渲染Three.js v0.157.0CDN画布绘制Fabric.js v5.3.0CDN字体Google Fonts — Noto Serif SC思源宋体数据存储localStorage前缀umbrella_功能模块1. 首页index.html左侧历史时间轴春秋末期 → 东汉 → 唐代 → 宋代 → 明清 → 近现代共 6 个节点右侧画卷式幻灯片Ken Burns 背景动效、墨染切换、文字渐显支持滚轮切换、点击时间轴跳转、自动轮播约 5.5 秒/帧展示各时期油纸伞发展脉络与文字介绍2. 工艺解读craft.html五大核心工序选竹 → 制骨 → 裱纸 → 绘花 → 上油左侧工序轨道环形进度、节点状态当前/已完成右侧详情卡片工序标签、关键数据、工艺要点、文字说明每道工序配套工艺演示视频assets/mp4/弹窗播放支持上/下步切换与工序间平滑过渡动画3. 3D 交互model3d.html基于 Three.js 的油纸伞 3D 场景提供沉浸式换装体验伞面色8 种预设朱砂、桃粉、靛蓝、翡翠、赤金、紫藤、素絹、墨染纹样梅花、竹影、水纹、祥云、锦纹、牡丹、素色、墨染伞柄颜色8 种可选开合 / 透明度滑块调节自动旋转、流苏穗子、花瓣飘落开关鼠标拖拽旋转、滚轮缩放、右键平移水墨背景、自定义光标、诗词浮层4. DIY 工坊diy.html基于 Fabric.js 的圆形伞面绘画工具笔墨工具硬笔 / 毛笔 / 软笔墨色调配预设传统色盘伞面底色纯色 / 渐变笔触粗细2–50px 可调传统纹样梅花、兰花、牡丹、竹子等贴图素材绘画 / 选择双模式切换撤销 / 重做、删除选中、清空画布保存下载导出带伞骨装饰线的 PNG 图片快捷键Ctrl/CmdZ撤销、Ctrl/CmdS保存等5. 知识回顾quiz.htmlquiz-detail.html三大题库分类油纸伞历史10 题 · 入门制作工艺8 题 · 进阶文化内涵6 题 · 精通单选题答题流程选项高亮、即时判题、答案解析答题结束展示得分记录保存至本地最多 20 条首页展示近期答题记录分类、时间、分数6. 虚拟展厅gallery.htmlgallery-detail.htmlgallery-create.html展厅列表展示平台预设作品 用户发布作品排序最新 / 最热标题关键词搜索卡片展示封面、作者、点赞/收藏/评论数作品详情伞面造型展示、标签印章、作品描述卷轴赏点赞、藏收藏、评评论互动评论列表与留言输入需登录发布作品gallery-create.html填写标题、描述、标签上传封面图片Base64 本地存储需登录后发布作品写入localStorage7. 用户系统login.htmlprofile.html登录 / 注册同一页面切换登录与注册模式表单校验用户名 3–20 字符密码 6–20 字符模拟登录任意合法账号密码均可Token 存本地支持登录后重定向?redirect参数个人中心头像、昵称展示与编辑数据统计作品数、获赞数、收藏数我的作品查看、删除已发布作品我的收藏查看已收藏作品8. 公共组件js/common.jscss/common.css统一导航栏6 个主模块入口 登录态 / 用户下拉菜单统一页脚滚动时导航栏样式切换Toast 提示、时间格式化等工具函数非遗主题 Design Tokens赭石、朱砂、宣纸、墨色等项目目录结构oil-paper-umbrella/ ├── index.html # 首页 — 历史时间轴与画卷幻灯 ├── craft.html # 工艺解读 — 五大工序详解与视频 ├── model3d.html # 3D 交互 — Three.js 油纸伞换装 ├── diy.html # DIY 工坊 — Fabric.js 伞面绘画 ├── quiz.html # 知识回顾 — 题库分类列表 ├── quiz-detail.html # 答题页 — 单选题与结果 ├── gallery.html # 虚拟展厅 — 作品列表 ├── gallery-detail.html # 作品详情 — 点赞/收藏/评论 ├── gallery-create.html # 发布作品 — 上传与表单 ├── login.html # 登录 / 注册 ├── profile.html # 个人中心 │ ├── css/ │ └── common.css # 全局样式、导航栏、按钮、Design Tokens │ ├── js/ │ ├── common.js # 导航栏、Footer、页面初始化 │ └── mock-data.js # Mock 数据、Storage、UserAuth、WorkState、QuizRecord │ ├── assets/ │ ├── imgs/ # 图片资源 │ │ ├── 春秋末期.png … 近现代.png # 首页历史背景图 │ │ ├── login-bg.jpg # 登录页背景 │ │ ├── 梅花.png / 兰花.png / 牡丹.png / 竹子.png # DIY 纹样素材 │ │ └── … │ ├── mp4/ # 工艺演示视频 │ ├── 选竹.mp4 │ ├── 制骨.mp4 │ ├── 裱纸.mp4 │ ├── 绘花.mp4 │ └── 上油.mp4 │ ├── 演示材料/ │ └── 演示视频.mp4 # 项目整体演示录屏 │ └── 项目说明.md # 本文件本地数据说明所有用户相关数据通过localStorage存储键名前缀为umbrella_键名说明umbrella_token登录 Tokenumbrella_userInfo用户信息昵称、头像等umbrella_likedWorks已点赞作品 ID 列表umbrella_favedWorks已收藏作品 ID 列表umbrella_myWorks用户发布的作品列表umbrella_quizRecords答题记录最多 20 条核心业务逻辑集中在js/mock-data.jsStorage— 本地存储封装UserAuth— 登录态管理WorkState— 作品点赞/收藏/发布QuizRecord— 答题记录运行方式本项目为静态站点无需构建步骤。方式一直接打开用浏览器打开index.html即可部分功能在file://协议下可能受限推荐方式二。方式二本地 HTTP 服务推荐# 进入项目目录cdoil-paper-umbrella# Python 3python3-mhttp.server8080# 或 Node.js需安装 npxnpx serve.浏览器访问http://localhost:8080。页面导航关系index.html首页 ├── craft.html工艺解读 ├── model3d.html3D 交互 ├── diy.htmlDIY 工坊 ├── quiz.html知识回顾 │ └── quiz-detail.html答题 ├── gallery.html虚拟展厅 │ ├── gallery-detail.html作品详情 │ └── gallery-create.html发布作品 ├── login.html登录/注册 └── profile.html个人中心外部依赖CDN页面依赖model3d.htmlhttps://unpkg.com/three0.157.0/build/three.min.jsdiy.htmlhttps://unpkg.com/fabric5.3.0/dist/fabric.min.js3D 交互与 DIY 工坊需联网加载 CDN 资源虚拟展厅部分封面使用 Unsplash 外链图片。注意事项无真实后端登录、注册、发布、评论均为前端模拟刷新或清除浏览器数据后部分信息会丢失除已写入localStorage的内容。图片体积较大assets/imgs/中历史背景图为高清 PNG首次加载可能较慢。浏览器兼容建议使用 Chrome、Edge、Safari 等现代浏览器3D 页面需 WebGL 支持。演示材料演示材料/演示视频.mp4为项目功能演示录屏可用于答辩或展示。版权说明© 2024 非遗·油纸伞 — 传承千年工艺 · 守望文化之美
