CrowlKit - Augmented Reality

AR-toepassing maken met MindAR en A-Frame

Libraries toevoegen

Om een Augmented Reality-toepassing te maken met A-Frame en MindAR, moet je de volgende libraries toevoegen aan je project:

  • A-Frame:De basisbibliotheek voor het bouwen van 3D-scenes in de browser.
  • A-Frame Extras:Extra componenten voor A-Frame met aanvullende functies.
  • MindAR:De afbeeldingsherkenningsbibliotheek die AR-objecten aan afbeeldingen koppelt.

Link de libraries in de van je HTML-document:

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

Eigen mind-bestand maken

Om je eigen afbeelding als herkenningsdoel in te stellen, moet je een eigen .mind-bestand aanmaken. Dit bestand bevat een AI-model dat de afbeelding herkent en de AR-content activeert wanneer de afbeelding wordt gedetecteerd.

MindAR Trainer Tool

Gebruik de MindAR Trainer Toolom je eigen afbeeldingen te uploaden en een .mind-bestand te maken. Deze tool traint een model dat specifieke kenmerken van jouw afbeeldingen opslaat.

  • Ga naar de MindAR-websiteen open de Trainer Tool.
  • Upload de afbeeldingen die je wilt gebruiken voor herkenning in je AR-toepassing.
  • Exporteer het model als een .mind-bestand.

mind-bestand uploaden naar je server

Om je mind-bestand beschikbaar te maken voor je AR-toepassing, upload je het bestand naar een map op je server. Zorg ervoor dat de URL naar dit bestand correct is, zodat de toepassing de afbeelding kan herkennen.

HTML-codevoorbeeld met A-Frame en MindAR

Hieronder staat een voorbeeld van hoe je een .mind-bestand gebruikt met A-Frame en MindAR:

<a-scene mindar-image="imageTargetSrc: '/path/to/your/bestand.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="model" src="/path/to/your/model.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 src="#model" position="0 -0.25 0" scale="0.05 0.05 0.05" animation-mixer=""></a-gltf-model>
    </a-entity>
</a-scene>
Vervang /path/to/your/bestand.minddoor het pad naar je eigen .mind-bestand, en vervang /path/to/your/model.gltfdoor het pad naar je eigen 3D-model.
Volgende pagina