【A-FRAME】a-skyをいじって360°をimageでうめてみよう

2472 ワード
Augmented-Reality aframe AR VR AR テキストリンク

できあがりイメージ

WASDで移動可能でかつマウスコントロールで視点移動が可能です。

コード全部

360°画像のサイト

やり方

githubからコードをダウンロードしていただければ完成なのですが簡単にコードを解説します。

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>atapra</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
aframeを使うためのライブラリ
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
imgを取り込むタグ
        <img id="sky" src="texture.jpg" />
      </a-assets>
360°表示するためのタグ（radiusを変更で半径が変わります）
      <a-sky id="image-360" radius="10" src="#sky"> </a-sky>
    </a-scene>
  </body>
</html>

以上。