微信小程序SLAM AR零基础入门教程

2023-11-07

《鬼灭之刃花街篇》开播在即,今天带大家零基础使用Kivicube制作一个炭治郎的SLAM AR云手办,可以通过微信小程序将AR版的炭治郎放置在家中,提前感受鬼灭的氛围。先上个GIF大家看看动态的展示效果

在这里先科普一下本次教程使用到的AR技术——空间定位与追踪(SLAM),相比其他的AR技术有什么亮点。

空间定位与追踪(SLAM)能够对用户的真实环境进行感知,从而把AR模型动画素材放置并固定在真实的环境中,最后达到虚实紧密结合的效果。

 大家比较熟知的宜家家具摆放就是属于SLAM技术的成熟商业应用。用户可以打开手机识别真实的地面将宜家的家具摆放在真实家庭环境中,辅助消费者判断家具是否符合家里的装修风格。

(一)制作工具介绍

首先在在制作软件上我用到的是免费的XR在线制作平台Kivicube。


整个平台的操作都是可视化的,其他功能模块如AR图像追踪与AR陀螺仪场景的操作基本都是把各种模型动画、音频等等拖到中间这个网格中,拖拽调整相对位置,再简单设置一些触发事件就能完成制作。

除了容易上手之外,Kivicube制作的场景能够在浏览器跟微信小程序里直接体验,免去了自己build一个APP的巨大难题,通过微信小程序直接体验也提升了互动的传播度。
 

想学习怎么使用这个平台的同学也可以关注一下Kivicube的官方B站账号「弥知科技」里面有很多其他功能模块的教程。

本次教程里用到的是Kivicube平台新上线的「空间定位与追踪」功能,操作相比其他的功能模块会更加简单。

(二)制作教程

1、模型处理

首先我们需要自己建一个炭治郎的模型。和我一样不会建模的同学们这里我推荐sketchfab平台,里面非常大量的免费模型可供下载,质量也非常高。

 挑选好合适的模型之后需要自己通过kivicube的在线模型编辑器调整一下光照与材质,目的主要是让模型在AR环境中也能达到理想的效果。同样属于小白友好的可视化操作,大家通过调整右侧的选项与参数就能实时在左侧预览调整效果。

 调整好了就一键导出一个GLB模型,咱们素材准备就完成了。调整好的模型我也放了一份到网盘,想跳过模型调整步骤的同学可以直接下载。

链接: https://pan.baidu.com/s/1Zw_ZDOx4Orul4WZ_zXgIdQ  密码: q5lq

2、模型上传

首先需要先注册登陆一下KIVICUBE账号,网址:www.kivicube.com

右侧点击了解详情有官方SLAM教程传送门,有需要也能看官方的教程

 登录成功后,点击界面上方「+AR场景」功能,选择场景类型为「空间定位与跟踪」

 选择并上传刚刚通过AR模型编辑器调整过的炭治郎模型

 接着开始设置场景缩略图与场景名称等基本信息,点击「生成体验链接」

 3、场景发布

然后我们就进入了最后一个步骤,发布SLAM场景。这里需要提一下,目前Kivicube针对不同的用户群体做了三种不同的场景发布方式。

 扫码直达:用户直接按照二维码下的指引,扫描下方微信小程序码即可体验刚刚我制作的炭治郎场景,将AR炭治郎放置在真实的环境中。

小程序插件:针对一些有将场景植入自己微信小程序需要的伙伴,能够通过简单的操作将刚刚制作好的炭治郎场景接入自己的小程序

插件与自定义开发:主要针对于想要实现二次开发的伙伴,譬如我们希望点击炭治郎的模型后出现一些弹窗或者想要自己做一套好看的UI放在场景中等等,这项功能适用于有更好编程基础的同学

以上就是本次教程的全部内容啦,希望伙伴们能通过这篇教程发散出更多精彩的AR场景! 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序SLAM AR零基础入门教程 的相关文章

  • 3d 表面的凸包算法 z = f(x, y)

    我有一个以一组三元组 x i y i z i 形式给出的 3D 表面 其中 x i 和 y i 大致位于网格上 并且每个 x i y i 都有一个关联的 z i 值 典型的网格是20x20 我需要在给定的公差范围内找到哪些点属于曲面的凸包
  • Blender 与 Unity [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 提取给定 2D 图像点、深度图和相机校准矩阵的 3D 坐标

    我有一套2D image输出的关键点OpenCV FAST角点检测功能 使用Asus Xtion I还有一个时间同步的深度图 其中所有相机校准参数都是已知的 使用这些信息我想提取一组3D坐标 点云 在OpenCV 任何人都可以给我任何有关如
  • Direct3D 中的矩阵多阶

    关于在 Direct3D 中乘法矩阵以获得结果 我收到了两个相互矛盾的答案 教程确实规定从左到右相乘 这很好 但这不是我想象的方式 这是一个例子 OpenGL 从上到下阅读 GLRotatef 90 0f GLTranslatef 20 0
  • 3D 空间:使用鼠标指针沿着对象指向的方向

    给定相机面向的方向的 3D 向量以及 3D 空间中 3D 对象的方位 方向向量 如何计算鼠标指针在屏幕上必须遵循的 2 维斜率 以便在视觉上沿着所述物体的方向移动 基本上 我希望能够单击箭头并通过拖动它来使其前后移动 但前提是鼠标指针沿着箭
  • 如何将 3D 图像输出到 3D 电视?

    我有一台 3D 电视 如果我不至少尝试让它显示我自己创作的漂亮 3D 图像 我就会逃避我的责任 作为一个极客 我之前已经完成了非常基本的 OpenGL 编程 因此我了解所涉及的概念 假设我可以为自己渲染一个简单的四面体或立方体并使其旋转一点
  • OpenGL z轴指向哪里?

    我正在尝试了解 OpenGL 坐标系 我到处都看到它被描述为右撇子 但这与我的经验不符 我尝试绘制一些形状和 3 d 对象 我发现 z 轴显然指向 屏幕 而 x 指向右侧 y 指向上方 这是左手坐标系的描述 我缺少什么 编辑 例如 http
  • 投影 3D 网格的 2D 轮廓算法

    给定 一个 3D 网格 由一组顶点和三角形定义 并用这些点构建网格 问题 找到任意平面上投影的任意旋转网格的二维轮廓 投影很容易 挑战在于找到平面中投影三角形边的 外壳 我需要一些有关研究该算法的输入 指针的帮助 为简单起见 我们可以假设
  • 简单的线框格式?

    我正在寻找一种用于线框模型的简单文件格式 我知道 VRML u3D 等 但这些对于我的需求来说似乎很重要 我的标准是 必须有明确的规格 要么是开放的 要么是非常完善 记录的 我只需要 想要 简单的模型 顶点和边 我不想处理面孔或物体 如果格
  • 在球体边缘绘制点

    因此 来自 Flash 背景的我对一些简单的 2D 三角函数有很好的理解 在带有 I 圆的二维中 我知道使用给定角度和半径将项目放置在边缘上的数学 x cos a r y sin a r 现在 如果我在 3d 空间中有一个点 我知道球体的半
  • 使用文件 API 将资源加载到 Three.js 中

    我想创建导入 3D 模型以在浏览器中查看的功能 方法是使用File API http www html5rocks com en tutorials file dndfiles Three js 加载器在我托管的文件上运行良好 我的理解是加
  • 如何从横滚、俯仰和偏航获取相机向上矢量?

    我需要从滚动角 俯仰角和偏航角 以度为单位 获取相机的向上矢量 以获得正确的外观 我已经尝试了几个小时不同的事情 但没有运气 这里的任何帮助将不胜感激 横滚 俯仰和偏航定义 3 轴旋转 从这些角度 您可以构建一个 3x3 变换矩阵来表达该旋
  • 如何向 3D 表面添加文本

    我使用plot surface 创建了具有平行四边形底座的矩形棱柱 我需要向其中一个表面添加一些文本 我试过ax text 3 0 5 1 red 1 1 0 color red 但文本在表面上不可见 import matplotlib p
  • 无法使用 vcglib 简化 3D 模型,断言“0”失败

    I used vcglib https github com cnr isti vclab vcglib简化 3D 模型文件 我使用了 master a8e87662 git 存储库 我运行示例 trimesh clustering htt
  • 如何使用 matplotlib 将 3d 数据单位转换为显示单位?

    这可能有点疯狂 但我正在尝试使用 matplotlib v1 1 0 创建 3d 散点图的可点击图像图 我已经阅读了如何对二维图进行操作 参见这个博客 http hackmap blogspot com 2008 06 pylab matp
  • 在 Unity 中平滑动态生成的网格?

    给定 Unity 和 C 中的网格 其本身是通过合并更简单的基础网格实时创建的 我们如何在运行时 将其变成平滑的 几乎像包裹在布中的网格版本一样 不是完全凸出的版本 而是更圆润 软化锋利的边缘 桥接深间隙等 理想情况下 表面也将像 平滑角度
  • Java 的 3D 场景图库?

    我正在寻找一个可靠的 Java 3D 场景图 API 它具有良好的文档 活跃的社区和允许商业使用的许可证 我排除了com sun scenegraph https scenegraph dev java net 因为它是 GPL 而且看起来
  • 加速球之间的碰撞检测

    我正在编写一个物理引擎 模拟器 其中包含 3D 太空飞行 行星 恒星引力 船舶推力和相对论效应 到目前为止 一切进展顺利 但是 我需要帮助的一件事是碰撞检测算法的数学 我使用的运动迭代模拟基本上如下 注意 3D 矢量全部大写 For eac
  • 有人知道如何在android中实现像Unfold(这是iphone中的应用程序)这样的效果吗?

    我怎样才能实现这个效果呢 任何建议都会对我有帮助 None
  • 如何在 R 中导入并绘制三角形网格?

    我想在 R 中绘制我的模型输出 它是格式为的三角形网格 x1 y1 z1 x2 y2 z2 x3 y3 z3 value 每行代表一个三角形 我想用以下方法绘制这些三角形value作为规模 mymesh lt structure c 0 9

随机推荐

  • 什么?强化学习竟然来源于心理学?

    欢迎大家前往腾讯云 社区 获取更多腾讯海量技术实践干货哦 本文由罗晖发表于云 社区专栏 1 Google的DQN论文 2015年2月 Google在Nature上发表了一篇论文 见附件 Human level control through
  • GO语言网络编程(并发编程)Sync

    GO语言网络编程 并发编程 Sync 1 Sync 1 1 1 sync WaitGroup 在代码中生硬的使用time Sleep肯定是不合适的 Go语言中可以使用sync WaitGroup来实现并发任务的同步 sync WaitGro
  • MySQL 数据库中的视图

    大家好 作为一名互联网行业的小白 写博客只是为了巩固自己学习的知识 但由于水平有限 博客中难免会有一些错误出现 有不妥之处恳请各位大佬指点一二 博客主页 链接 https blog csdn net weixin 52720197 spm
  • SQLServer修改表数据

    使用SSMS数据库管理工具修改数据 修改任意一条或者多条都可以 1 打开数据库 选择数据表 右键点击 编辑所有行 如未配置 点击编辑前200行 2 编辑需要修改的数据 编辑完成后 右键点击空白处 选择执行SQL即可编辑成功 使用T SQL脚
  • 【qt】在qt里调用shell脚本-实现上位机调用Detectron的推断

    qt调用shell脚本有三种方法 目的 用qt做一个界面 本质是调用写好的shell脚本 调用detectron的infer simple py文件进行样本推断并显示在界面里 遇到的问题 但是本人只有system 可以行得通 而且调用的脚本
  • 故障排除经验——笔记本电脑重启后键盘失灵的解决办法(亲测可用)

    问题描述 下午 卸载了360软件 安全卫士 软件管家 360安全浏览器 后 重启电脑 然后电脑开始硬盘扫描 检测 结果告知不能成功修复 随后 我选择 继续使用Win10 选项 就发现电脑键盘已经失灵 无法输入开机密码 一度让我抓狂 在随后的
  • 堆栈相关应用算法

    栈的压入 弹出序列 题目描述 输入两个整数序列 第一个序列表示栈的压入顺序 请判断第二个序列是否可能为该栈的弹出顺序 假设压入栈的所有数字均不相等 例如序列1 2 3 4 5是某栈的压入顺序 序列4 5 3 2 1是该压栈序列对应的一个弹出
  • 什么能力很重要: 维持自己的框架的能力

    作者 纸箱之神 链接 https www zhihu com question 305507128 answer 637314109 有人答努力 坚持 选择 自律 学习 这些都很重要 但是我觉得 还有一个能力是凌驾于所有这些答案之上的 那就
  • 使用idea创建项目的步骤

    使用idea创建项目的步骤 1 点击桌面安装好的idea 2 由于我之前创建好了 所以打开的时候直接就进去 接下来 创建idea 3 File new project 4 点击project 创建项目 5 进行下一步 6 继续下一步 7 会
  • 渲染性能优化之几种LOD层次细节总结

    CIM 城市信息模型 这种大场景或者说特大场景LOD是非常重要的 城市 BIM 地形都非常系需要 根据公司的项目需求这里做了一下总结各种LOD的技术 算法 策略 首先 我们公司对于城市这种大场景我们提出使用如下技术 1 组织 符合3Dtil
  • Kr的pandas技巧笔记

    最近在做一个数据集的可视化项目 又捡起了pandas和python 这里把实际用到的技巧干货写下来 防止忘记再次去网上各种查和看documentation 同时也分享给大家 1 找出nan项 DataFrame isnull 返回一个大小和
  • Windows中的时间(SYSTEMTIME和FILETIME)

    上一篇中介绍了C运行库中的时间处理函数 这一篇介绍Windows SDk中提供的时间函数 两种时间系统之间没有本质区别 事实上CRT时间是用Windows时间实现的 当然这是说的VC实现 同样提供本地时间和UTC时间之间的转换 不过CRT中
  • C++socket编程(二):系统socket库介绍

    什么是套接字 套接字是一个介质 由操作系统控制 下面演示下windows和linux中的socket接口建立的代码 通用 ifdef WIN32 include
  • 出现rpm: command not found

    解决方法 sudo apt get install alien 转载于 https www cnblogs com xDan p 5411083 html
  • fiddler抓取,Android真机测试

    1 配置Fiddler抓取并解密HTTPS包 Fiddler默认是不抓取HTTPS包的 需要进行相应的配置 打开Fiddler 选择 Tools gt Fiddler Options 2 在弹出的对话框中选择 HTTPS 选项卡 3 勾选
  • 【Jupyter】下,Tensorflow 1.8 载入 MNIST 数据集

    导入包 import tensorflow as tf from tensorflow examples tutorials mnist import input data mnist input data read data sets M
  • 前端基础3——JavaScript基础用法

    文章目录 一 基本使用 1 1 内部方式 1 2 外部导入方式 1 3 css标签调用js脚本 触发事件 二 Windows对象 2 1 对象属性 2 2 对象方法 三 数据类型 3 1 字符串处理 3 2 数组处理 3 3 对象处理 四
  • 逆水寒7.25服务器维护,逆水寒7月4日更新维护公告 角色交易功能上线

    原标题 逆水寒7月4日更新维护公告 角色交易功能上线 逆水寒7月4日更新了什么内容 7月4日正式服中加入了角色交易的新功能 另外天江之战活动也正式开启 以下来看下完整的更新公告 各位自在同门 为了保证服务器的运行稳定和服务质量 逆水寒 将于
  • 【Unity每日灵感】第二期:复刻FreeFlyCamera插件内置脚本,如何实现丝滑好用的相机漫游?

    目录 一 插件效果 相机部分 提示部分 二 步骤拆解 视角旋转 移动与升降 加速 锁定及重置 三 脚本复刻 旋转 位置变换 增加体验感的细节 栏目Up Up 专门针对我自己平日里一些在项目中使用的好玩的点子 或者尚未实现的有趣功能复刻 第二
  • 微信小程序SLAM AR零基础入门教程

    鬼灭之刃花街篇 开播在即 今天带大家零基础使用Kivicube制作一个炭治郎的SLAM AR云手办 可以通过微信小程序将AR版的炭治郎放置在家中 提前感受鬼灭的氛围 先上个GIF大家看看动态的展示效果 在这里先科普一下本次教程使用到的AR技