最近捣鼓了个博物馆网页项目，客户非要搞线上展厅。我寻思这玩意跟普通网站不一样，得让人隔着屏幕也能感受文物的温度。折腾了半个月总算上线，过程还真总结出七步干货。

第一步：翻箱倒柜找素材

扛着单反跑去博物馆仓库蹲了三天。拍青铜器的时候特意让师傅打侧光，那些铜绿纹理在镜头里跟活了似的。最麻烦是那套唐代陶俑，二百多件展品每件都得量尺寸、标年代，光整理Excel就熬了两个通宵。

第二步：把展厅搬进电脑

在ps里画展厅平面图时突然开窍——实体展厅四面墙，网页展厅只有一屏！干脆把明代书画区做成可旋转的圆柱体，鼠标拖动就能环视。用sketch拉线框图时发现，3D模型加载太慢，立马把青铜器展区改成分段加载，先显示轮廓再渲染纹路。

• 瓷器展台做成九宫格
• 书画区添加放大镜功能
• 玉器区特别加了半透明背景

第三步：让文物会说话

试过直接放文物介绍文字，看着跟教科书似的。后来给每件展品加了两段语音：专家正经解说版和童声讲故事版。最出彩的是给东汉说唱俑做了段动画，点它肚子就弹出打鼓音效，甲方看到这个设计直接拍板。

第四步：配色差点翻车

最开始按传统用大红大金，结果屏幕看得眼晕。跑回博物馆盯了一天展柜灯光，发现真品都用灰蓝衬布！赶紧把背景色改成烟青灰，重点文物用香槟金描边。按钮做成仿铜蚀效果，鼠标移过去就浮现锈斑纹。

第五步：跟程序员打架

那帮码农非说全景展厅做不到。我直接在会议室白板上画原理：用全景图切片+陀螺仪API。最搞的是加载进度条，我坚持要改成青铜器纹样生长动画，前端小哥差点掀桌，用SVG路径动画总算搞定。

第六步：逼真细节控

测试时发现文物影子太平。连夜调CSS滤镜，给玉器加柔光阴影，金属器加锐利投影。观众留言墙更有意思，把弹幕做成竹简滚动特效，用户发的"牛哇"自动转成篆体字。

第七步：手机端灾难现场

上线前用旧手机测试，3D展厅直接卡成PPT。删掉所有粒子特效，把高清图换成渐进式加载，加载图标换成小鼎旋转。现在连五年前的小米都能流畅看全景。

交活儿时馆长特别逗，举着手机在展厅里边走边比划："这不跟真的一样？"网页右下角有行小彩蛋——累计参观人数超过实体馆当日客流就放烟花，昨天看已经炸了十七回。