「ARを作ろう」
A-FrameとGoogle Blocklyを利用してAR表示する「ARを作ろう」はこちら。
https://kaihatuiinkai.jp/nesopuro2/ar/
中学校 技術科「ネットワークを利用した双方向性のあるコンテンツのプログラミング」を学習するための教材として開発しました。
ARを簡単に表示できるA-Frame
カメラで撮影している現実の画像にデジタルコンテンツを重ねるAR（拡張現実、以下AR）の作成が難しいと思っていました。そう、A-Frameに出会う前までは。A-Frameを使うとブラウザ上でARが簡単に表示できます。
ar_test1.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src='https://aframe.io/releases/1.3.0/aframe.min.js'></script>
<script src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js'></script>
</head>
<body>
<a-scene>
<a-marker preset='hiro'>
<a-box position='0 0 0' scale='1 1 1' color='blue' ></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
テストサイトはこちら
https://kaihatuiinkai.jp/ar/ar_test1.html
Google Blocklyでタグを編集
Google BlocklyのブロックでA-Frameのタグを組み込んで、ARサイトを編集できるようにしました。
画像をアップロードして、テクスチャとして立体表面に張り付けることもできます。
どうぞご活用ください。