WebVR

日記

2018.07.242021.04.17

WebVRのフレームワークのA-FRAMEを使って遊んでみた。
残念ながらOculusGoのブラウザではうまく表示できなかったのですが、スマホブラウザならちゃんと360°表示できました。

↑MacSafari

↑iPhoneSafari

画像だけ見ると凄そうだけど、360°画像を背景に、立体を表示しているだけです。
しかも、htmlだけで実現できます。

<!doctype html>
<html>
  <head>
    <title>Room</title>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-cube position="-2 1 -2" rotation="0 45 0" color="#C00"></a-cube>
      <a-sphere position="0 -0.5 -3" color="#0C0"></a-sphere>
      <a-cylinder position="2 0 0" color="#00C"></a-cylinder>
      <a-sky src="全天球画像.jpg" rotation="0 170 0"></a-sky>
   </a-scene>
  </body>
</html>

工夫次第でいろんなことできそうです。