![Unity 2018 AR与VR开发快速上手](https://wfqqreader-1252317822.image.myqcloud.com/cover/133/36862133/b_36862133.jpg)
5.9 涂涂乐
涂涂乐是国内AR应用常见的一种。涂涂乐的原理是识别图片为3D模型的UV展开贴图,实时地将扫描到的UV展开贴图贴到显示的3D模型上。这样当对UV展开贴图修改(上色)时,会立即将修改(上色)的情况反映到显示的3D模型上。
EasyAR提供了涂涂乐的例子,有些可以直接拿来使用。涂涂乐的例子是基础例子中的“Coloring3D”项目。
(1)将“Coloring3D”项目下的“StreamingAssets”目录下的bear.jpg文件导入Unity项目下的“StreamingAssets”目录中。这幅图片既是要识别的图片,同时也是3D模型的UV展开贴图,如图5-92所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P150_7148.jpg?sign=1738889779-tpevTSpyUY9trHG3r7tc5Gvd9aadKNul-0-e8cfdd1b4592f1c6b76a611f9a28be7b)
图5-92
(2)将“Coloring3D”项目下的“Shader”目录下的TextureSample.shader文件导入Unity项目中。这个文件是表面着色器,如图5-93所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P150_7149.jpg?sign=1738889779-sTy0Fudi7gRkDBUPgmk7nIUT8FMsDqjb-0-c00a200d39573214d91c8a71391409d5)
图5-93
(3)将“Coloring3D”项目中“Scripts”目录下的Coloring3DBehaviour.cs文件导入Unity项目下的“Scripts”目录中,如图5-94所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P151_7177.jpg?sign=1738889779-Xbp7gMEskZILmH8g8sNHH3znv8iXPFuQ-0-9a4dc39d17ae8adf88efa79e4e617e79)
图5-94
(4)将“Coloring3D”项目中“Resources”目录下的bear.fbx文件(3D模型文件)导入到Unity项目下的“Models”目录中,如图5-95所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P151_7178.jpg?sign=1738889779-d2KKyN92ENCCBAD1kiyRXZqoOkpx4TJI-0-82c8f332637d353f46abc7f2b4c1f3aa)
图5-95
(5)将“Coloring3D”项目中“Materials”目录下的TextureSample.mat文件(3D模型的贴图)导入Unity项目中,如图5-96所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P152_7209.jpg?sign=1738889779-Gm2RRc7ce2ir20mUsWPLKXGXKOLQRUBN-0-52a7326377426ceaa814f97cf42fc14b)
图5-96
(6)选中刚导入的“TextureSample”,修改其“Shader”属性为“Sample/TextureSample”,即用最先导入的表面着色器TextureSample.shader做纹理,如图5-97所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P152_7210.jpg?sign=1738889779-ZDKjoJaGYvSoH4nW3k2nSVN9ViLPeABq-0-c0d0335ce5434a69bf87b4cd628781a3)
图5-97
修改后的效果如图5-98所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P152_7211.jpg?sign=1738889779-zdqjvvkxZ3BNKTCM2nfMOBYiQh6v1j8l-0-511f29430a8097c653f54670ecd68d8d)
图5-98
(7)新建一个场景,删除原有的“Main Camera”,从目录“EasyAR/Prefabs/Composites”里将预制件“EasyAR_ImageTracker-1”拖动添加到场景中,并将EasyAR的“SDK License Key”复制到“EasyARBehaviour”组件的“Key”属性中。
(8)将“EasyAR/Prefabs/Primitives”目录下的预制件“ImageTarget”拖动添加到场景中。
(9)将场景中的“ImageTracker”游戏对象拖入“ImageTarget”游戏对象“ImageTargetBehaviour”组件的“Loader”属性中为该属性赋值。
(10)将要识别的图片路径填写在“ImageTargetBehaviour”组件的“Path”属性中,路径以“StreamingAssets”目录为根目录。
(11)修改“Size”属性,将“X”和“Y”的值均设为1。
(12)设置“ImageTargetBehaviour”组件的“Storage”属性为“Assets”,如图5-99所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P153_7240.jpg?sign=1738889779-V72odFmkAzUHvYq4YkfxOZXFMHqLTaJx-0-cba759b55c0b809bbae2152bdb8ef1f2)
图5-99
(13)将“Models”目录中小熊的3D模型添加为“ImageTarget”游戏对象的子对象,同时修改“Bear”模型的位置和角度,使其在“ImageTarget”游戏对象旁边,正面向上(Z轴正向),如图5-100所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P153_7241.jpg?sign=1738889779-ebbDErouEzQ0if50kqVVqKLcVx7YnDAf-0-18fd447ea8c4df60c6042474b167de14)
图5-100
(14)修改模型贴图,在“bear”的“MeshRenderer”组件中,将“Materials”的“bear_toy”修改成“TextureSample”,如图5-101所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P154_7274.jpg?sign=1738889779-u5icXa7sFaY5QmKbit93VaRowz8mB83j-0-7e84085b9fa9de2d5fcb099f725db34b)
图5-101
(15)将脚本“Coloring3DBehaviour”添加为“bear”游戏对象的组件,如图5-102所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P154_7275.jpg?sign=1738889779-1ujFBsoaEXxSBo6NlpNWBtTycGrwiPCB-0-4f24b50c80ee4a9f650dbeb0abc95651)
图5-102
运行结果,如图5-103所示,当识别图片中的小熊颜色变化时,会立即反应到被识别的3D模型上。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P154_7276.jpg?sign=1738889779-LiEmjyhvy4cCbz6LYypvVbUO5EWKvkcj-0-bc26b0b26e5c50b9dc51704b676248a4)
图5-103