空間全体の明かりを調整する
空間全体を照らし出す"光"とその種類のについて簡単に解説をしていきます。
公式サイトには詳細が記載されていますので、こちらも参考にしてみてください。
Lights
初期状態を確認する
先ずは、3Dオブジェクトが配置してあるだけの状態を作ります。
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>
<script src="./main.js"></script>
</head>
<body>
<a-scene stats loading-screen="dotsColor: gray; backgroundColor: lightgray">
<!-- Sky -->
<a-sky color="#ECECEC"></a-sky>
<!-- Assets -->
<a-assets timeout="30000">
<a-asset-item id="car_obj" src="./assets/car/car.obj"></a-asset-item>
<a-asset-item id="car_mtl" src="./assets/car/car.mtl"></a-asset-item>
</a-assets>
<!-- Model -->
<a-obj-model src="#car_obj" mtl="#car_mtl" position="0 0 -6" rotation="0 -50 0"></a-obj-model>
</a-scene>
</body>
</html>
初期設定を無効にする
光の設定を一度無効にします。
"a-scene"タグを、次の様に書き換えます。
"light"アトリビュートに注目してください。
index.html
<a-scene stats loading-screen="dotsColor: gray; backgroundColor: lightgray" light="defaultLightsEnabled: false">
こうする事でVR空間の光が無効になり、3Dオブジェクトが黒い状態になります。
光を設定する
次は、"a-entity"タグを使ってVR空間に光を設定します。
次のタグを追加してみましょう。
"light"アトリビュートには、次の様な設定ができます。
| アトリビュート名 | 記述例 | 意味 |
|---|---|---|
| type | 光の種類(ambient, directional, hemisphere, point, spot) | 光の種類 |
| color | #ffffff | 光の色 |
| intensity | 1.5 | 光の強さ |
"position"アトリビュートは、光の方向を設定します。
index.html
<a-entity light="type: ambient; color: #ffffff; intensity: 1.5" position="-1 1 0"></a-entity>
すると元の様にVR空間に光が配置され、3Dオブジェクトが綺麗に表示されます。
その他の詳細については公式サイトを参照してください。
Lights
最後に
今回でA-Frameのテキストは終わりです。
HTMLタグだけでここまで出来るのは驚きですよね。
何かの参考になれば幸いです。
ここまで読んで頂きありがとうございました。