Small program to achieve AR effect
Today, I would like to share with you a method of using a third-party platform: Kivicube ( Kivicube-WebXR online production platform ) to quickly generate small program AR.
Not much to say, let's look at the implementation effect first:
The overall idea is to prepare a 3D model in glb format first, then create an account on the third-party platform Kivicube, upload the model after creating an AR project, and generate an AR rendering, which can be viewed directly by scanning the code.
If you want to call the AR effect map in your own applet, you can authorize the AppID of the applet in the background behind the WeChat applet, and finally call the third-party components of SLAM in the WeChat development tool for debugging, save the uploaded version to WeChat After background review, it can be displayed online in the Mini Program after it is published.
Access process:
1. Download the 3D model
To realize the AR effect of the applet, you first need to prepare a model. Here are several model websites recommended.
1.Sketchfab
We can go to the official website of Sketchfab to download 3D models. Sketchfab claims to be the largest 3D content library platform in the world. There are more than 3 million models on the platform, and there are many free models.
You can download the GITF model directly from the platform. How to convert it to an AR model available for Kivicube can be found in the Sketchfab model format download conversion tutorial .
2.turbosquid：https://www.turbosquid.com/
3.CGTrader：https://www.cgtrader.com/
4.Free3D：https://free3d.com/
下载模型之前点击这里查阅普通模型与AR模型的区别。
二、 在线制作AR
准备好模型后我们就可以开始着手AR创作了。
1.注册并登录Kivicube平台
2.创建项目
【我的项目】-【+AR场景】-【空间定位与跟踪】
可以看到在功能上，Kivicube已可以实现图像检测与跟踪、空间定位与跟踪、陀螺仪/云识别、AR人脸滤镜技术。
3.上传GLB文件
4.设置文件名及缩略图
5.扫码即可实现AR效果
到这里，平台已经自动帮我们生成了一个微信小程序，扫码即可查看效果。
我们还可以选择将其内嵌入自己的微信小程序中。
三、 内嵌于微信小程序中
1.查看自己的AppID与插件路径
2.申请插件
打开微信小程序后台，扫码登录，将生成的AppID关联到自己的小程序插件中
【设置】-【第三方设置】-【添加插件】
3.接入插件
app.json中声明需要使用的插件，这里的provider为AppID
{
"plugins": {
"kivicube-slam": {
"provider”:"wx12ad8a61fa49ea92",
"version":"1.3.20"
}
}
}index.json页面，使用插件提供的组件前，先要在页面的json文件中进行声明引用
这里的kivicube-slam也是插件路径
{
"usingComponents": { "kivicube-slam": "plugin://kivicube-slam/kivicube-slam"}
}index.wxml页面，在页面内加入组件标签（这里的url也是插件路径）
<!--miniprogram/pages/index/index.wxml-->
<navigator url="plugin://kivicube-slam/scene?id=b4d362cc32264162b4c4bb152f5d71d2 ">点击打开Slam场景展示页面</navigator>index.wxss页面 在样式文件内定义组件的高宽
/* miniprogram/pages/index/index.wxss */
.slam {
display: block;
width: 100vw;
height: 100vh;
}index.js页面，这里的url为插件路径
wx.navigateTo({ url:
'plugin://kivicube-slam/scene?id=b4d362cc32264162b4c4bb152f5d71d2' })调试结果
欢迎大家来免费注册使用Kivicube平台，使用低代码编辑器快速创建出专属于你的AR场景，之后我们也会发布更多教程助力大家实现快速开发！
更多精彩请关注公众号【弥知科技】~