メタバース空間をGoogleストリートビューの好きな場所へ配置するやり方

## メタバース「Spatial」とは？

自由度の高い空間と、ボクセルではない高品質なアセットで人気のメタバース空間[Spatial](https://www.spatial.io/)では、好きな画像（360画像）を背景に設定することができます。（基本、無料で利用可能です）

私が運営する空間[（コチラ）](https://www.spatial.io/s/MiuraDonutss-Next-Space-644fe06dedd0279567aed82c?share=940211072271780521)では、渋谷区の宮下公園付近のGoogleストリートビューの画像を背景に使っています。

![MiuraDonuts's Next Space on 23-7-5 at 11.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/fca7bcf6-47fe-ff65-17d8-d49a109895cb.png)


※ただし、Spatialで用意されいる空間を使う場合には、背景の差し替えはできません。背景を変更できるのは、自分のオリジナルの建築物や空間をお持ちの方のみとなります。

## 背景のカスタマイズ方法は、コチラの動画から

Spatialにおける背景は「Skybox（スカイボックス）」と呼ばれています。Skyboxの差し替えの方法は、公式からレクチャー動画が出ていますので、コチラを見ながら作業を進めることもできます。

公式からの動画[「カスタムSkyboxの設定方法」](https://youtu.be/5uEKmLR0Tnc)
※コチラの動画に沿って、Googleストリートビューの画像をSkyboxに設定することができます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/5uEKmLR0Tnc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Skyboxは、手持ちの360画像（全方位画像とも）または、Adobe Stock（Adobeが運営する素材提供サービス：[コチラ](https://stock.adobe.com/jp/)）などで提供されている360画像を使って、カスタマイズすることが可能です。

ここでは、Googleストリートビューの好きな場所の画像を、Spatialの背景「Skybox」に設定する方法を解説したいと思います。

## Googleストリートビューの画像を使うための準備

(1)「Street View Download 360」というツールをダウンロードします

コチラの[ダウンロードページ](https://svd360.istreetview.com/)から、ダウンロードすることができます。（WindowsとMacに対応しています）

![画像100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/b96dbe27-887d-a2e4-33de-e33251fbd1c7.jpeg)


ダウンロードしたアプリ「Street View Download 360」は、このような見た目をしています。

![画像101.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/e66566a2-73af-8d01-cb6f-3bb76bc307de.jpeg)



(2)Googleストリートビューで目的のポイントのURLをコピーできるように表示しておきます。

画面上に表示されるURLの欄をコピーするだけ、非常に簡単です。

(3)Skyboxの構成フォルダをダウンロードしておきます。

Skyboxの構成フォルダは[コチラから](https://drive.google.com/drive/folders/1RJvpOg6GPKYsaknhIhss5Ee4RlP7W0xX)ダウンロードすることができます。

![画像103.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/aa43d115-224c-de6f-28a2-064f995ea5ee.jpeg)


ここでは、Zipフォルダの方をダウンロードしておいてください。

ダウンロードして解凍をすると、下記のファイルが中に入っています。

![画像104.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/d02a6d45-887b-4f21-7439-a0de37879c02.jpeg)


Skyboxは、この3つのファイルから出来上がっていることが分かります。

ここまでで、準備は終了です。


## Googleストリートビューの画像を取得し、Skybox化
### ストリートビュー画像のダウンロード
「Street View Download 360」にて、必要な情報を設定していきます。

![画像105.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/aabe7c4e-f167-798c-8656-511514d58fa1.png)


➀「Panorama Download」モードになっていることを確認
➁「Path to save the file」にて保存場所を設定（保存ファイル名は「Street View 360.jpg」にします）
➂GoogleストリートビューのURLを貼付します
➃「Resolution」は初期設定「13312 × 6656」のままでOK
➄上記の設定が完了したら、「Download Panorama」ボタンを押す

➄まで完了すると、➁で設定したフォルダへ「Street View 360.jpg」というファイルが生成されます。

※下記は渋谷区の宮下公園付近のストリートビューの画像です。こんな形で360画像をダウンロードすることができます。

![画像102.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/eac960cb-e3c9-2b01-7677-ee35e7e0ba60.jpeg)


### Skyboxの構成ファイルの準備
ここまでの流れ「(3) Skyboxの構成フォルダをダウンロード」にて、Skyboxを構成するファイルが3つだということを学びました。上記でダウンロードしたストリートビューの画像を、「texture.jpg」と名前を変更して、基本セットを作成します。

※「.gltf」「.bin」ファイルはそのままでOKです。

![画像106.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/67a6685c-a524-651b-82e5-aaa56d10ce12.jpeg)


### 作成したSkyboxの構成ファイルをアップロード用にレンダリング

ここまでで作成した基本セットを、アップロード用のファイルへレンダリングを行います。
コチラの[「GLTF to GLB Packer」](http://glb-packer.glitch.me/)へアクセスし、基本セット3点を選択し、ドラッグ＆ドロップで画面へアップロードします。

![画像107.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/42ed105f-6f20-3e72-dc41-ec18810e5621.jpeg)


アップロードが完了すると、「out.glb」というファイルが生成されます。この「out.glb」がSpatialの背景設定に必要なファイルとなります。

## Spatialへのアップロード
さて、いよいよSpatialの空間へSkyboxをアップロードしていきます。

ここでは、渋谷宮下公園付近の背景を、アメリカのマイアミの画像へと差し替えてみます。

1. Spatialの下部に表示されている「＋」から「out.glb」をアップロードします。

![画像108.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/b0f7f120-7285-ef10-0c65-e613d8a037cf.jpeg)


2. 目の前に「out.glb」が球体となって出現すればOKです。球体をクリックして、「背景」ボタンを押します（画像の下部の赤丸箇所）

![画像109.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/566741f3-5621-59b0-ce94-ca56b4336e5f.jpeg)


3. 「Skybox」という選択肢を選ぶと…背景が差替わります。

![画像110.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416622/35a35dbc-f9a2-e04b-abb4-a3020f84eb73.jpeg)


さっきまで渋谷にいた空間が、マイアミへ！こんな感じで、自分の好きな地点をメタバース空間の背景にすることができます。

この記事は、著者が運営するメディア「ぬるぺでぃあ」でも読むことができます（記事は[コチラ](https://miuradonuts.com/2023/07/05/spatial-001/)）
![](https://miuradonuts.com/wp-content/uploads/2023/06/ヘッダーエリア画像作成.png)