How to create 360 Image/panorama &

share with WebVR?https://github.com/gasolin/webvrdemo

Setup

📹 360 Video

360 Cameras

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

360 Image

🔮Google Streetview

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

Panorama

📷 Cardboard Camera

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

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

📹 360 Video

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>

360 Image

360 image

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

Panorama

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>

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>

Try the Lab by yourself to learn WebVR

https://github.com/gasolin/webvrdemo