<!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="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-assets> <video id="Oyoshikiri" src="material/movie/Oyoshikiri.mp4" preload="auto" autoplay loop></video> </a-assets> <a-scene embedded arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;" vr-mode-ui="enabled: false;" > <!-- 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-nft> <a-assets> <video id="Oyoshikiri" src="material/movie/Oyoshikiri.mp4" preload="auto" autoplay loop></video> </a-assets> <a-video src="#Oyoshikiri" width="706" height="1059" position="0 0 -10"> </a-video> <a-entity camera></a-entity> </a-scene> </body> </html>