写了个静态页面，虽然比较粗糙，但也算达到预期了。 主要参考 https://camera-webgi.vercel.app/ 和小红书https://www.xiaohongshu.com/
这部分主要就两个内容：引入three.js并导入模型，设置模型移动路径。前一部分因不熟练操作导致耗费较多时间，引入的过程中出现了很多报错和问题，比如引入three.js时有undefined报错，想用vue书写却出现无法在html中引入vue文件的问题。最后部分使用了vue在js文件写的。后一部分参考了https://camera-webgi.vercel.app/ ，自己在实操的时候设置好模型的位置就可以。
动画主要是指滚动吸附的动画，主要也是参考了https://camera-webgi.vercel.app/ 。window.scrollTo()虽然也可以实现滚动动画，但是无法自定义滚动动画的时长，最后还是用了anime.js中的anime()来实现这个效果。
画板主要是画了一些线条模拟拍照时闪光灯的光，但是效果略显粗糙，这不是重点所以也没过多追求精美度。
卡片展示主要参考了小红书https://www.xiaohongshu.com/ 但是没能实现小红书点击笔记的动画和点出笔记的动画。卡片的照片加入了一些滤镜效果，但达不到拍立得的效果。
静态页面部署的网站有很多，我试了vercel,4everland,21yunbox,netlify,gitee和cloudflare,但出于需要翻墙、显示不安全、需要审核等原因，最后使用了cloudflare，这是我能想到的最优选择。
有几个大问题解决不了。
① 模型滚动有时会卡顿，有时又不卡。且在测试的时候，页面挂久了不刷新也很卡，不知道怎么解决。
② 图片加载卡顿。当滚动到图片墙的时候，可以看到滚动条在一个位置发生了卡顿，同时也可以看出页面的掉帧，当把图片加载完成后第二次滚动就不卡了。本来想着在window.onload的时候直接加载图片。改了之后虽然提前加载出来了，但还是卡顿掉帧。后面看到有个博客说是因为图片分辨率太大了，于是把最高分辨率调为1920*1080。还卡，但是比之前好一些。
③ 没有设置弹性页面。这意味着在手机或平板这些屏幕比例与电脑不一样的设备上，网页的显示会错位或只展示部分内容。且在手机端实测后发现，手机端加载模型很慢、滚动页面时的帧率也不够，可能是没有做性能优化的原因。
④ 点击照片没有动画，展示详情页过于生硬。
总体来说还算可以，由于时间匆忙，势必有很多细节不到位，但也足够了。祝恋爱二周年快乐。