【aframe】インスペクターの使い方・ショートカット一覧

aframeを覚えておく上で押さえておきたいインスペクターの使い方とショートカットキーをまとめました！

aframeのインスペクター機能 

aframeのインスペクターとはGUIで空間の編集ができる機能。

まずはaframeで作られたwebVRの画面で、騙されたと思って【Ctrl + Alt + i】を押してみましょう。
公式サイトのサンプルで試してみるとわかりやすいかも

引用：https://aframe.io/examples/showcase/helloworld/

こんな感じの画面になったでしょうか
これがaframeのインスペクターと呼ばれる編集画面。

左側のなどの欄でこのページにどんな要素が含まれているか確認できますし、左上のピンクの「Back to Scene」を押せば元のwebVRに戻れます。

aframeを利用したウェブサイトならこのインスペクターで要素の構成なんかが簡単に確認できちゃいます。
「Back to Scene」ボタンの下のアイコンでhtmlファイルとしてPCにコードを落とすこともできます。
「このwebVRどうやって動いてんの？」って思った時はインスペクター見て挙動や構成など参考にするのがオススメです。

英語ですが、公式の使い方ガイドはこちら。
Visual Inspector & Dev Tools – A-Frame

ショートカットキー一覧

わかる限りまとめてみたショートカットキーはこちら。
参考になるのかは謎

<基本機能>
W …移動カーソル
E …回転カーソル
R… スケールカーソル

<その他>
G …地面のグリッド表示／非表示
F …オブジェクトを選択していると拡大
N …中心点選択