<!DOCTYPE html>
<html lang="ja">
<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>Marker Based Example</title>
</head>
<!-- JavaScriptのフレームワーク(A-Frame)とライブラリ(AR.js)の読み込み -->
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<!--アニメーションを再生するためのライブラリの読み込み-->
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.0.0/dist/aframe-extras.min.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs="debugUIEnabled:false;" renderer="gammaOutput: true;" vr-mode-ui="enabled: false">
<a-entity id="mouseCursor" cursor="rayOrigin: mouse"></a-entity>
<a-assets>
<a-asset-item id="gabyou" src="./objects/gabyou-keyframe.gltf"></a-asset-item>
<a-asset-item id="gabyou2" src="./objects/gabyou-usepng.gltf" ></a-asset-item>
<a-asset-item id="gabyou3" src="./objects/gabyou-gold.gltf" ></a-asset-item>
</a-assets>
<!-- ARマーカーの設定 -->
<a-marker preset="hiro">
<!-- 表示したいARの設定 -->
<a-entity
position="0 0 0"
scale= "0.3 0.3 0.3"
rotation="-90 0 0"
animation-mixer="loop: once"
gltf-model="#gabyou"></a-entity>
<a-entity
position ="1 0 0"
scale ="0.5 0.5 0.5"
rotation ="-90 0 0"
gltf-model ="#gabyou3"
animation ="property : rotation;
to : -90 0 360;
dur : 3000;
easing : linear;
startEvents: mouseenter"><a-entity>
</a-marker>
<!-- ARマーカーの設定その2 -->
<a-marker type="pattern" url="./img/pattern-sparkle.patt">
<!-- 表示したいARの設定その2 -->
<a-entity
position ="0 0 0"
scale ="0.3 0.3 0.3"
rotation ="-90 0 0"
animation-mixer="loop: once"
gltf-model ="#gabyou2"
></a-entity>
</a-marker>
<!-- カメラの設定 -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
