Learn to create 360 Image/panorama & experience them in WebVR with A-Frame. Labs are included https://github.com/gasolin/webvrdemo/wiki

1. How to create
360 Image/panorama &
share with WebVR?
https://github.com/gasolin/webvrdemo

2. Setup

3. 📹 360 Video

4. 360 Cameras

5. https://aframe.io/examples/showcase/videosphere/

6. 360 Image

7. 🔮Google
Streetview

9. http://gasolin.github.io/webvrdemo/streetview.html

10. Panorama

11. 📷 Cardboard
Camera

13. http://gasolin.github.io/webvrdemo/cardboardcam

14. Experience WebVR with A-Frame
Examples https://aframe.io/
Docs https://aframe.io/docs/guide/
Plugins & showcases https://github.com/aframevr/awesome-aframe#guides-
and-tutorials

15. 📹 360 Video

16. 360 video
<a-scene>
<a-assets>
<video id="video" src="https://ucarecdn.com/bcece0a8-86ce-460e-856b-
40dac4875f15/"
autoplay loop></video>
</a-assets>
<a-videosphere src="#video" rotation="0 180 0"></a-videosphere>
</a-scene>

17. 360 Image

18. 360 image
<a-scene>
<a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky>
</a-scene>

19. Panorama

20. Panorama
<a-scene>
<a-curvedimage src="IMG_20160506_092450.vr.jpg"
height="140" radius="100" theta-length="360"
rotation="0 0 0"></a-curvedimage>
<a-sky color="darkgrey"></a-sky>
</a-scene>

21. Partial Panorama
<a-scene>
<a-curvedimage src="IMG_3667.JPG"
height="140" radius="100" theta-length="300"
rotation="0 0 0"></a-curvedimage>
<a-sky color="darkgrey"></a-sky>
</a-scene>

22. Try the Lab by yourself to
learn WebVR
https://github.com/gasolin/webvrdemo