<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" /> <title>A-Frame で超簡単 AR</title> <style type="text/css"> div.VRbutton { position: fixed; bottom: 1em; left: 1em; border: 1px solid navy; } div.notfound {display: none;} </style> </head> <body style="margin: 0px; overflow:hidden;"> <!-- A-Frame ライブラリの読み込み --> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <!-- AR.js ライブラリの読み込み --> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script> <script src="js/aframe-text-geometry-component.min.js"></script> <script src="js/aframe-extras.js"></script> <script src="js/aframe.min.js"></script> <script src="js/aframe-ar.js"></script> <!-- A-Frame の VR空間に AR.js を紐づける(デバッグUIを非表示) --> <a-scene embedded vr-mode-ui="enabled:false;" arjs="debugUIEnabled:false;"> <a-assets> <a-asset-item id="tree" src="kaken2.gltf"></a-asset-item> </a-assets> <!-- マーカーを登録(プリセットされている「hiro」マーカー) --> <a-marker preset="custom" type="pattern" url='pattern-koryo.patt' id="koryomark"> <!-- マーカーの場所に箱を置く(見やすいようにワイヤーフレーム表示) --> <a-entity scale="0.02 0.02 0.02" rotation="-90 0 0" gltf-model="#tree"> </a-entity> </a-marker> <!-- AR用のカメラを置く --> <a-entity camera></a-entity> </a-scene> <script type="text/javascript" src="event5.js" charset="utf-8"> </script> <div id="vrbtn" class="VRbutton notfound"> <button style="width : 160px;height : 50px;font-size:30px;" onclick="location.href='https://www.sakatakoryo-h.ed.jp'">Web</button> <button style="width : 160px;height : 50px;font-size:30px;" onclick="location.href='https://www.yatex.org/gitbucket/SakataKoryo2021/renshu/pages/ryohei/vr3.html'">View</button> </div> </body> </html>