“我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”
前言
中秋已经到来，面对各式各样的月饼您是否出现了选择困难？五光十色的花式包装是否让您更加难以取舍？本篇文章旨在探索实践一种利用AR使月饼能更好的深层次的展现在用户面前，即去包装化展示。使得消费者不单单只能看到华丽的包装，更能进一步感受到月饼的质感。涉及相关技术包含AR.js+Three.js。
前期准备
本文旨在探索，故所使用到图片，模型等素材均为简单化素材。（大家不要介意哈）
1.包装盒图片NFT标定
此处我是对月饼盒进行了拍照，实际商业中可采用各包装盒的高清设计图进行标定，这样效果会更好。 原始图片：
标定网站（因为标定计算量比较大，所以等待的时间会比较长）: carnaux.github.io/NFT-Marker-…
标定完成后生成相关标定文件如下图所示：
2.月饼模型
网上找个月饼模型可真是太难了，因为考虑到月饼模型的最终呈现是依靠three，所以最后只找到了一个glb格式的非精模版的月饼。效果如下所示：
Coding
下面将着重贴出我个人认为比较重要的伪代码，具体代码详情请客官移步码上掘金。运行该项目需要使用到摄像头，所以最好是在手机端浏览器体验哦。
添加需要使用到的js库。
一个three core，一个three加载glb模型需要的加载器文件，一个AR.js对three的拓展支持文件。
加载图形标定文件，以便启动摄像头时进行分析
使用three加载设置模型，此处使用了glb格式，设置了放大与旋转。需要注意的此处模型的xyz是相对于图片左下角的，即左下角xy是(0,0)。
