中华青铜文明
- 完整代码地址：https://www.aiyuanma.vip/posts/homework-qingtongwenhua
一、项目简介
中华青铜文明（青铜器博物馆）是一个面向文化传播与互动体验的静态 Web 展示项目。网站以中华青铜文明为主线，从夏商周至秦汉的历史脉络出发，系统呈现青铜器的历史渊源、器型分类、纹饰艺术、铸造工艺与三星堆专题等内容，并辅以数字展厅、文物对话、知识挑战等互动模块，帮助用户以沉浸式方式了解与感受青铜文化。
项目采用原生 HTML、CSS、JavaScript 构建，不依赖后端服务，可直接通过浏览器打开访问；用户登录与注册数据保存在浏览器本地存储中。
二、技术栈
| 类别 | 说明 |
|---|---|
| 页面结构 | HTML5 |
| 样式 | CSS3（各页面独立样式 + 公共样式common.css） |
| 脚本 | JavaScript（jQuery） |
| 动画 | Animate.css |
| 轮播 | Swiper |
| 3D 展示 | Three.js（三星堆 3D 沉浸页） |
| 多媒体 | 图片、视频资源 |
三、功能模块介绍
1. 首页（index.html）
网站入口与总览页，主要包含：
- 全屏 Banner 与粒子背景动效
- 历史渊源时间线：从夏商萌芽到秦汉传承五个阶段概览
- 青铜艺术卡片：礼器、兵器、乐器、生活用器四大类别介绍
- 传承保护板块：政策支持、传承人培养、走进校园、文旅融合等方向展示
- 统一顶部导航与页脚，支持滚动动画与回到顶部
2. 历史溯源（history.html）
以「吉金铸史」为主题，深入梳理青铜文明发展脉络：
- 首屏大标题与滚动引导
- 交互式历史时间轴：按朝代/阶段展示关键事件与背景
- 各时期配图与文字说明，呈现从夏商到秦汉的青铜礼乐演变
3. 器型分类（type.html）
系统介绍青铜器的主要器型与用途：
- 首屏 Swiper 轮播展示代表性器物
- 按礼器、乐器、兵器、生活用器等类别分类浏览
- 各类器物配图、名称、功能与历史背景说明
4. 纹饰艺术（pattern.html）
聚焦青铜器表面装饰与符号体系：
- 首屏轮播展示饕餮纹、夔龙纹、凤鸟纹等典型纹饰
- 分栏介绍饕餮纹、夔龙纹、凤鸟纹、云雷纹、蟠螭纹等纹饰类型
- 说明纹饰的寓意、时代特征与艺术价值
5. 三星堆专题（sanxingdui.html / sanxingdui-3d.html）
以古蜀三星堆文化为核心的专题模块：
- 专题页：震撼首屏、数据概览、代表性文物介绍、发现历程与文化解读
- 3D 沉浸观赏页：基于 Three.js 的全屏 3D 文物展示
- 支持模型旋转、缩放、自动旋转
- 可切换场景背景（青墨、深褐、暖沙、墨绿、暮紫等）
- 可切换材质预设（原色、青铜、铜绿、鎏金等）
- 提供重置视角、全屏等控制功能
6. 数字展厅（gallery.html）
虚拟博物馆式浏览体验：
- 左侧器物目录，右侧视频与详情展示
- 收录青铜大立人像、青铜纵目面具、叠瓣龙纹鼎、青铜人头像等代表性文物
- 点击目录项切换对应文物的视频播放与文字介绍（年代、类型、尺寸、描述等）
7. 铸铜工艺（craft.html）
介绍古代青铜铸造技术与流程：
- 工艺概述：从矿石到成器的整体流程
- 范铸法、失蜡法等主要铸造方法的图文说明
- 各步骤（制模、合范、熔炼、浇铸、修整等）的分步展示
- 火焰粒子等视觉装饰，强化「炉火匠心」主题
8. 互动区（interact.html）
「与文物对话」沉浸式互动体验：
- 选择四位文物守护者：青铜大立人像、青铜纵目面具、叠瓣龙纹鼎、青铜人头像
- 切换文物后更新展示图与对话内容
- 模拟与文物进行问答式对话，以第一人称视角讲述文物背后的故事与历史
9. 知识挑战（quiz.html）
青铜文明主题趣味测验：
- 共 10 道选择题，涵盖历史、器型、纹饰、工艺、三星堆等知识点
- 答题进度与即时反馈
- 结束后展示得分与评价，巩固学习成果
10. 登录注册（login.html）
用户账户管理（前端本地实现）：
- 登录 / 注册 Tab 切换
- 用户名与密码校验，注册信息存入浏览器本地存储
- 支持「记住用户名」
- 登录成功后导航栏显示用户名与退出按钮
- 已登录状态下可查看登录时间与退出操作
四、公共能力
全站通过公共脚本与样式实现一致体验：
| 能力 | 说明 |
|---|---|
| 统一导航 | header-menu.js动态生成导航菜单，自动高亮当前页，并根据登录状态显示「登录」或「用户名 + 退出」 |
| 统一页脚 | footer.js按页面生成对应文案的页脚 |
| 滚动交互 | 导航栏滚动变色、元素进入视口动画、回到顶部按钮 |
| 移动端适配 | 汉堡菜单、响应式布局 |
| 视觉风格 | 青铜色调、纹饰装饰、粒子与过渡动画，整体呈现博物馆气质 |
五、目录与文件结构
homework-qingtongwenhua/ # 项目根目录 │ ├── 项目说明.md # 项目说明文档（本文件） │ ├── index.html # 首页 ├── history.html # 历史溯源 ├── type.html # 器型分类 ├── pattern.html # 纹饰艺术 ├── sanxingdui.html # 三星堆专题 ├── sanxingdui-3d.html # 三星堆 3D 沉浸观赏 ├── gallery.html # 数字展厅 ├── craft.html # 铸铜工艺 ├── interact.html # 互动区 ├── quiz.html # 知识挑战 ├── login.html # 登录注册 │ ├── common.css # 全站公共样式（导航、页脚、通用组件等） ├── index.css # 首页样式 ├── history.css # 历史溯源页样式 ├── type.css # 器型分类页样式 ├── pattern.css # 纹饰艺术页样式 ├── sanxingdui.css # 三星堆专题页样式 ├── sanxingdui-3d.css # 三星堆 3D 页样式 ├── gallery.css # 数字展厅页样式 ├── craft.css # 铸铜工艺页样式 ├── interact.css # 互动区页样式 ├── quiz.css # 知识挑战页样式 ├── login.css # 登录注册页样式 │ ├── css/ # 第三方样式库 │ ├── animate.min.css # Animate.css 动画库 │ └── swiper-bundle.min.css # Swiper 轮播组件样式 │ ├── js/ # 脚本目录 │ ├── jquery.min.js # jQuery 库 │ ├── swiper-bundle.min.js # Swiper 轮播组件 │ ├── common.js # 公共脚本（滚动动画、回到顶部、粒子等） │ ├── header-menu.js # 统一导航栏生成与登录状态 │ ├── footer.js # 统一页脚生成 │ ├── gallery.js # 数字展厅交互逻辑 │ ├── sanxingdui.js # 三星堆专题页交互 │ └── sanxingdui-viewer.js # 三星堆 3D 模型展示（Three.js） │ ├── images/ # 图片资源 │ ├── logo.png # 站点 Logo │ ├── banner*.png / banner*.jpg # 各页 Banner 与背景图 │ ├── type/ # 器型分类相关图片 │ ├── pattern/ # 纹饰艺术相关图片 │ ├── dalirenxiang.jpg # 青铜大立人像等文物图 │ ├── qingtongmianju.jpg │ ├── longwending.jpg │ ├── touxiang.jpg │ ├── sanxingdui.png # 三星堆专题配图 │ └── … # 其他页面配图与装饰素材 │ ├── videos/ # 视频资源（数字展厅播放） │ ├── dalirenxiang.mp4 # 青铜大立人像 │ ├── qingtongmianju.mp4 # 青铜纵目面具 │ ├── longwending.mp4 # 叠瓣龙纹鼎 │ └── touxiang.mp4 # 青铜人头像 │ └── 3d/ # 3D 模型资源（备用） └── model.glb # GLB 格式 3D 模型文件六、页面导航关系
首页 ├── 历史溯源 ├── 器型分类 ├── 纹饰艺术 ├── 三星堆专题 ──→ 3D 沉浸观赏 ├── 数字展厅 ├── 铸铜工艺 ├── 互动区 ├── 知识挑战 └── 登录 / 注册七、使用说明
- 将项目文件夹完整下载或克隆到本地。
- 使用现代浏览器（Chrome、Edge、Firefox、Safari 等）打开
index.html即可浏览。 - 三星堆 3D 页需联网加载 Three.js 及远程 3D 模型资源；若网络不可用，3D 功能可能无法正常显示。
- 数字展厅依赖
videos/目录下的本地视频文件，请确保资源完整。 - 登录注册为前端演示功能，用户数据保存在当前浏览器的本地存储中，清除浏览器数据后账户信息将丢失。
八、项目定位
本项目适用于：
- 青铜文化、非遗主题的 Web 前端课程大作业展示
- 博物馆、文化展览类的静态宣传与科普站点
- HTML/CSS/JavaScript 多页面站点结构与交互效果的实践参考
