Vuforia+Unity实战视频播放案例2，适用AR广告营销，AR说明书

《Vuforia SDK》零基础入门视频课程专辑6章12节3.5小时构成的，现在我们讲专辑的第3章实战AR内容制作“Image Target +3D Objects ”基础版有4个案例，第1个就是单图Marker + 单个Object；第二个这张单图底图，但是上面是三个Objects；第三个案例单图上面的汽车这个objects，但汽车是可以旋转的，自动旋转的，这涉及到简单的代码；第四个案例-单图Maker触发1个Object(视频Video Play)播放，手机平板扫一扫自动播放，经典的AR广告营销。

( 本文原创登记、区块链存证！转载请注明：IoT产品王|AR、VR、MR升级XR的视频课程 )

好，我们进入Image Target单图扫一扫识别触发视频播放第二个案例海洋公园，应用场景就是公园景区门票（名片、DM宣传单）或灯箱广告扫一扫，视频自动播放或3D 卡通蹦出来。强调玩法就是纸媒Marker底图扫一扫，可以出现左右上面多个视频或3D Models播放特效。TV物理电视机两旁再插上两个大型虚拟数字屏幕看比赛。

1.1 Unity3D编辑器创建New Project

Unity下载更新起码40-60分钟才能下载完毕。好，我们点击这个三角图标，打开Unity编辑器2018.2.5版，载入过程比较慢，按PC配置可能1~2分钟）右下角蓝色的按钮创建新Project，给Project命名“seapark11”底图Target Image上面有1个Objects视频，视频自动播放。PC配置，推荐华为Mate Book 14 2020款7200元（i7/16GB/512GB/Nvidia Geforce 1060+。ARVRMR APP开发或者单纯玩3D设计都需要这样的配置。

1.2 Unity3D编辑器工作界面说明

Unity3D编辑器工作界面的布局，中间叫做Canvas画布，3D编辑工作界面。左上角这个Hierarchy层级，Object都在这里，Object下级包含Group群，上级就是Scene场景。点击左边的一个Object，右边属性inspector就会出来。最下面底部是关于资产Assetes，包括图片、音频、视频、代码等素材文件夹。好，我们现在先清爽工作界面，把这个项目不需要的都删除。左上角删除Main Camera(游戏用的)因为这里我们要做的是ARVR项目，需要的是AR Camera设置。

2.1 Build Setting设置

File文档里面Build Setting需要切换到安卓平台，我们看见三角形unit图标切换到安卓后面，就表示切换成功，然后开始Player Setting，右下角XR Setting勾选“Vuforia Augumented Reality”点击X关闭窗口。

2.2 Vuforia AR Camera设置

导入Vuforia AR camera相当于你的视线，人、手机、平板、智能眼镜的那个摄像头就是眼睛=视线，要让它起作用就必须导入。顶部菜单Game Object-Vuforia-AR Camera现在导入进来了，我们看见底部菜单assets里面有5个文件夹，最后一个文件夹“Vuforia”都看见了。

左上角层级里面出现了“AR Camera”我们需要设置AR Camera，需要先取得Vuforia License软件使用许可。访问Vuforia Developer开发者门户Email注册登录，License Manager里面创建License Key，AP命名“seapark11”免费版非商用这个点打勾。找到seapark11点开就看见我们新项目License Key，ctr+C复制，返回Unity3D编辑器工作界面右上角框里cTR+V粘贴。AR Camera配置就搞定了。

3.1 单图底图Maker(Image Target)设置

访问Vuforia Developer开发者门户，切换点击Target Manager-Add Database底图Maker是一个database。给底图Maker命名为“seapark11-marker”点创建。找到seapark11-marker文件，双击点开看见Target图片为“0”我们需要新增底图Marker，点击新增“Add Target”我们选底图Marker，就是被识别的底图，Marker类型勾选Single image，宽度值写成15(图片宽度是有关系)开始载入底图。我们返回看见这张底图分辨率五颗星，Tracking追踪时候就能稳稳地锚住，不丢失图像。好，我们看见我们的底图，右上角点击Download Database下载，注意勾选Unity Editor提交进入下载过程中。下载完成，最底部我们看见下载完成提示，点击打开Package，选择全部导入“import all” 

好，右边属性image target behavior里面，我们看见prefined预制的、有用户自定义的，有云端识别的，我们在database找到seapark11-marker，中间画布我们的底图Marker就显示出来了，我们个性定制的这张海洋公园的底图就出来了。

底图尺寸大小需要调整，可以自己拖拽，也可以右边属性参数值修改。右上角XYZ轴，X代表左右移动（视线从东部往西看）、Y代表上下高低移动（视线从顶部往下看）Z代表远近距离拉动。这就是六轴6个DOF视线设置。

左上角这些功能按钮，Move移动、Rotate旋转、Scale放大缩小、最右边的全能按钮就是移动放大缩小都OK。右下角我们看见底图球体3D，这样拖拽预览效果。

4.1 Assets资产导入-Objects-Video

顶部菜单Game Object里面3D Object-选Quad正方形，进来以后，没看见正方形。右边属性调整Scale尺寸大小，XYZ值都写成5或11，画布里面看见了正方形。正方形插入到我们这张底图Marker上面，我们熟悉一下6DOF视线，从高处从顶部看到底部，从右看到左。左边层级选中正方形quad，再右边属性X轴的参数值改成45，这样看正方形更清楚。

接下来，我们调整这个视频播放的数字屏幕的尺寸和角度。我们先把底图Marker（image target）旋转到这个正面的方向，头图视频的感觉。再调整视频的宽度和角度。调整视频的宽度，与底图宽度一致。左边层级选中quad，右边属性调整，Y轴高度南北的方向拉高，X周左右东西方向拉宽超过底图宽度，这样方便预览，因为我的视频是1280×720需要的是长方形。我们复习一下6DOF，高处低处？左右东西？远近深远景8深？

视频播放的虚拟屏幕，这一次不是正方体800X800而是长方体1280X 720手机横屏播放的效果。好，现在要调长方体的角度，右边这个值如果是负的，就是底图下面去了，我们必须把它放在底图上面。

右边属性，Rotate旋转值必须是正数，底图上面的就是白的，如果下面去了就不会是白的，你就看不到了，视频播放你不知道哪去了，视频成了被底图盖住的状态。现在我们调整虚拟屏幕的尺寸跟底图一样大小，并且稍微有一个倾斜的角度，因为完全重叠了，我们又看不见了，所以必须有一个倾斜角度20-27-29度。手动调整，左边选中quad，右边属性参数值里数字，Position位置参数，XYZ都是0就是回到正中央的意思。这种梯形，把X改成90。我们看见底图上面90度角斜插着这个虚拟屏幕，这个屏幕是16：9宽屏1280X720。

现在我们把准备好，放在桌面的1280X720海洋公园的视频文件拖到Assets资产Resource里面，再把视频直接拖在画布Canvas的虚拟屏幕quad正方形上。好，我们听见视频自动播放的声音了，右下角Objects的视频预览看见了海洋公园的这个视频的预览播放。

5.1 如何预览底图Marker?

右边属性顶部，看见太阳系这个视频文件已经进来了，视频已经成功拖进了的。画布顶部的Play预览按钮。我事先打印好的底图image target就是 marker图片，打开对准PC摄像头扫描底图Marker识别出来了Objects就是海洋公园的视频，并且自动播放。点右上角最大化窗口，虚拟视频播放。双击Play按钮返回标准工作界面。2018年版比2017年版视频播放已经简化，所以还是要追求最新版本。

5.2 如何新增另一个位置的虚拟屏幕？

预览play stop停止播放。我们尝试第2种做法，虚拟屏幕不是在手机上面位置，而是在手机的另一侧的播放效果。我们把quad虚拟屏幕平移到底图marker侧面，再调整角度。前面例子是重叠在底图上面，这次也是以后我们做AR名片，名片上面以及左中右电话社交媒体的3D图标。现在点击预览，底图右侧视频就出现了。底图Marker五星级识别率，Object图形很稳定，没有说散掉了，丢失了。类似的，你也可以底图围绕一圈都可以的放置多媒体AR名片的各种信息，电话社交媒体图标，官网标识购物车，另一个课程再讲实战AR名片。 

6.1 如何保存新项目场景？ 

如何保存场景？右边属性，要确保勾选了“Video Player”自动播放。File文档-Save保存，把场景另存为”seapark11”上面的文件地址，我们能够看见首先是项目，然后是Assets资产，把这个场景保存为seapark11。好，右上角这个” seapark11”场景就显示出来了，点击Save保存。

预告，下一章讲如何把Unity里面建设完成的ARVR内容或者ARVR APP输出到安卓或苹果终端，手机平板测试实际效果。我们完成的一个Project，复制粘贴就成了两个Project。Project01就输出给苹果手机，左下角苹果ARKIt插件。Project02输出给安卓终端，就调用Unity谷歌ARCore插件，这样来实现的。还有Mozilla FoxReality浏览器型跨平台WebXR版本输出，WebGL来实现浏览器跨平台、款终端的输出。