【aframe】エモい空つくろう！空の色を変更・グラデーションにする方法

f:id:saharu54:20180902162704p:plain

さて、今回学ぶことはこちら

空の色の変更方法（単色）

空をグラデーションにする方法

空の色の変更方法（単色）

まずは空の色を変更する方法です。

<a-sky color="black"></a-sky>

これをa-sceneの中に入れましょう。
終わった！一瞬！！

"black"の部分に色名かカラーコードを入れてください。
ちなみに上の画像は"lightblue"を入れました。
お好みの色名やカラーコードを入れてくださいね。

空をグラデーションにする方法

空をグラデーションにするにはこちら。

<head>
  <title>Page Title</title>

  <!-- aframeのライブラリ呼び出し -->
  <script src="https://rawgit.com/aframevr/aframe/master/dist/aframe-master.min.js"></script>

  <!-- 空のグラデーションのためのコンポーネント呼び出し -->
  <script src="https://unpkg.com/aframe-environment-component@1.0.0/dist/aframe-environment-component.min.js"></script>

</head>

<body>
  <a-scene>
  <a-sky radius="200" theta-length="110" material="shader:gradientshader;topColor:black;bottomColor:white" geometry="" visible="" id="sky" position=""></a-sky>
  </a-scene>
</body>