二十行代码实现的WebAR，让她能看见你的“心”

最新推荐文章于 2023-05-16 08:38:26 发布

Nora Taki

最新推荐文章于 2023-05-16 08:38:26 发布

阅读量543

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/u011974819/article/details/115730734

版权

前端开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

女票生日的时候，让她扫一扫你胸前的印记，跳出一个“心”给她一份感动，既省钱逼格又高🤭
内容不多，照做就好，走起ε=ε=ε=(_￣▽￣)
重点感谢，小帅哥禄禄，协助完成视频的录制★,°:.☆(￣▽￣)/$:.°★ 。

源码下载：my_heart.zip

效果演示

在这里插入图片描述
图片大小限制，忍痛对视频进行裁剪/(ㄒoㄒ)/~~

整体过程

利用 AR.js Marker Training 生成标记文件
通过 3ds Max 导出 gltf 模型文件
基于 AR.js 的 AFRAME 模式，编写二十行代码完成效果展示

生成标记文件

选择一张图片作为识别的标记
打开 AR.js Marker Training 页面，将图片上传，调整图片的比例，设定最终图片的大小，然后分别下载Marker和Image，其中Marker文件的后缀名为.patt
在这里插入图片描述

生成gltf模型文件

此处用的软件是3ds max，我是这个软件的小白，不过简单的平移旋转神马的还是难不倒的
在场景中构造一颗心，如果想要其他模型，可以自行到https://free3d.com/网站中去找
在这里插入图片描述
为了后续代码的简单，需要将模型导出为gltf模型，而利用3ds max软件导出，babylon.js提供了一个插件。打开链接https://github.com/BabylonJS/Exporters/releases，选择相同的版本的压缩包进行下载

下载后解压，将其中全部的dll文件，复制到3ds max软件的\bin\assemblies文件夹下
在这里插入图片描述
重启软件，即可在菜单栏中看到babylon的标签，点击babylon file exporter…

设定output format为gltf，并且设定输出model path。点击Export进行导出

导出后是.gltf和.bin两个文件

撸二十行代码

※ 记得访问时要使用https协议，否则无法启动设备相机

<!DOCTYPE html>
<html>
<script src="lib/aframe.min.js"></script>
<script src="lib/aframe-ar.js"></script>

<body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs>
        <a-marker type="pattern" url="data/pattern-label.patt">
            <a-entity animation="property: rotation; to: 0 180 360; loop: true; dur: 700" position="0 0 0"
                rotation="0 180 0" scale="1 1 1" gltf-model="data/my_heart.gltf">
            </a-entity>
        </a-marker>
        <a-entity camera></a-entity>
    </a-scene>
</body>

</html>

其中Aframe的文档可参考https://aframe.io/docs/1.2.0/introduction/
AR.js的文档可参考https://ar-js-org.github.io/AR.js-Docs/marker-based/

然后呢，
发布页面，将链接地址发送给女票，打印标签贴在胸前，然后让女票扫一扫，完美！
※ 需要设定.patt和.gltf的MIME值为application/octet-stream

源码下载

my_heart.zip

参考文献
DS MAX Plugin | Babylon.js Documentation

码字不易，如果喜欢，不用三连，点个赞👍便是最大的鼓励
欢迎关注微信公众号 "书咖里的曼基康"

Nora Taki

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
二十行代码实现的WebAR，让她能看见你的“心”

构建一个蜡烛组成的爱心AR，在女票生日的时候给她一份感动，既省钱又显得高大上????内容不多，照做就好，走起ε=ε=ε=(￣▽￣)文章目录效果演示整体过程生成标记文件生成gltf模型文件撸二十行代码效果演示整体过程利用 AR.js Marker Training 生成标记文件通过 3ds Max 导出 gltf 模型文件基于 AR.js 的 AFRAME 模式，编写二十行代码完成效果展示生成标记文件生成gltf模型文件撸二十行代码※ 记得一定要使用https协议参考文献DS
复制链接

扫一扫