3D Modelling/Create 3D Models/Wiki 360 Degree AFrame
![](http://upload.wikimedia.org/wikiversity/en/thumb/4/41/Aframe360image.png/300px-Aframe360image.png)
![](http://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Hugin_result_in_aframe.png/300px-Hugin_result_in_aframe.png)
![](http://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Equirectangular_sphere.png/220px-Equirectangular_sphere.png)
![](http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Equirectangular-projection.jpg/220px-Equirectangular-projection.jpg)
![](http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/F%C3%B6rderturm_Zeche_Holland_Panorama.jpg/220px-F%C3%B6rderturm_Zeche_Holland_Panorama.jpg)
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.
Learning Task[edit | edit source]
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
- about the equirectangular images,
- explore the 360 image in Aframe,
- use a equirectangular image in WikiCommons in AFrame and finally
- use and create your own 360 image in AFrame
Now we start with the analysis of equirectangular images:
- (Search 360o-Images) Search for equirectangular images in WikiCommons or one of the following images
- (WikiCommons2AFrame) Start the link creator for the Aframe and copy the Filename into WikiCommons4Aframe
- (WikiCommons) Aldara_parks.jpg -- Generated Link for 360o-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 360o-Image
- (WebLink) Saumarkt Karlsruhe-Durlach, Germany with https://niebert.github.io/HuginSample/img/durlach_saumarkt.jpg -- Generated Link for 360o-Image
- (Text in AFrame) Edit the visible text in the 360o-Image, the color, the position, ... and then display the the 360o-Image with button.
- (Copy URL) Copy the link into the Wikiversity where you need a 360o-Image.
- (Real World Lab) Explore the concept of a Real World Lab and define the application of 360o-Images for additional digital augmentation of a participatory environment of the Real World Lab.
Test 360-Degree Images with your Smartphone[edit | edit source]
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[edit | edit source]
- WikiCommons2AFrame to create links for Wikiversity and Wikipedia for 360 Degree Images in AFrame
See also[edit | edit source]
- Hugin Create spherical 360-degree images with your own camera
- Real World Lab
- AppLSAC
- Equirectangular Projection
- 3D Modelling/Create 3D Models/360-Degree AFrame