mindarjs使用

流泪猫猫头-

于 2025-03-28 10:30:41 发布

阅读量145

点赞数 2

文章标签： mindar

本文链接：https://blog.csdn.net/weixin_66892551/article/details/146419168

版权

引入,index.html中

  <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>

添加引擎

//添加引擎
  document.addEventListener("DOMContentLoaded", function () {
    const sceneEl = document.querySelector("a-scene");
    let arSystem;
    sceneEl.addEventListener("loaded", function () {
      // alert('执行')
      arSystem = sceneEl.systems["mindar-image-system"];
    });
    const startButton = document.querySelector("#example-start-button");
    startButton.addEventListener("click", () => {
      console.log("start");
      arSystem.start(); // start AR
      arSystem.pause(true);
    });
    sceneEl.addEventListener("arReady", (event) => {
      // alert('AR引擎已启动')
    });
    sceneEl.addEventListener("arError", (event) => {
      alert("相机未启动成功！");
    });
  });

添加识别图像的资源和识别之后显示的内容

<!-- 识别目标放在mindar-image中,如有多个目标需要按顺序解析,识别目标对应根据mindar-image-target的targetIndex来确定 -->
    <a-scene mindar-image="识别资源地址" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <!-- 识别后显示内容使用到的资源 -->
      <a-assets>
        <!-- 资源的src可以使用请求获取之后再赋值,如果是网络路径,需要服务器端进行跨域处理 -->

        <img id="paintandquest-img" src="资源地址" crossorigin="anonymous" />
        <video id="paintandquest-video" src="资源地址" loop="false" playsinline></video>
      </a-assets>


      <!-- 相机 -->
      <a-camera position="0 0 0" look-controls="enabled:  false" cursor="fuse: false; rayOrigin: mouse;"
        raycaster="far: 10000; objects: .clickable"></a-camera>
      <!-- 识别后显示的内容 -->
      <!-- 这里的targetIndex就是对应识别目标列表的index -->
      <a-entity mindar-image-target="targetIndex: 0" mytarget id="target">
        <a-entity id="portfolio-panel" position="0 0 -0.01">

          <a-text value="Hello, World!" position="-0.5 0.5 0"></a-text>
          <!-- 显示内容的src直接以id对应到资源的src -->
          <a-image src="#paintandquest-img" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-image>
          <a-video src="#paintandquest-video" playsinline width="1" height="0.552" position="0 -0.6 0"
            rotation="0 0 0 "></a-video>

        </a-entity>
      </a-entity>
    </a-scene>

识别目标的事件

const portfolio = document.querySelector("#portfolio-panel");
    portfolio.setAttribute("position", "0 " + y + " -0.01");
    //图像识别事件
    const target = document.querySelector("#target");
    target.addEventListener("targetFound", (event) => {
      document.querySelector("#paintandquest-video").play();
    });
    target.addEventListener("targetLost", (event) => {
      document.querySelector("#paintandquest-video").pause();

    });

自定义显示图层(不跟踪识别目标)

<a-entity mindar-image-target="targetIndex: 0" mytarget id="target">
        <!-- 这里可以为空,在scene外部自定义要展示的内容,可以不受图像追踪的限制 -->
      </a-entity>
    </a-scene>
    <!-- 自定义识别后的显示内容 -->
    <div v-show="showFinder"
      style="width: 100%;position: absolute;top: 0;bottom: 0;display: flex;flex-direction: column;justify-content: center;">
      <video width="100%" id="paintandquest-video" src="" playsinline></video>

    </div>