![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=1739151993-GXdaY1dloT8dJ2RKJluxNCZnwwRN2qcy-0-1ce45ece29432bee68b42f2e7a391835)
图5-92
(2)将“Coloring3D”项目下的“Shader”目录下的TextureSample.shader文件导入Unity项目中。这个文件是表面着色器,如图5-93所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P150_7149.jpg?sign=1739151993-IRiAAJsIscbGOMLqkBvuW82rOrEhiUun-0-969cfb69115bf4c72ef83fdebd539176)
图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=1739151993-fV0Lh1o0LDjEtavRIY26OZlHKTLDOkzt-0-9de0203f3a9778dd4d44a309318bbc9b)
图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=1739151993-Oxs6NWNu6b46T6NS2i7UQqjm5SP3191M-0-5b1279372c2231cc9555e6c852cfb494)
图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=1739151993-wiOEmVOk2kZd5z2HmfWih5dWVAeVe4XA-0-61d10bc1fb8b2166ea6d8206e8cf9db8)
图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=1739151993-R3jtKWuvwmRJPJWzBUmf8JpMXZXOsrw0-0-cadeb914e238d7d8d94c302cf4a8f6c6)
图5-97
修改后的效果如图5-98所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P152_7211.jpg?sign=1739151993-SahVjPDcfDB17c6xgQac2Dhrq3SIJ2wK-0-ad693b6aa41ba984aa66d7cee4882996)
图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=1739151993-qF64yVv7phLFE6szf6JtuMMLf8ZVk8bM-0-fd682fa02e2e4fef8aea78d037cdff4c)
图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=1739151993-6RBMM1NP12Zm6jRbFfaz7Y7BtnKZgFcO-0-bb8eac5b33a98ac4596a404e33e4c3d8)
图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=1739151993-hWHvHcu4RIOZdUEjlk9qEdDQnBlhIGuW-0-be1e28425500abf87b702d6361938372)
图5-101
(15)将脚本“Coloring3DBehaviour”添加为“bear”游戏对象的组件,如图5-102所示。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P154_7275.jpg?sign=1739151993-MkdrIKa0EuUECm8sDJr142UPITA6e4y1-0-fdba464789fc916f5d3123d4d4029996)
图5-102
运行结果,如图5-103所示,当识别图片中的小熊颜色变化时,会立即反应到被识别的3D模型上。
![](https://epubservercos.yuewen.com/8A3A4C/19549639508907106/epubprivate/OEBPS/Images/Figure-P154_7276.jpg?sign=1739151993-NVhZVu7vvIomoEb5AK18CFfUeRrobf0Q-0-fea034d2b6dc4c84e851b5d256b4858b)
图5-103