微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

这篇具有很好参考价值的文章主要介绍了微信小程序AR:通过Kivicube平台零代码实现小程序AR效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序实现AR效果

今天给大家分享一个使用第三方平台:Kivicube(Kivicube-WebXR在线制作平台),快速生成小程序AR的方法。

话不多说,先看实现效果:

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

https://www.bilibili.com/video/BV1rT4y1o7r2/?spm_id_from=333.999.0.0&vd_source=5108e7673f643b30c736dfd0b36e622a

整体的思路是先准备一个glb格式的3D模型,再在第三方平台Kivicube上面创建一个账号,创建好AR项目后上传模型,生成AR效果图,此时可直接扫码查看。

如果想在自己的小程序中调用AR效果图,可以将小程序的AppID授权在微信小程序后的后台中,最后再微信开发工具中调用SLAM第三方的组件进行调试,保存好上传版本到微信后台审核,发布之后就可以在小程序线上进行展示了。

接入流程:

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

一、 下载3D模型

要实现小程序AR效果,首先需要准备一个模型,这里推荐几个模型网站。

1.Sketchfab

我们可以去Sketchfab官网下载3D模型,Sketchfab号称是世界上最大的3D内容库平台,平台上有超300w个模型,有很多免费的模型。

可直接从该平台上下载GITF模型,如何转换为Kivicube可用的AR模型可查Sketchfab模型格式下载转换教程

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

2.turbosquid:https://www.turbosquid.com/

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

3.CGTrader:https://www.cgtrader.com/

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

4.Free3D:https://free3d.com/

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

下载模型之前点击这里查阅普通模型与AR模型的区别。

二、 在线制作AR

准备好模型后我们就可以开始着手AR创作了。

1.注册并登录Kivicube平台

Kivicube-WebXR在线制作平台

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

2.创建项目

【我的项目】-【+AR场景】-【空间定位与跟踪】

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

可以看到在功能上,Kivicube已可以实现图像检测与跟踪、空间定位与跟踪、陀螺仪/云识别、AR人脸滤镜技术。

3.上传GLB文件

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

4.设置文件名及缩略图

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

5.扫码即可实现AR效果

到这里,平台已经自动帮我们生成了一个微信小程序,扫码即可查看效果。

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果
微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

我们还可以选择将其内嵌入自己的微信小程序中。

三、 内嵌于微信小程序中

1.查看自己的AppID与插件路径

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

2.申请插件

打开微信小程序后台,扫码登录,将生成的AppID关联到自己的小程序插件中

【设置】-【第三方设置】-【添加插件】

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果
微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

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也是插件路径)

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

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' })

调试结果

微信小程序AR:通过Kivicube平台零代码实现小程序AR效果

欢迎大家来免费注册使用Kivicube平台,使用低代码编辑器快速创建出专属于你的AR场景,之后我们也会发布更多教程助力大家实现快速开发!

更多精彩请关注公众号【弥知科技】~文章来源地址https://www.toymoban.com/news/detail-412752.html

到了这里,关于微信小程序AR:通过Kivicube平台零代码实现小程序AR效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序云开发|基于微信小程序实现房产中介平台系统

    作者主页:编程千纸鹤 作者简介:Java、前端、Python开发多年,做过高程,项目经理,架构师 主要内容:Java项目开发、毕业设计开发、面试技术整理、最新技术分享 收藏点赞不迷路  关注作者有好处 文末获得源码 项目编号:BS-XCX-012 语言环境:微信小程序 开发工具:微信开

    2024年04月25日
    浏览(40)
  • 基于Java+微信小程序实现《微信阅读平台》

    博主介绍 : ✌ 全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精彩专栏 推荐订阅 👇🏻 不然下次找不到哟 2022-2024年

    2024年02月07日
    浏览(37)
  • 开发一款AR导览导航小程序多少钱?ar地图微信小程序 ar导航 源码

        随着科技的不断发展,增强现实(AR)技术在不同领域展现出了巨大的潜力。AR导览小程序作为其中的一种应用形式,为用户提供了全新的观赏和学习体验。然而,开发一款高质量的AR导览小程序需要投入大量的时间、人力和技术资源。本文将探讨AR导览小程序的成本估算

    2024年02月10日
    浏览(42)
  • 数学辅导平台|基于微信小程序实现数学辅导平台

    作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助 收藏点赞不

    2024年03月16日
    浏览(43)
  • 华为云零代码新手教学-体验通过Astro Zero快速搭建微信小程序

    您将学会如何基于Astro零代码能力,DIY开发,完成问卷、投票、信息收集、流程处理等工作,还能够在线筛选、分析数据。实现一站式快速开发个性化应用,体验轻松拖拽开发的乐趣。 环境准备 注册华为云账号、实名认证 如果您已拥有华为账号且已通过实名认证,可直接体

    2024年02月12日
    浏览(41)
  • 微信小程序通过lottie库实现json动画

    通过npm安装Lottie库(注意微信小程序使用lottie-miniprogram,vue项目使用 lottie-web) 把ui提供的json文件动画改成js文件并通过module.exports导出文件 在页面wxml文件创建一个canvas标签来存放动画(注意这里canvas需要包裹在view标签中并设置 style=\\\"width: 100%;height: 100%;) 在页面ts文件中使用

    2024年02月11日
    浏览(39)
  • 【微信小程序】通过绑定点击事件来实现点击交互

    在微信小程序中,可以通过绑定点击事件来实现点击交互。以下是点击事件的实现步骤: 在WXML文件中,找到需要绑定点击事件的元素,例如按钮、图片等。 在该元素上添加 bindtap 属性,并指定一个对应的事件处理函数,例如: 在对应的页面或组件的JS文件中,定义事件处理

    2024年02月14日
    浏览(58)
  • 微信小程序毕业设计作品成品(69)微信小程序短视频分享平台系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(40)
  • 微信小程序|驾校预约平台的设计与实现

    作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助 收藏点赞不

    2024年03月17日
    浏览(44)
  • 微信小程序 通过百度API接口实现汉译英翻译

    目录 先看一下做出来的效果: 一、微信开发平台的网址(微信开发者工具的官方使用说明) 二、百度API(文本翻译的API) 三、进入正文,微信小程序的代码部分 基础 | 微信开放文档 (qq.com) https://developers.weixin.qq.com/miniprogram/dev/api/   文本翻译_机器翻译-百度AI开放平台 (bai

    2024年02月09日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包