当前位置: 首页 > Web前端 > JavaScript

微信小程序实现AR效果

时间:2023-03-27 10:52:16 JavaScript

今天给大家分享一个使用第三方平台:Kivicube(Kivicube-WebXR在线制作平台)快速生成小程序AR的方法。话不多说,先看看实现效果:https://www.bilibili.com/video...总体思路是先准备一个glb格式的3D模型,然后在第三方平台创建账号Kivicube,并创建上传AR工程后,会生成模型生成AR效果图,直接扫描二维码即可查看。如果想在自己的小程序中调用AR效果图,可以在微信小程序后台授权小程序的AppID,最后在微信开发工具中调用SLAM的第三方组件进行调试,保存上传版本到微信后台审核后,发布后可在线展示在小程序中。接入流程:1.下载3D模型要实现小程序的AR效果,首先需要准备一个模型。这里推荐几个示范网站。1、Sketchfab我们可以去Sketchfab官网下载3D模型。Sketchfab自称是世界上最大的3D内容库平台。平台上有超过300万个模型,还有很多免费模型。您可以直接从平台下载GITF模型。如何将其转换为Kivicube可用的AR模型,可参见Sketchfab模型格式下载转换教程。2.Turbosquid:https://www.turbosquid.com/3。CGTrader:https://www.cgtrader.com/4。Free3D:https://free3d.com/下载模型前,点击这里查看普通模型和AR模型的区别。2.在线制作AR模型准备好后,我们就可以开始AR制作了。1.注册并登录Kivicube平台Kivicube-WebXR在线制作平台2.创建项目【我的项目】-【+AR场景】-【空间定位与追踪】可以看到在功能上,Kivicube已经可以实现图像检测跟踪、空间定位跟踪、陀螺仪/云识别、AR人脸滤镜技术。3.上传GLB文件4.设置文件名和缩略图5.扫描二维码实现AR效果此时平台已经自动为我们生成了微信小程序,您可以扫描二维码查看影响。我们也可以选择将其嵌入到我们自己的微信小程序中。3.嵌入微信小程序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也是插件路径)点击打开Slam场景展示页面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'})调试结果欢迎大家免费注册使用Kivicu成为平台,使用低代码编辑器快速创建属于你自己的AR场景,我们将发布更多教程,助你实现快速开发!更多精彩,敬请关注公众号【米智科技】~