<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<!-- afrmaeの読み込み -->
<script src="https://aframe.io/releases/1.3.0/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="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<!-- we add detectionMode and matrixCodeType to tell AR.js to recognize barcode markers -->
<!-- <a-scene embedded arjs='debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'> -->
<a-scene embedded arjs='debugUIEnabled:false;'>
<a-marker preset="hiro" emitevents="true">
<a-box clickhandler position="0 0 0" scale="1" color="red" id="box-model"
event-set__click="material.color: blue" event-set__mouseleave="material.color: red;"></a-box>
</a-marker>
<!-- use this <a-entity camera> to support multiple-markers, otherwise use <a-marker-camera> instead of </a-marker> -->
<a-entity camera cursor="rayOrigin: mouse"></a-entity>
</a-scene>
<!-- clickイベント処理 -->
<!-- <script>
AFRAME.registerComponent('clickhandler', {
init: function () {
this.el.addEventListener('click', function() {
this.setAttribute('color', 'blue');
});
this.el.addEventListener('mouseleave', function(){
this.setAttribute('color', 'red');
})
}
});
</script> -->
</body>
</html>
Satou Fumiya