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

From Wikiversity
Jump to navigation Jump to search
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

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

  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:

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)
[edit | edit source]

See also

[edit | edit source]


[edit | edit source]