【微信小程序AR】基于Kivicube零代码实现微信小程序AR

 话不多说，先看实现效果

作者之前尝试过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也是插件路径

<navigator url="plugin://kivicube-slam/scene?id=7b2db4ae02f94171aed1417212f496ca">点击打开Slam场景展示页面navigator>

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": "***"
    }
  },

调试结果