Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

How to create 360 Image/panorama & share with WebVR?

785 Aufrufe

Veröffentlicht am

Learn to create 360 Image/panorama & experience them in WebVR with A-Frame.

Labs are included https://github.com/gasolin/webvrdemo/wiki

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

How to create 360 Image/panorama & share with WebVR?

  1. 1. How to create 360 Image/panorama & share with WebVR? https://github.com/gasolin/webvrdemo
  2. 2. Setup
  3. 3. 📹 360 Video
  4. 4. 360 Cameras
  5. 5. https://aframe.io/examples/showcase/videosphere/
  6. 6. 360 Image
  7. 7. 🔮Google Streetview
  8. 8. http://gasolin.github.io/webvrdemo/streetview.html
  9. 9. Panorama
  10. 10. 📷 Cardboard Camera
  11. 11. http://gasolin.github.io/webvrdemo/cardboardcam
  12. 12. 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
  13. 13. 📹 360 Video
  14. 14. 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>
  15. 15. 360 Image
  16. 16. 360 image <a-scene> <a-sky src="puydesancy.jpg" rotation="0 -130 0"></a-sky> </a-scene>
  17. 17. Panorama
  18. 18. 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>
  19. 19. 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>
  20. 20. Try the Lab by yourself to learn WebVR https://github.com/gasolin/webvrdemo

×