how to create 360 image/panorama & share with webvr?
TRANSCRIPT
![Page 1: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/1.jpg)
How to create 360 Image/panorama &
share with WebVR?https://github.com/gasolin/webvrdemo
![Page 2: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/2.jpg)
Setup
![Page 3: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/3.jpg)
📹 360 Video
![Page 4: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/4.jpg)
360 Cameras
![Page 6: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/6.jpg)
360 Image
![Page 7: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/7.jpg)
🔮Google Streetview
![Page 8: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/8.jpg)
![Page 9: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/9.jpg)
http://gasolin.github.io/webvrdemo/streetview.html
![Page 10: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/10.jpg)
Panorama
![Page 11: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/11.jpg)
📷 Cardboard Camera
![Page 12: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/12.jpg)
![Page 14: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/14.jpg)
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
![Page 15: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/15.jpg)
📹 360 Video
![Page 16: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/16.jpg)
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>
![Page 17: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/17.jpg)
360 Image
![Page 18: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/18.jpg)
360 image
<a-scene> <a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky></a-scene>
![Page 19: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/19.jpg)
Panorama
![Page 20: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/20.jpg)
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>
![Page 21: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/21.jpg)
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>
![Page 22: How to create 360 Image/panorama & share with WebVR?](https://reader035.vdocuments.site/reader035/viewer/2022062502/58a34c531a28ab62248b6903/html5/thumbnails/22.jpg)
Try the Lab by yourself to learn WebVR
https://github.com/gasolin/webvrdemo