1. 编辑器使用说明

    • AR教学丨Unity模板上传初音动画教程,分分种速成!

      • 【编辑器功能】音乐/全景图/图文信息的应用

        • 【编辑器功能】自定义动画功能的实现

          • 请柬教程

            • 电影海报场景教程

              • 婚礼卡片教程

                • 电商类杂志制作教程

                  • 模型场景教程

                    • 让真人AR浪起来~

                      电商类杂志制作教程

                      今天,我们以在电商领域应用颇多的“时尚购物”场景为例,为小伙伴们介绍一下如何制作包含图片、模型并执行“打开网页”等交互功能的场景。


                      【准备】

                      购物案例由五张可交互的图片+一个模型动画组成:

                      1、购物标签将跳转至相应的淘宝链接,进行一键购买;

                      2、鞋子标签将呈现鞋子的模型,可查看、可购买;

                      展示效果可在APP的推荐项目名“RAVVAR”下扫描识别图进行查看。


                      【创建场景】

                      创建“时尚购物”场景:


                      进入编辑器:


                      <b【添加素材】  

                      依次添加“鞋子”、“丝巾”、“大衣”、“外套”和“点击购买”的图片标签(图片素材),“鞋子”模型(模型素材),添加好素材后,利用界面右侧的三维轴调整素材的位置和大小,调整后的界面所示:




                      【设置交互】

                      交互逻辑说明:①扫描后对应位置浮现四个标签;②除鞋子外的标签,跳转链接;③点击鞋子标签,其他标签隐藏,鞋子模型在识别图中间从小旋转放大,(可手势旋转);④鞋子下方出现购买的图片,点击跳转链接。

                      注意:因为在扫描识别图时,只能显示四个标签,所以“鞋子”模型(model-5)和“点击购买”图片首先隐藏起来;


                      设置“鞋子”模型和“点击购买”图片的隐藏:将触发时机设为“扫描识别到”


                      设置点击标签、跳转网页的交互,点击左侧功能栏中的【打开网页】按钮,将丝巾(image-2)的购买链接粘贴在网址栏,并设定当图片被点击时,触发“打开网页”功能的设定:


                      同理,依次设置“大衣”(image-3)、“外套”(image-4)和“点击购买”(image-6)图片素材的打开网页的交互功能。


                      设置点击“鞋子”标签(image-1)时,“丝巾”“大衣”和“外套”三个标签的隐藏交互设置,点击左侧功能栏中【显示/隐藏】:


                      设置点击“鞋子”标签,“鞋子”模型和“点击购买”图片出现的交互设置,点击【显示/隐藏】,设置完成的界面如图6所示:


                      对于自身不包含动画效果的模型,要实现“在识别图中间从小旋转放大”的动态效果,就需要对模型进行“自定义动画”功能设置,所以接下来的第四步,点击左侧功能栏【自定义动画】按钮,按要求进行设置,效果可以通过“预览”功能进行查看,设置后的“在识别图中间从小旋转放大”效果如图:


                      编辑器界面右侧“对象设置”中,通过针对模型进行默认手势的设置,即可对模型实现“手势旋转”的功能要求:


                      将所有素材的功能交互设置完成后,点击【保存】,进行场景保存,保存成功后,点最上角【返回】,回到后台,如图9所示:


                      至此,一个包含图片、模型和一系列交互功能的场景就创建完成了,使用RAVVAR即可查看本场景的AR效果。




                      1851 McCarthy Blvd, Milpitas, CA 95035, USA

                      邮箱: sales@ravv.com