MindAR初体验——一款js实现的AR库

最新推荐文章于 2024-03-24 09:32:39 发布

肖无疾

最新推荐文章于 2024-03-24 09:32:39 发布

阅读量3.4k

点赞数 4

分类专栏：人工智能文章标签： AR JS 前端 MindAR

本文链接：https://blog.csdn.net/xcx573/article/details/124125358

版权

人工智能专栏收录该内容

2 篇文章 0 订阅

订阅专栏

MindAR是一款js实现的AR库，支持图片跟踪和人脸跟踪，经测试微信内可以正常运行。

github：https://github.com/hiukim/mind-ar-js

访问不了可以在这里下载：https://download.csdn.net/download/xcx573/85115823

官方示例教程：MindAR | mind-ar-js

效果图：

待识别图片的处理：

打开Image Targets Compiler | mind-ar-js 选择需要处理的图片；点击start；完成后download得到一个targets.mind文件。

一个简单的示例代码：


<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MindAR</title>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-image-aframe.prod.js"></script>
  </head>
  <body>
      <!--targets.mind为上步中下载的文件-->
    <a-scene mindar-image="imageTargetSrc: targets.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-assets>
        <a-asset-item id="bearModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/image-tracking/assets/band-example/bear/scene.gltf"></a-asset-item>
      </a-assets>

      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

      <a-entity mindar-image-target="targetIndex: 0">
        <a-gltf-model rotation="0 0 0 " position="0 -0.25 0" scale="0.05 0.05 0.05" src="#bearModel" animation-mixer>
      </a-entity>
    </a-scene>
  </body>
</html>