LoginSignup
5
8

More than 5 years have passed since last update.

Google Street View Image APIを使ってVR空間を作る

Posted at

Google Street View Image APIを使うと任意の地点の任意の向きのストリートビュー画像を取得できます。これを使って、前・右・後ろ・左・上・下の6方向それぞれについて視野角が90度の正方形画像を取得して、それを空間上に配置すればぐるぐる見渡せる映像として使えそうだなと思いました。
A-Frameなら手っ取り早く試せそうだったので、作ってみました。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Streat View VR</title>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head>

<body>
  <a-scene>
    <!-- 前 -->
    <a-image width="100" height="100" position="0 0 -50" src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=32.764678,-117.227644&heading=0&fov=90&pitch=0"></a-image>
    <!-- 右 -->
    <a-image width="100" height="100" position="50 0 0" rotation="0 -90 0" src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=32.764678,-117.227644&heading=90&fov=90&pitch=0"></a-image>
    <!-- 後ろ -->
    <a-image width="100" height="100" position="0 0 50" rotation="0 180 0" src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=32.764678,-117.227644&heading=180&fov=90&pitch=0"></a-image>
    <!-- 左 -->
    <a-image width="100" height="100" position="-50 0 0" rotation="0 90 0" src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=32.764678,-117.227644&heading=270&fov=90&pitch=0"></a-image>
    <!-- 上 -->
    <a-image width="100" height="100" position="0 50 0" rotation="90 0 0" src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=32.764678,-117.227644&heading=0&fov=90&pitch=90"></a-image>
    <!-- 下 -->
    <a-image width="100" height="100" position="0 -50 0" rotation="-90 0 0" src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=32.764678,-117.227644&heading=0&fov=90&pitch=-90"></a-image>
  </a-scene>
</body>

</html>

※本来Google Streat View APIにリクエストするためにはAPIキーを取得する必要があり、URLの末尾に&key=YOUR_API_KEY(YOUR_API_KEYは実際のキーに置き換えてください)を付ける必要があります。ですがAPIのデモページに使用されているlocation=32.764678,-117.227644等いくつかの場所についてはAPIキーを付けなくてもリクエストできました。

5
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
8