Newer
Older
AegisforEcosystem / next / animal.html
@KAOKA Daisuke KAOKA Daisuke on 8 Jul 2022 1 KB change movie
<!DOCTYPE html>
<html lang="ja">
<head>
<title>いきものAR</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="../next/AR.js-3.4.0/aframe/build/aframe-ar.js"></script>
<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;">

  <div class="arjs-loader">
    <div>Loading, please wait...</div>
  </div>

  <a-scene
  vr-mode-ui="enabled: false;"
  renderer="logarithmicDepthBuffer: true; precision: medium;"
  embedded
  arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
  >
  <a-assets>
    <video id="Oyoshikiri" autoplay loop="true" preload="auto" src="../next/material/movie/Oyoshikiri.mp4"></video>
    <audio src="../next/material/movie/Oyoshikiri.mp3" autoplay></audio>
  </a-assets>

<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
  <a-nft
    type="nft"
    url="https://www.yatex.org/gitbucket/utaka0416/AegisforEcosystem/tree/master/next/nfc/Oyoshikiri"
    smooth="true"
    smoothCount="10"
    smoothTolerance=".01"
    smoothThreshold="5"
  >
  <a-video src="#Oyoshikiri" width="960" height="540" position="0 0 0" rotation="270 0 0" play="true"></a-video>
  </a-nft>
  <a-entity camera></a-entity>
</a-scene>

</body>
</html>