3D Modelling/Create 3D Models/Wiki 360 Degree AFrame

This learning resource supports you in creating a link that creates a 360 degree scene from an existing equirectangular 360-degree image that exists Wiki Commons. The OpenSource tool WikiCommons4Aframe was created for this learning resource, so that learners can add 360 degree spherical image with a link for AFrame.

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

Equirectangular Projection from the surface of the Sphere to a rectangle

Equirectangular Projection of the surface of the earth

Coal Mining: equirectangular image - Förderturm der Zeche Holland

Learning Task

360 degree images for web-based 3D models define the background sky of the 3D model. Webbased 3D enviroment can be used with a sky background to explore a place, you cannot physically go to. The 3D background images are regular PNG or JPG images which seem to be deformed in a standard image viewer, but a 360 degree image in AFrame it is used as spherical projection in which the user can look around in AFrame. In the following learning task you will learn

1. about the equirectangular images,
2. explore the 360 image in Aframe,
3. use a equirectangular image in WikiCommons in AFrame and finally
4. use and create your own 360 image in AFrame

Now we start with the analysis of equirectangular images:

• (Search 360^o-Images) Search for equirectangular images in WikiCommons or one of the following images
  • Aldara Park (Wiki Commons) -
  • Durlach Saumarkt (Web Link to Github)
• (WikiCommons2AFrame) Start the link creator for the Aframe and copy the Filename into WikiCommons4Aframe
  • (WikiCommons) Aldara_parks.jpg -- Generated Link for 360^o-Image
  • (WikiCommons) Förderturm_Zeche_Holland_Panorama.jpg -- Förderturm der Zeche Holland - link created with WikiCommons2AFrame with equirectangular image from WikiCommons.

• • (WebLink) Rieselfelder Muenster, Germany with https://niebert.github.io/HuginSample/img/rieselfelder1.jpg -- Generated Link for 360^o-Image
  • (WebLink) Saumarkt Karlsruhe-Durlach, Germany with https://niebert.github.io/HuginSample/img/durlach_saumarkt.jpg -- Generated Link for 360^o-Image
• (Text in AFrame) Edit the visible text in the 360^o-Image, the color, the position, ... and then display the the 360^o-Image with button.
• (Copy URL) Copy the link into the Wikiversity where you need a 360^o-Image.
• (Real World Lab) Explore the concept of a Real World Lab and define the application of 360^o-Images for additional digital augmentation of a participatory environment of the Real World Lab.

Test 360-Degree Images with your Smartphone

Click on one of the spherical 360 degree image and move your smartphone up an down or turn your smartphone.

• Does your browser and operating system perform the appropriate turns and rotation of the spherical image (i.e. turn the smartphone horizontally or vertically and check if the VR image in AFrame turns according to the 360 degree image?
• Try with different browsers (e.g. Chrome, Firefox, Safari, ... on Android and iOS)

External Links

• WikiCommons2AFrame to create links for Wikiversity and Wikipedia for 360 Degree Images in AFrame

See also

• Hugin Create spherical 360-degree images with your own camera
• Real World Lab
• AppLSAC
• Equirectangular Projection
• 3D Modelling/Create 3D Models/360-Degree AFrame