簡単3分！メタバースSpatialでSkybox（空）の設定をする方法・コツ・注意点

この記事では、メタバースSpatial（スペーシャル）で作成できるスペースに空を設定する手順を解説します。

設定には注意点とコツがありますので、それも合わせて解説します。

3分でできてしまうので、ぜひ設定をしてみてください！

なお、メタバースについて詳しく知りたい方は、以下の記事で詳しく解説しています。
ぜひ併せてご活用ください。

→メタバースとは何か？概念・歴史・用途・プラットフォームなど分かりやすく解説します！

注意点：blenderなどで作ったfbxデータは読み込めない

まず最初に注意点です。

これ、僕もやってしまったのですがSpatialのスペースの空（Skyboxといいます）は専用のテンプレートを加工して使います。

そのため、blenderなどでゼロから制作して出力しても読み込んでくれません。
その点だけ予め覚えておいてください。

Spatialのスペースの構成は大きく分けて3つです

次に、覚えておいていただきたいのがSpatialのスペース構成についてです。

下の図のように、Spatialのスペースは『Skybox（空）』、『Environments（地面とそれに合わせて組み込んだデータ）』と『Object（あとから追加する小物など）』の3種類で構成されています。

そのため、例えば即席で人が集まれる空間をオリジナルで作りたい場合は、

1. 公開されているテンプレートを使う
2. 公開されているテンプレート＋Oblectで小物を追加
3. Skybox（空）＋Environmentsで地面＋Objectで小物などや建物を用意して設置
4. Skybox（空）＋Environmentsで地面と建物を含めたもの＋Objectで小物などを追加

この4パターンで上から順の難易度となります。

今回この記事では、3か4で極力オリジナルのスペースを作りたい方向けとなります。

というわけで、解説してゆきます。

Spatialのスペースに空（Skybox）を設置するまでのステップ

手順は以下の5ステップ。

1. 公式サイトから専用のテンプレート『SkyboxExample』をダウンロードする。
2. 360度のパノラマ写真もしくは画像を用意する。
3. テンプレート内の『texture.jpg』を2で用意したもので上書きする。
4. 『GLTF to GLB Packer』を使い、データを『glb』形式のデータに統合・変換する。
5. Skyboxを反映させたいスペース内でアップロードする。

専門知識はいりません。
次から解説をする手順に沿って操作すれば誰でもすぐにできますのでご安心ください。

まずは公式サイトからテンプレートをダウンロード

SpatialのSkybox専用のテンプレートは公式サイト（英文）からダウンロードします。

→『Creating a Skybox』からダウンロード

公式サイト内のリンクをクリックするとDropboxの画面が開きます。
一番簡単なのは『Spatial Skybox Sample.zip』ですので、それをダウンロードしてください。

ダウンロードしたzipファイルを解答すると

• Spatial Skybox Sample.bin
• Spatial Skybox Sample.gltf
• texture.jpg

この3つのデータが入っています。
現時点では何も操作しません。

360度のパノラマ写真か画像を用意する

次に、設置する空の画像を用意しましょう。

Spatialは立体空間なので、きれいな空にするのなら必ず360度のパノラマ写真か画像を使用するのがコツです。

「360度パノラマ写真　フリー素材」などで検索をすると素材サイトが出てきますが、素材数などで今回は『Poly Haven』からダウンロードしました。

→『Poly Haven』へアクセスをする（英文）

【注意点】
画像や写真には著作権があり、商用利用不可のものがあります。
必ず確認をしてから使用するようにしてください。

ダウンロード、用意した画像名をtextreに変更し、テンプレート内の画像データを上書きする

次に、ダウンローした画像名を『texture』に変更します。

そして、『Spatial Skybox Sample』フォルダ内にある『texture.jpg』の画像データを上書きしてください。

GLTF to GLB Packerでデータを『glb』形式のデータに変換する

次にここまでで用意できたデータをSpatialで読み込めるように『glb』形式のデータに統合・変換します。

以下専用の『GLTF to GLB Packer』というサイトがあるので、アクセスをし、開いたページに

• Spatial Skybox Sample.bin
• Spatial Skybox Sample.gltf
• texture.jpg

以上3つのデータをまとめてドラッグアンドドロップします。

→GLTF to GLB Packerはこちら

そすると、すぐに1つに統合・変換された『out.glb』データがダウンロードされます。

Spatialのスペースにout.glbデータをドラッグ・アンド・ドロップする

最後のステップです！

Skyboxを設定したいSpatialのスペースにログインしましょう。

【注意点】
自分で作成、もしくは編集権限があるスペースでのみ変更ができます。
他の方が作ったり、編集権限がないとできませんので注意してください。

ログインをしたら、先程ダウンロードした『out.glb』を画面内にドラッグ・アンド・ドロップします。

しばらく読み込んだあと、球体のSkyboxデータが表示されます。

表示された球体のSkyboxデータをクリックすると、画面内の右と下にメニューが表示されます。
画面下にある『Set Custom Environment』をクリックし、表示される画面で『Skybox』をクリックして完了です！

Skyboxは何度でも変更が可能です

最後に、今回設定をしたSkyboxはテンプレートをもとに作成した『out.glb』データがあれば、画面内にドラッグ・アンド・ドロップで何度でも変更が可能です。

例えば、季節ごとに空や空間の印象を変えたいときなどに便利ですね。

以上が全手順となります。
覚えてしまえばとても簡単ですし、専門知識もいりません。

ぜひトライしてみてくださいね！

＼最後にお知らせです！／

当ブログでは、メタバースに関する情報発信の他に「メタバース制作や企画」「3Dアバター制作」「イベント登壇」「勉強会開催」など、様々なご要望にお応えできるサービスをご用意しています！

お気兼ねなくご相談をお寄せください！