【Oculus】A-FrameでSkyboxを作って境界線がつながらない罠の解決方法

## A-FrameとGlitchを使ってお手軽VR開発ができる

A-FrameでSkyboxを作ってOculus Quest2をかぶって
VR体験をしてみよう！という謎の週末開発モチベーションが働きました。

お手軽にテストができるGlicthで作業することとします。

### Glitchは無料のウェブサーバーサービス

[Glitch](https://glitch.com/)にアクセスして、新規プロジェクトを作成します。

ファイル構成は以下2つだけでOKです。

- index.html
- assetsディレクトリ(画像格納)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/b798891d-8d96-4a17-327e-b10fe927bb66.png" width=250 />

## A-FrameでSkyboxの作り方

JavaScriptは別ファイルにしても良いですが、
今回は簡易的にソースコードは全てindex.htmlに記述していきます。

### Skyboxの準備

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/a4902c9d-2867-f1b3-21a1-2ad98829bf82.png" width=450 />
`assetsディレクトリ`を選択して、
Skyboxの画像をD&Dするとアップロードされます。

6面いるため、６枚の画像をアップロードしています。


### 立方体の面を作成する

`body`タグの中に`a-plane`タグを追加します。
`plane`ということで四角の平面が作成されます。

以下のように位置、回転、サイズ、画像のパスを指定します。

```html
<a-plane static-body position="0 -500 0" 
    rotation="-90 0 0" width="1000" height="1000" 
    src="画像Path"></a-plane>
```

画像のパスは、`assets`ディレクトリ内の画像をクリックすると
パスが表示されますので、それをコピペします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/83e4a451-5479-ed33-dcdf-2f5b38dd228d.png" width=250 />

```html
<!--    床    -->
<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の境界線がつながらない

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/1752c3f6-f606-0da0-f4f1-e11a6886ec97.png" width=450 />
画像と画像の境界線がつながらない。。。

これはデフォルトで設定されるライトが
影響していると推測してライトをOFFにしました。

### デフォルトライトをOFF

```html
<a-scene light="defaultLightsEnabled: false">
```
`a-scene`タグのライトをオフにしました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/bae2803c-77e9-dd20-3b9a-067265071e00.png" width=450 />
すると真っ暗です。

ライトがないので、そりゃそうだ状態。

### 個別にライトを置いて対応

```html
<a-scene light="defaultLightsEnabled: false">
  <!-- 個別にライトを追加 -->
  <a-light type="ambient" color="#fff"></a-light>
```
環境光(ambient)を追加しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328771/417e5410-640f-f6f5-aeb3-e91db4ef1613.png" width=450 />

## ライト問題解消、境界線がつながった！！！

今回の成果物はコチラからご覧いただけます。
[A-frameでSkybox](https://ohba-skybox-test.glitch.me/)



<details>
<summary>A-FrameとGlitchでSkyboxを作ってみたソースコード全文はコチラ</summary>
<div>

```html
<!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>
```
</div></details>



## 最後に

Skyboxを実装して、
OculusQuest2をかぶって体験してみると
結構自分としては感動しました。

Skyboxだけだと画面に動きが無いため、
例えば鳥が飛んでいるとか、
雲が動いているとか、下を見たら街があるとか
そういうものを次回は作ってみようと思います。
(多分A-FrameではなくUnityで)