小程序实现AR效果_微信小程序ar开发-CSDN博客

本文链接：https://blog.csdn.net/yi247630676/article/details/122698088

第一步注册平台账号信息

第二步将SLAM第三方插件关联到小程序中。

第三步敲代码，写程序:

准备GLB文件-番外篇

今天是2022年1月28号了，是春节前最后一次更新CSDN了。新的一年里面，祝福大家新年快乐，虎虎生威。

今天给大家带来一个生成小程序AR效果在网上研究很多用小程序创造AR的方法，屡试不爽，CSDN还有用第三方软件EasyAR来实现。Demo和测试方法在下面网友推荐了，方法都没有测试陈成功过。有成功的网友可以告诉我一下，如何实现了。

GitHub：GitHub - z-92/EasyAR-miniprogram-WebAR-Demo

https://blog.csdn.net/qqmlxy1/article/details/88387604

换了一个第三方软件来尝试，结果成功了。

我分享一下解题思路，首先在第三平台kivicube上面创建一个账号，在创建一个AR的项目图，要求上传GLB文件。接着我们还是去第三方模型平台下载AR动画效果图，将下载好的AR动画效果图转化为GLB模式。回到kivicube平台进行上传，生成AR效果图，可以直接扫码看到AR效果图。如果想在小程序中调用AR效果图，生成小程序插件的APPID，将小程序的APPID授权在微信小程序后的后台中，最后再微信开发工具中调用SLAM第三方的组件进行调试，保存好上传版本到微信后台审核，发布之后就可以在小程序线上进行展示了。（因为精力有限，我只弄到在微信公众号开发工具上面呈现2D-AR效果，剩余3D的效果和小程序的发布版本就留着以后慢慢学习。）赶紧来实操.

第一步注册平台账号信息

Kivicube-WebXR在线制作平台

在个人中间里面点击+AR场景，进行创建。

点击创建控件

GLB文件准备在下方。

上传GLB文件（glb的文件底下有找寻方法。）

命名名字和图片

扫码即可实现AR效果

扫码呈现 AR效果：

地址链接：AR记录生活_哔哩哔哩_bilibiliAR人物效果，让生活了乐无边。https://www.bilibili.com/video/BV1234y117ik/

第二步将SLAM第三方插件关联到小程序中。

打开微信小程序后台，扫码登陆

将生成APPID的关联到自己的小程序插件中。

第三步敲代码，写程序:

下载微信开发工具，登陆平台，新建一个项目

调试结果呈现：微信开发工具不支持3D画面调试，建议在真机上面调试。

代码部分：

代码架构：index.js,index.wxml,index.js,index.wss,index.json。

index.wxml（id是上传GLB文件到SLam平台后生成的ID，标签引用是可以用上）

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

index.wss（样式这边好像都没有用到）

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

index.json

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

index.js(id是上传GLB文件到SLam平台后生成的ID，标签引用是可以用上)

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

app.json（provider:就是小程序平台内关联SLAM的组件ID，也就是SLAM的ID名字。这里需要做引用）

{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "kivicube-slam": {
      "version": "1.2.0",
      "provider": "wx12ad8a61f049ea02"
    }
  },
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "AR开发 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}