Glitchとは!?
Glitchは、Webサイトやアプリケーションの作成や公開をすることができるサービスです。
ログインをする
Gmailアカウント等があれば、直ぐにログインする事ができます。
Webサイトを作る
"Blank Website"をクリックする事で、ホームページを作成する事ができます。
HTMLを編集する
左側にあるファイル"index.html"を選択し、コードを編集してみます。
次のコードをコピーして貼り付けてみましょう。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
</head>
<body>
<a-scene stats loading-screen="dotsColor: gray; backgroundColor: lightgray">
<a-sky color="#ECECEC"></a-sky>
<a-entity environment="preset: default;"></a-entity>
<a-plane position="0 0 -5" rotation="-90 0 0" width="6" height="6" color="#7BC8A4"></a-plane>
<a-box position="-1 0.5 -3" rotation="0 0 0" width="1" color="#4CC3D9"></a-box>
<a-sphere position="0 1 -5" radius="1" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.5 -3" radius="0.5" height="1" color="#FFC65D"></a-cylinder>
</a-scene>
</body>
</html>
すると、画面の右側に見覚えのあるVR空間が現れます。(やりました!!)
URLにアクセスしてみる
編集画面の右上にある"ChangeURL"をクリックする事で、URLを取得する事ができます。
このURLをコピーして、他のブラウザで開いてみましょう。
このURLは実際にインターネットに公開されているアドレスです。
WebXR対応のVRデバイスから、このURLへアクセスする事でVR体験をする事ができます。(便利ですね!!)
次回は、VS-Codeを使った環境開発のお話になります。