<!DOCTYPE html>
<html lang="ja">
<head>
<title>Gesture Interactions - A-Frame & AR.js</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<!-- aframe Event set componen -->
<script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script>
<script src="https://rawgit.com/rdub80/aframe-gui/master/dist/aframe-gui.min.js"></script>
</head>
<body style="margin:0; overflow: hidden;">
<a-scene>
<a-assets>
<a-asset-item id="box" src="../assets/map-icon.gltf"></a-asset-item>
</a-assets>
<a-plane position="0 0 -3" color="black" rotation="-90 0 0" scale="30 30 30"></a-plane>
<a-entity gltf-model="#box" scale="1 1 1" position="0 3 -7"></a-entity>
<a-box scale="1 1 1" position="1 0.5 -3" color="red"
event-set__click="material.color: blue"
event-set__mouseleave="material.color: red;"></a-box>
<a-box position="-1 .5 -3" rotation="0 0 0" color="#4CC3D9" id="box1" animation="property: rotation;
to: 0 360 0;
dur: 4000;
easing: linear;
loop: true" color="tomato">
</a-box>
<!-- Camera + cursor. -->
<a-entity camera position="0 1.6 0">
<a-camera position="0 0 0">
<a-entity cursor="rayOrigin: mouse"></a-entity> <!-- /cursor -->
</a-camera> <!-- /camera -->
</a-entity>
</a-scene>
</body>
</html>
Satou Fumiya