微信小程序SLAM AR基础教程分享
发布于 3 年前 作者 qiuguiying 4120 次浏览 来自 分享

《鬼灭之刃花街篇》开播在即,今天带大家零基础制作一个炭治郎的AR云手办,可以通过微信小程序将AR版的炭治郎放置在家中,提前感受鬼灭的氛围。先上个GIF大家看看动态的展示效果

在这里先科普一下本次教程使用到的AR技术——空间定位与追踪(SLAM),相比其他的AR技术有什么亮点。

空间定位与追踪(SLAM)能够对用户的真实环境进行感知,从而把AR模型动画素材放置并固定在真实的环境中,最后达到虚实紧密结合的效果。

大家比较熟知的宜家家具摆放就是属于SLAM技术的成熟商业应用。用户可以打开手机识别真实的地面将宜家的家具摆放在真实家庭环境中,辅助消费者判断家具是否符合家里的装修风格。

(一)制作工具介绍

首先在在制作软件上我用到的是国内的一个免费的在线AR制作平台Kivicube。整个平台的操作都是可视化的,其他功能模块如__AR图像追踪__与__AR陀螺仪场景__的操作基本都是把各种模型动画、音频等等拖到中间这个网格中,拖拽调整相对位置,再简单设置一些触发事件就能完成制。

除此之外,所有通过Kivicube制作的AR场景都能够在__浏览器__跟__微信小程序__里直接体验,免去了自己build一个APP的巨大难题!通过微信小程序直接体验AR也能够提升用户的参与度与整个AR互动的传播度。

想学习怎么使用这个平台的同学也可以关注一下Kivicube的官方B站账号「弥知科技」里面有很多其他功能模块的教程。

这个教程里我用到的是这个平台上新上线的「空间定位与追踪」,操作相比其他的功能模块会更加简单。

(二)制作教程

1、模型处理

首先我们需要自己建一个炭治郎的模型。和我一样不会建模的同学们这里我推荐sketchfab平台,里面非常大量的免费模型可供下载,质量也非常高。

挑选好合适的模型之后需要自己通过kivicube的在线模型编辑器调整一下光照与材质,目的主要是让模型在AR环境中也能达到理想的效果。同样属于小白友好的可视化操作,大家通过调整右侧的选项与参数就能实时在左侧预览调整效果。

调整好了就一键导出一个GLB模型,咱们素材准备就完成了。调整好的模型我也放了一份到网盘,想跳过模型调整步骤的同学可以直接下载。

链接: https://pan.baidu.com/s/1Zw_ZDOx4Orul4WZ_zXgIdQ  密码: q5lq

2、模型上传

首先需要先注册登陆一下KIVICUBE账号,网址:www.kivicube.com

右侧点击了解详情有官方SLAM教程传送门,有需要也能看官方的教程

登录成功后,点击界面上方「+AR场景」功能,选择场景类型为「空间定位与跟踪

选择并上传刚刚通过AR模型编辑器调整过的炭治郎模型

接着开始设置场景缩略图与场景名称等基本信息,点击「生成体验链接」

3、场景发布

然后我们就进入了最后一个步骤,发布SLAM场景。这里需要提一下,目前平台针对不同的用户群体做了三种不同的场景发布方式

__扫码直达:__用户直接按照二维码下的指引,扫描下方二维码即可体验刚刚我制作的炭治郎场景,将AR炭治郎放置在真实的环境中。

__小程序插件:__针对一些有将场景植入自己微信小程序需要的伙伴,能够通过简单的操作将刚刚制作好的炭治郎场景接入自己的小程序

__插件与自定义开发:__主要针对于想要实现二次开发的伙伴,譬如我们希望点击炭治郎的模型后新增一些交互事件,实现对音频视频等内容的控制或者想要自定义UI,这项功能适用于有更好编程基础的同学

以上就是本次教程的全部内容啦,希望伙伴们能通过这篇教程发散出更多精彩的AR场景! 

回到顶部