This repository applies link traversal concept on 360 degree images in AFrame.
As 360 degree images 4 images of the river Rhine close to Cologne/Rodenkirchen in Germany were used:
- Rheinauen - Cologne 1 - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
- Rheinauen - Cologne 2 - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
- Rheinauen - Cologne 3 - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
- Rheinauen - Cologne 4 - Equirectangular Image - image is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
With the link-traversal approach users are able to navigate from one location to another location. Every single 360 degree images is used for a single location. The implementation of navigation in this example uses the Aframe tag a-link
and the "sky" is generated with the equirectangular images, that are projected on a sphere. The objective of this repository is to provide a basic example for Wikiversity learning resource for 3D modelling and web-based exploratory Aframe environment for Real World Labs. The link traversal approach runs offline in a browser. For creating your 360 degree image you can use Hugin or e.g. specific dual fish eye cameras. See repository HuginSample, Wikiversity Learning Resource about 3D modelling and Aframe.
This example is based on the link-traversal
example of Aframe - see https://aframe.io/aframe/examples/showcase/link-traversal/index.html
You can also explore the basic concept of using AFrame
models and AR.js
for location based an marker based Augmented Reality
For adding 3D object on markers and generating basic 3D scenes on Markers you can use JSON3D4Aframe. Geometric element can be placed in a scene with 360 degree images. The learning objective focuses on a mathematical coordinate system an basic mathematical operations like rotation and moving of geometric primitives in a 3D scene.
See example https://niebert.github.io/JSON3D4Aframe/mods3d/water_molecule_sky_aframe.html