话不多说，先看实现效果
作者之前尝试过Apple公司的ARkit、Google公司的ARCore以及国产的EasyAR和SenseAR。Apple公司和Google公司的AR产品是市面上的主流，功能非常的完善，基本可以满足所有的程序载体，但是开发门槛非常的高。国内这两款AR产品还不错，但是主要针对的是WebAR，在微信小程序上功能不是很完善，作者在网上查找资源后发现国内弥知科技公司的Kivicube产品完美的适配于微信小程序，而且几乎上是零代码。非常适合小白新手
一、下载3D模型
要完成这个功能，我们首先需要准备一个模型。我们可以去Sketchfab官网下载3D模型，Sketchfab号称是世界上最大的3D内容库平台，平台上有超300w个模型，有很多Free的模型
如果Sketchfab上不去也可以去Renderhub官网
如果有小伙伴不会翻墙，可以去国内爆火的CG模型官网，因为是国内的，很多模型都是免费的，而且质量也非常不错，本篇文章中的模型也是源自CG网
二、模型格式转化
Kivicuba支持的格式为glb，而很多时候我们不能从网站上直接下载到该格式的3D模型，因此我们需要转化。作者下载的模型为FBX格式。将FBX转化为glb格式我们需要使用npm
在终端中使用npm安装fbx2gltf.js插件
查看刚才下载的的FBX2glTF.exe保存在什么文件夹中
使用终端进入该文件夹中
输入命令在线文件格式转换
再次进入模型文件夹中查看，可以看到已经有glb格式的文件了
三、在线制作AR
进入Kivicube官网Kivicube-WebXR在线制作平台
创建一个新项目
可以看到，在功能上，Kivicube可以实现AR最基础的图像检测技术和图像追踪技术。
添加AR场景
选择空间定位与跟踪功能
选择之前生成的glb格式文件
设置页面标题与模型缩略图，点击生成
到这里，平台已经自动帮我们生成一个微信小程序了，通过扫码就可以看到其效果
如果想内嵌入到自己的微信小程序中，请看第四部分
四、内嵌于微信小程序中
查看自己的AppID与插件路径
进入微信公众平台，选择设置，第三方设置，为自己的微信小程序添加SLAM插件
在以下页面中添加以下内容
index.js页面，这里的url为插件路径
wx.navigateTo({ url: 'plugin://kivicube-slam/scene?id=7b2db4ae02f94171aed1417212f496ca' })
index.json页面，这里的kivicube-slam也是插件路径
{
"usingComponents": { "kivicube-slam": "plugin://kivicube-slam/kivicube-slam"}
}
index.wxml页面，这里的url也是插件路径
index.wxss页面
/* miniprogram/pages/index/index.wxss */
.slam {
display: block;
width: 100vw;
height: 100vh;
}
app.json页面，这里的provider为AppID
"plugins": {
"kivicube-slam": {
"version": "1.2.0",
"provider": "***"
}
},
调试结果
相关文章
您阅读本篇文章共花了：
发表评论