AR-project/AR/AR-image.html at 891c75abd06c393391961d7c7bc8017905ce71be

Fork: 0

Fumiya238 / AR-project

Find file

Newer

Older

AR-project / AR / AR-image.html

Satou Fumiya on 15 Aug 2021 1 KB 平面検知

Raw Blame History

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<style>
  .arjs-loader {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .arjs-loader div {
    text-align: center;
    font-size: 1.25em;
    color: white;
  }
</style>
</head>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
  <div>Loading, please wait...</div>
</div>
<a-scene
  vr-mode-ui="enabled: false;"
  renderer="logarithmicDepthBuffer: true;"
  embedded
  arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
  <!-- we use cors proxy to avoid cross-origin problems -->
  <a-nft
    type="nft"
    url="../material/image"
    smooth="true"
    smoothCount="10"
    smoothTolerance=".01"
    smoothThreshold="5"
  >
    <a-entity
      gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
      scale="5 5 5"
      position="100 0 -100"
      rotation="0 100 -100"
    >
    </a-entity>
  </a-nft>
  <a-entity camera></a-entity>
</a-scene>
</body>
</html>