3D Modelling/Examples/Panorama 360

AFrame 360 Image - Look around by draging mouse with mouse button pressed

AFrame 360 Image - Look around by draging mouse with mouse button pressed

AFrame Example Durlach or AFrame Sample 360 Degree Image - Look around by draging mouse with mouse button pressed

For the Panoramas with 360 Degree view there are to different geometric option to create 360-Degree view for a geographical location:

• Tube View: Look around parallel to the ground an just turn 360 degree. Smartphone can be used to create 360 degree image.
• Sphere View: In addition to 360 degree turn, you can look up and down with an equirectangular projection. To create spherical project, you need e.g. the OpenSource software Hugin to create image, that can be used for a spherical projection. The generated image by Hugin viewed in a browser seems to have a distortion which provides in AFrame the desired projective geometry.

Learning Task

• (VR-Headset) If you have access to a VR-Headset display the AFrame demo with a 360 degree image and press the VR-Headset Icon at the bottom right.
• (Projection) Explain why there is the distortion in the image projection, when you do not view the images outside from the Aframe Environment (see Source Image of Puy de Sancy).
• (Stiching 360-Panorama from single Images) Create your own Panorama with OpenSource image stiching software Hugin and view the panorama in AFrame.
• (Real World Lab) Explore the concept of Real World Labs and explain the concept of 360 degree panorama images for preparing a visit in the Real World Lab!
• (Panoviewer for WikiCommons Images) You can use PanoViewer for visualisation of 360-Degree Image in Wikiversity and Wikipedia.
  • Wikipedia Article: Jelgava Palace
  • WikiCommons Source Image:
    • Jelgavas_pils.jpg
    • Durlach_saumarkt.jpg
  • 360-Degree Image in Panoviewer
    • 360-Degree Image Jegalvas Palace: https://panoviewer.toolforge.org/#Jelgavas_pils.jpg Jegalvas Palace
    • 360-Degree Image Durlach Saumarkt: https://panoviewer.toolforge.org/#Durlach_saumarkt.jpg Durlach Saumarkt

List of Examples

See also 3D Modelling and WikiCommons2AFrame for creating your own 360 degree panoramas with equirectangular images.

Nature: River Rhine near Cologne/Germany

The following 360 Degree image are displayed with Aframe which make them usable with VR-headsets.

• Aframe Demo: Puy de Sancy - France
• River Rhine 1: near Cologne / Rodenkirchen / Germany
• River Rhine 2: near Cologne / Rodenkirchen / Germany
• River Rhine 3: near Cologne / Rodenkirchen / Germany
• River Rhine 4: near Cologne / Rodenkirchen / Germany
• Aldara Parks /

Cities

• Durlach Saumarkt / Karlsruhe / Germany - (see also Schloss Durlach Photogrammetry)

Trees 3D

• 3D-Models for Trees - GitHub-Repository Treegenerator Snappy-Tree - OpenSource for integration in 360-degree panoramas.

Tube View

Tube Projection

The following examples start with the tube view and proceed to more advanced projections with Panorama Image Stitching for sphere view of an panorama.

• (Tube Panorama View) Explore a 360 degree webbased panorama projected on plane (move right or left).
• (Image Selection) Search for panorama images on WikiMedia and create an panorama 360 image with the filename of the image with the Panorama 360 Creator!
• (Clickable Areas in Panorama) If you want to create an Image Map for the Panorama use the Online Image Map creator and switch output format to Panorama 360 imagemap in select box.

Sphere View Panorama

Suface of sphere projected to a rectangle - equirectangular image

Equirectangular Projection of the surface of the earth

The first step is to create a multiple view of a selected location and take pictures from a centre of view into all direction with overlapping images (1/4 overlap). The Panorama Image Stitching Software Hugin support you in creating the the 360 degree spherical view for the panorama.

• (Final Product of Learning Task) Explore the final product of the 360^o Example first.
• (Learning Task) Learning task is to create the final product from the collection of images in the HuginSample GitHub repository and learn how to fix some missing images for the spherical view.
• (Demo Image Set as ZIP) The ZIP-file of all images and the final product can be downloaded form Hugin Sample Repository on Github (Direct Download Image ZIP).
• (Perform Hugin Photo Stitching for Panorama) The final product uses the 360-Degree image of AFrame. To learn about semiautomated creation of spherical projections of multiple camera images, proceed with the information on HuginSample README.md.
• (Hugin Tutorial Video) Youtube Video by Brian Cluff about Hugin - 2017/02/07
• (AFrame Background) More examples and information about AFrame can be found on AFrame.io Website.

Spherical (equirectangular) Images

You can explore existing spherical (equirectangular) images in WikiMedia Commons.

See also

• Open Source Software Hugin
• AFrame
• WikiCommons4AFrame - click on AFrame settings and select the spherical panorama as background for the 3D Models.
• Spherical Panorama Images - available von WikiMedia Commons, that can be used as 360 Degree Images in AFrame with a-sky tag.
• JSON3D4Aframe - click on AFrame settings and select the spherical panorama as background for the 3D Models.
• Real World Lab with 360-Degree-Images.
• Create AFrame Scenes with 360-Degree Images
• Image Map Tutorial for learning environments in Wikiversity
• Photogrammetry
• Equirectangular projection