説明
A-Frameでオブジェクトのsphereに地球の画像を貼り付けて、回転させます。
今回使用する画像は、JHT’s Planetary Pixel Emporiumからダウンロードできます。
開発環境
・Webサーバ環境（SSL通信できる環境）
・GoogleChrome
・スマホ（Android）
※ローカル環境でお試ししたい場合はこちらを参考にしてください。
ファイルの作成
①. 画像の用意
今回使用する画像を、JHT’s Planetary Pixel Emporiumからダウンロードしてください。
画像名を「earth.png」にします。
②. ソースコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ARDemo</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">
<a-assets>
<img id="earth" src="./earth.png" />
</a-assets>
<a-marker preset="custom" type="pattern" url='./pattern-ar-test.patt'>
<a-entity rotation="-90 0 -15">
<a-sphere src="#earth" rotation="0 0 0" scale="0.5 0.5 0.5"
animation="property: rotation; from: 0 0 0; to: 0 360 0; loop: true; dur: 3000; easing: linear;"
>
</a-sphere>
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
※a-sphereの中に、animationを設定することで、アニメーションをすることができます。
※自作マーカーを作る場合は、こちらをご確認ください。
実行
アクセスすると、以下のように地球が現れ、回転します。
コメント