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

本文涉及的产品
实时数仓Hologres,5000CU*H 100GB 3个月
智能开放搜索 OpenSearch行业算法版,1GB 20LCU 1个月
检索分析服务 Elasticsearch 版,2核4GB开发者规格 1个月
简介: 话不多说,先看实现效果作者之前尝试过Apple公司的ARkit、Google公司的ARCore以及国产的EasyAR和SenseAR。Apple公司和Google公司的AR产品是市面上的主流,功能非常的完善,基本可以满足所有的程序载体,但是开发门槛非常的高。国内这两款AR产品还不错,但是主要针对的是WebAR,在微信小程序上功能不是很完善,作者在网上查找资源后发现国内弥知科技公司的Kivicube产品完美的适配于微信小程序,而且几乎上是零代码。非常适合小白新手。

  话不多说,先看实现效果

image.gif编辑

作者之前尝试过Apple公司的ARkit、Google公司的ARCore以及国产的EasyAR和SenseAR。Apple公司和Google公司的AR产品是市面上的主流,功能非常的完善,基本可以满足所有的程序载体,但是开发门槛非常的高😅。国内这两款AR产品还不错,但是主要针对的是WebAR,在微信小程序上功能不是很完善,作者在网上查找资源后发现国内弥知科技公司的Kivicube产品完美的适配于微信小程序,而且几乎上是零代码。非常适合小白新手👍👍👍

一、下载3D模型

要完成这个功能,我们首先需要准备一个模型。我们可以去Sketchfab官网下载3D模型,Sketchfab号称是世界上最大的3D内容库平台,平台上有超300w个模型,有很多Free的模型

image.gif编辑

如果Sketchfab上不去也可以去Renderhub官网

image.gif编辑

如果有小伙伴不会翻墙,可以去国内爆火的CG模型官网,因为是国内的,很多模型都是免费的,而且质量也非常不错,本篇文章中的模型也是源自CG网

image.gif编辑

二、模型格式转化

Kivicuba支持的格式为glb,而很多时候我们不能从网站上直接下载到该格式的3D模型,因此我们需要转化。作者下载的模型为FBX格式。将FBX转化为glb格式我们需要使用npm

在终端中使用npm安装fbx2gltf.js插件

image.gif编辑

查看刚才下载的的FBX2glTF.exe保存在什么文件夹中

image.gif编辑

使用终端进入该文件夹中

image.gif编辑

输入命令在线文件格式转换

image.gif编辑

再次进入模型文件夹中查看,可以看到已经有glb格式的文件了

image.gif编辑

三、在线制作AR

进入Kivicube官网Kivicube-WebXR在线制作平台

image.gif编辑

创建一个新项目

image.gif编辑

可以看到,在功能上,Kivicube可以实现AR最基础的图像检测技术和图像追踪技术。

image.gif编辑

添加AR场景

image.gif编辑

选择空间定位与跟踪功能

image.gif编辑

选择之前生成的glb格式文件

image.gif编辑

设置页面标题与模型缩略图,点击生成

image.gif编辑

到这里,平台已经自动帮我们生成一个微信小程序了,通过扫码就可以看到其效果

image.gif编辑

如果想内嵌入到自己的微信小程序中,请看第四部分

四、内嵌于微信小程序中

查看自己的AppID与插件路径

image.gif编辑

进入微信公众平台,选择设置,第三方设置,为自己的微信小程序添加SLAM插件

image.gif编辑

在以下页面中添加以下内容

index.js页面,这里的url为插件路径

wx.navigateTo({ url: 'plugin://kivicube-slam/scene?id=7b2db4ae02f94171aed1417212f496ca' })

image.gif

index.json页面,这里的kivicube-slam也是插件路径

{
    "usingComponents": { "kivicube-slam": "plugin://kivicube-slam/kivicube-slam"}
  }

image.gif

index.wxml页面,这里的url也是插件路径

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

image.gif

index.wxss页面

/* miniprogram/pages/index/index.wxss */
.slam {
    display: block;
    width: 100vw;
    height: 100vh;
  }

image.gif

app.json页面,这里的provider为AppID

"plugins": {
    "kivicube-slam": {
      "version": "1.2.0",
      "provider": "wx12ad8a61f049ea02"
    }
  },

image.gif

调试结果

image.gif编辑


目录
相关文章
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
500 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
590 1
|
1月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
50 1
适用于alist的微信遮罩代码
最近在研究alist网盘工具,终于找到了适用于alist的微信遮罩代码。代码如下:``` ```。下面是示例图片,可根据需要自行替换。![点击查看示例图片](https://ucc.alicdn.com/pic/developer-ecology/ms7h4bs4k7hme_1a36659fd3054e508107f6c764c6f0d3.jpg)
|
1月前
|
开发框架 小程序 JavaScript
小程序代码丢失!反编译找回
小程序源代码的容易获取问题确实存在一些潜在的安全隐患。然而,现在的小程序开发框架采用像 Babel 这样的打包工具,将 JavaScript 逻辑代码混合在一个文件中并进行转编译,使其变得难以理解。
38 0
小程序代码丢失!反编译找回
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
196 1
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
575 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
330 0
|
1月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
507 0
|
1月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
33 0
下一篇
无影云桌面