Hiro en Kanji markers

Augmented reality met Hiro en kanji marker tracking. (AR) terug naar de inleiding AR in fullscreen

aframe-ar.js is de lib om samen met aframe AR animaties te maken. Zie de blog over augmented reality van Jerome Etienne

In onderstaande schets worden de preset markers Hiro en kanji gebruikt dit zijn markers die door aframe-ar.js wordt herkend

De auto ( regel 14) is, een gltf (Graphics Language Transmission Format) model bestand, gemaakt met Blender

Het bestand is geladen mbv de component: gltf-model

In mijn Three.js animatie heeft de auto rode achterlichten en witte voorlampen die hier niet te zien zijn, dit door verschillen in de lightening

De kanji marker met een box, cone en torus, de torus beweegt zich sinusvormig in y richting op en neer (regel 29)

Onder deze schets staat de schets gecodeerd volgens het ECS = Entity-Component system

 
<!DOCTYPE html> 
<html> 
<script src="../lib/aframe-v1.2.0.min.js"></script> 
<script src="../lib/aframe-ar.js"></script>
    <body> 
      <a-scene embedded arjs="sourceType: webcam;"
                  vr-mode-ui="enabled: false;">
      <a-assets> 
         <a-asset-item id="auto" src="../assets/auto4.gltf"></a-asset-item> 
      </a-assets>
 
      <a-marker preset="hiro"> 
          <a-gltf-model position="0 0 0" scale="0.5 0.5 0.5" src="#auto"></a-gltf-model> 
      </a-marker>
 
<a-marker preset="kanji">
        <a-box position="0 0.5 0"
                material="color: red; transparent: true; opacity: 0.50;">
        </a-box>
 
        <a-cone position="0 1.5 0" radius-bottom= "0.5" radius-top="0"
                 material="color: green; transparent: true; opacity: 0.50;">
        </a-cone>
 
        <a-torus position="0 1.5 0" rotation="90 0 0" radius="0.4" radius-tubular="0.05"
                 material="color: blue; transparent: true; opacity: 0.50;"
                 animation="property: position; to: 0 3 0; dur: 5000; easing: easeInOutSine; dir: alternate; loop: true">
        </a-torus>
    </a-marker>
 
       <a-entity camera></a-entity> 
       </a-scene> 
    </body> 
</html>

Onderstaande schets is gecodeerd volgens het ECS = Entity-Component-System

 
<!DOCTYPE html> 
<html> 
<script src="../lib/aframe-v1.2.0.min.js"></script> 
<script src="../lib/aframe-ar.js"></script>
    <body> 
      <a-scene embedded arjs="sourceType: webcam;"
                  vr-mode-ui="enabled: false;">
      <a-assets> 
         <a-asset-item id="auto" src="../assets/auto4.gltf"></a-asset-item> 
      </a-assets>
 
<a-marker preset="hiro"> 
 <a-entity 
       gltf-model="#auto" 
       position="0 0 0" 
       scale="0.5 0.5 0.5"> 
 </a-entity> 
</a-marker> 

 
<a-marker preset="kanji"> 
 <a-entity 
      geometry="primitive: box" 
      position="0 0.5 0" 
      material="color: red; transparent: true; opacity: 0.50"> 
 </a-entity> 

 
 <a-entity 
        geometry="primitive: cone; radiusBottom: 0.5; radiusTop: 0" 
        position="0 1.5 0" 
        material="color: green; transparent: true; opacity: 0.50"> 
 </a-entity> 

 <a-entity 
       geometry="primitive: torus; radius: 0.4; radiusTubular: 0.05" 
        position="0 1.5 0" 
        rotation="90 0 0" 
        material="color: blue; transparent: true; opacity: 0.50" 
        animation="property: position; to: 0 3 0; dur: 5000; easing: easeInOutSine; dir: alternate; loop: true"> 
   </-entity> 
 </a-marker>     
 <a-entity camera></a-entity> 
    </a-scene> 
  </body> 
</html>

Flevopink