微信小程序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零基础入门教程 的相关文章

  • 求和面积表 (SAT) 的 3D 变体

    根据维基百科 A 面积求和表 http en wikipedia org wiki Summed area table是一种数据结构和算法 用于快速有效地生成网格矩形子集中的值之和 对于二维空间 可以通过迭代生成求和面积表x y超过所需的范
  • 生成球体的顶点

    在 DirectX 移动照明示例中 圆柱体是按以下方式生成的 for DWORD i 0 i lt 50 i FLOAT theta 2 D3DMX PI i 50 1 pVertices 2 i 0 position D3DMXVECTO
  • 在运行时更改 AR core 中对象的纹理

    我正在创建一个应用程序 我需要在其中更改 3d 对象的纹理 图案 我正在使用 AR Core SDK 和 android 我已经使用了下面的代码 但它不起作用 Texture builder setSource this R drawabl
  • 如何让Three.js全屏显示?

    我想用 Three js 制作游戏 但如何使其全屏显示 我看见本文 http learningthreejs com blog 2011 11 17 lets make a 3d game make it fullscreen 并且我在代码
  • 从绘图 3d 图中抓取相机位置

    我正在绘制 3D 图形并想要调整相机位置 对我来说最好的方法是使用查看器 根据需要缩放和旋转场景 然后以 JSON 形式获取相机位置并将其放入我的脚本中 该脚本生成图片以默认实现相同的位置 根据这条推文 https twitter com
  • 计算 3D(或 n 维)质心的最佳方法是什么?

    作为工作项目的一部分 我必须计算 3D 空间中一组点的质心 现在我正在以一种看似简单但天真的方式来做这件事 通过取每组点的平均值 如下所示 centroid average x average y average z where x y a
  • 3d 表面的凸包算法 z = f(x, y)

    我有一个以一组三元组 x i y i z i 形式给出的 3D 表面 其中 x i 和 y i 大致位于网格上 并且每个 x i y i 都有一个关联的 z i 值 典型的网格是20x20 我需要在给定的公差范围内找到哪些点属于曲面的凸包
  • DirectX Release 构建可以通过 VS2010 运行,但不能运行 exe

    我已经通过 Google 访问 Stack Overflow 几年了 但到目前为止还没有询问 回答任何问题 所以就到这里吧 基本上 我有一个在 DirectX 11 中设置绘图模型和地形的 3D 渲染框架 一切正常 通过 Visual St
  • 在 Unity 3D 中使用触摸输入在地形上移动相机

    我是 Unity 新手 我正在尝试弄清楚如何使用触摸输入在地图 地形上移动相机 摄像机将以 90 0 0 的旋转角度俯视地形 地形位于第 8 层 我用键盘移动它没有问题 现在我尝试移动到触摸 如果你想在 iOS 上保持预期的使用情况 那就非
  • 基于 Q3DScatter 的自定义图表,QCustom3DItem 运行缓慢

    我想制作一个带条形的 3D 图表 条形颜色取决于其大小 两个都Qt 条形图和散点图类型 https doc qt io qt 5 qtdatavisualization overview html接近我正在寻找的东西 我最终创建了一个基于的
  • 编写每个三角形/面具有纯色的 GLSL 片段着色器的方法

    我有顶点和三角形数据 其中包含每个数据的颜色triangle 面 不是每个顶点 即单个顶点由多个面共享 每个面可能具有不同的颜色 我应该如何在 GLSL 中解决这个问题以获得每个的纯色分配face正在渲染 通过平均顶点相邻多边形的颜色来计算
  • 对一系列点重新采样

    我有一个 3d 点数组 想象一下球的轨迹 有 X 个样本 现在 我想对这些点重新采样 以便我有一个新数组 其中包含 y 个样本的位置 y 可以大于或小于 x 但不能小于 1 始终至少有 1 个样本 将原始数组重新采样为新数组的算法会是什么样
  • 提取给定 2D 图像点、深度图和相机校准矩阵的 3D 坐标

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

    我正在用java编写一个光线追踪器 并且我能够追踪球体 但我相信我追踪三角形的方式有问题 据我了解 这是基本算法 首先确定射线是否与plane三角形已打开 剪裁所有点 使它们与三角形位于同一平面上 因此xy以平面为例 根据沿着新平面向任意方
  • 使用 ThreeJS 获取球体纹理上的点击位置

    目前 我有一个带有纹理的球体 它绕 y 轴旋转 我还有在 3D 空间中单击的位置 以及球体上的旋转位置 我认为 目标 获取纹理上的位置 例如 我想获取我点击的图像的哪个方块 参见示例球体和下图 在实践中 我不会使用此图像 但我觉得这将是一个
  • OpenGL z轴指向哪里?

    我正在尝试了解 OpenGL 坐标系 我到处都看到它被描述为右撇子 但这与我的经验不符 我尝试绘制一些形状和 3 d 对象 我发现 z 轴显然指向 屏幕 而 x 指向右侧 y 指向上方 这是左手坐标系的描述 我缺少什么 编辑 例如 http
  • C++ Irrlicht 程序未链接:“未定义对‘__imp_createDevice’的引用”

    我的 Irrlicht 程序无法链接 我使用的编译器是g Code include
  • 将大块位图转换为 3 维位图

    Problem 我需要这个大量的数据作为输入 对于基于C的arduino 这是上面示例中所需格式的大量数据 const byte bitmap 8 8 0xFF 0x81 0x81 0x81 0x81 0x81 0x81 0xFF 0x81
  • 如何创建热图来说明控制发散调色板中心颜色位置的网格差异?

    我有两个人脸 3D 网格 我希望使用热图来说明差异 我想使用红蓝发散色阶 我的数据可以查到here https github com Patricklv How to create heatmap illustraing 3D mesh d
  • IE9-11 检测变换样式:preserve-3d

    我为一个项目制作了一个 3d 类型的菜单 自然 IE 会引起问题 因为 IE10 即使 3d 变换工作 也不支持变换样式 preserve 3d 我尝试了解决方法 通过对 3d 菜单容器的每个子元素应用变换 但至少可以说 动画看起来很糟糕

随机推荐

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

    欢迎大家前往腾讯云 社区 获取更多腾讯海量技术实践干货哦 本文由罗晖发表于云 社区专栏 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技