A-FrameとGlitchを使ってお手軽VR開発ができる
A-FrameでSkyboxを作ってOculus Quest2をかぶって
VR体験をしてみよう！という謎の週末開発モチベーションが働きました。
お手軽にテストができるGlicthで作業することとします。
Glitchは無料のウェブサーバーサービス
Glitchにアクセスして、新規プロジェクトを作成します。
ファイル構成は以下2つだけでOKです。
- index.html
- assetsディレクトリ(画像格納)
A-FrameでSkyboxの作り方
JavaScriptは別ファイルにしても良いですが、
今回は簡易的にソースコードは全てindex.htmlに記述していきます。
Skyboxの準備
assetsディレクトリを選択して、
Skyboxの画像をD&Dするとアップロードされます。
6面いるため、６枚の画像をアップロードしています。
立方体の面を作成する
bodyタグの中にa-planeタグを追加します。
planeということで四角の平面が作成されます。
以下のように位置、回転、サイズ、画像のパスを指定します。
<a-plane static-body position="0 -500 0"
rotation="-90 0 0" width="1000" height="1000"
src="画像Path"></a-plane>
画像のパスは、assetsディレクトリ内の画像をクリックすると
パスが表示されますので、それをコピペします。
<!-- 床 -->
<a-plane static-body position="0 -500 0" rotation="-90 0 0" width="1000" height="1000" src="画像Path"></a-plane>
<!-- 天井 -->
<a-plane static-body position="0 500 0" rotation="90 0 0" width="1000" height="1000" src="画像Path"></a-plane>
<!-- -z(前) -->
<a-plane static-body position="0 0 -500" rotation="0 0 0" width="1000" height="1000" src="画像Path"></a-plane>
<!-- +z(前) -->
<a-plane static-body position="0 0 500" rotation="0 180 0" width="1000" height="1000" src="画像Path"></a-plane>
<!-- -x -->
<a-plane static-body position="500 0 0" rotation="0 -90 0" width="1000" height="1000" src="画像Path"></a-plane>
<!-- +x -->
<a-plane static-body position="-500 0 0" rotation="0 90 0" width="1000" height="1000" src="画像Path"></a-plane>
このように6面追加しました。
デフォルトライトの関係でSkyboxの境界線がつながらない
画像と画像の境界線がつながらない。。。
これはデフォルトで設定されるライトが
影響していると推測してライトをOFFにしました。
デフォルトライトをOFF
<a-scene light="defaultLightsEnabled: false">
a-sceneタグのライトをオフにしました。
すると真っ暗です。
ライトがないので、そりゃそうだ状態。
個別にライトを置いて対応
<a-scene light="defaultLightsEnabled: false">
<!-- 個別にライトを追加 -->
<a-light type="ambient" color="#fff"></a-light>
環境光(ambient)を追加しました。
ライト問題解消、境界線がつながった！！！
今回の成果物はコチラからご覧いただけます。
A-frameでSkybox
A-FrameとGlitchでSkyboxを作ってみたソースコード全文はコチラ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-frameでSkybox</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene light="defaultLightsEnabled: false" background="color: #000000">
<!-- 環境光 -->
<a-light type="ambient" color="#fff"></a-light>
<!-- 床面 -->
<a-plane static-body position="0 -500 0" rotation="-90 0 0" width="1000" height="1000" src="画像Path"></a-plane>
<!-- 天井 -->
<a-plane static-body position="0 500 0" rotation="90 0 0" width="1000" height="1000" src="画像Path"></a-plane>
<!-- -z(前) -->
<a-plane static-body position="0 0 -500" rotation="0 0 0" width="1000" height="1000" src="画像Path"></a-plane>
<!-- +z(前) -->
<a-plane static-body position="0 0 500" rotation="0 180 0" width="1000" height="1000" src="画像Path"></a-plane>
<!-- -x -->
<a-plane static-body position="500 0 0" rotation="0 -90 0" width="1000" height="1000" src="画像Path"></a-plane>
<!-- +x -->
<a-plane static-body position="-500 0 0" rotation="0 90 0" width="1000" height="1000" src="画像Path"></a-plane>
</a-scene>
</body>
</html>
最後に
Skyboxを実装して、
OculusQuest2をかぶって体験してみると
結構自分としては感動しました。
Skyboxだけだと画面に動きが無いため、
例えば鳥が飛んでいるとか、
雲が動いているとか、下を見たら街があるとか
そういうものを次回は作ってみようと思います。
(多分A-FrameではなくUnityで)