bsar

by Halit Yurttas

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mindar-image-aframe.prod.js"></script>
<script src="https://ardemo.rhpozitif.net/dist/aframe-chromakey-material.min.js"></script>
<nav class="navbar sticky-top navbar-light">
	  <a class="navbar-brand" href="#">
		<img src="https://simcda.com/wp-content/uploads/2018/12/SimLogo-01-2.png" width="60" height="30" alt="">
	  </a>
	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	  </button>
	  <div class="collapse navbar-collapse" id="navbarText">
		<ul class="navbar-nav mr-auto">
		  <li class="nav-item active">
			<a class="nav-link" href="#">Home</a>
		  </li>
		  <li class="nav-item">
			<a class="nav-link" href="#">Features</a>
		  </li>
		  <li class="nav-item">
			<a class="nav-link" href="#">Pricing</a>
		  </li>
		</ul>
	  </div>
	</nav>
	<div id="example-scanning-overlay" class="col-6 mx-auto fixed-bottom" style="margin-bottom: 15vh; opacity:0.5">
        <img class="img-fluid w-100" src="https://ardemo.rhpozitif.net/redbull/avene-01.jpg" />
    </div>
	<a-scene mindar-image=" uiScanning: #example-scanning-overlay; imageTargetSrc: avane-targets.mind;  warmupTolerance: 0.001; missTolerance: 0.001; filterMinCF:0.001; filterBeta: 1" cursor="fuse: true" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
	  <a-assets>
		<a-asset-item id="avatarModel"...

JavaScript

AFRAME.registerComponent('move', {
  init: function () {
    // wait until the model is loaded
    this.el.addEventListener("model-loaded", evt => {
      const mixer = new THREE.AnimationMixer(this.el.components['gltf-model'].model);
      const clips = this.el.components['gltf-model'].model.animations[0];
      mixer.clipAction(clips).play();
      // "expose" the animation mixer
      this.mixer = mixer;
    })
  },
  // on each render loop (actually before each render loop)
  tick: function (t, dt) {
    if (!this.mixer) return; // if the mixer exists
    this.mixer.update(dt / 1000) // update it with the delta time
  }
})