AR.js - Aframe - 3D models

Repository - litspatz4c

AR.js - Augemented Reality

The following embedding of 3D models from the repository litspatz4c are implemented with the library AR.js and Aframe. The files from this repository can be downloaded as ZIP-file.

Coordinate System - Testing

AR.js - Bamberg

Bamberg Animation 1 - Ordwin hat eine Idee und läuft dann zum Floß - QR-Code
Bamberg Animation 2 - Ordwin startet mit dem Floß - QR-Code
Bamberg Animation 3 - Ordwin fährt hinter der Schatztruhe her - QR-Code
Bamberg Animation 4 - Ordwin holt die Truhe an der Bibliothek ein - QR-Code

AR.js -Chemnitz

AR.js - Geolocation Test - Demo-Files

Landau Uni - ARGEO Test

AR.js - Static - Demo-Files

elf_wizard_small.html
running_boy.html - GLB Object is animated, but the entity is static on the Hiro-Marker.
mei.html - GLB Object is animated, but the entity is static on the Hiro-Marker.
wizard_staff.html URL Source: https://sketchfab.com/3d-models/wizard-staff-873f596fb3cc44998cb75a3dce60181f - License Info - Wizzard stick with the name "Wizard Staff" by tpbleu is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
wizard_hat_ar_hiro.html and wizard_hat_aframe.html created with JSON3D4Aframe - JSON Source File
running_boy.html - GLB Object is animated, showing a joyful jump of a protagonist in a story
majd_the_boy.html - GLB Object is animated, showing
argon_raft.html - GLB Object is raft, that can float on the river by using an animation
old_treasure_chest.html - GLB Object is animated, showing a treasure chest
treasure_chest_cutted.html - GLB Object is cutted treasure chest, just showing the top of the treasure chest floating on river by using the animation library

AR.js - Moving - Demo-Files

The following example files move entities of the AR scene in the 3D space.

move360/ar_move_rotate_box_hiro.html - Moving and rotating a red box on Hiro-Marker
move360/ar_move_elf_wizard_small_hiro.html apply aframe-object-mover.js on static GLB object without animation
move360/ar_move_running_boy_hiro.html - GLB Object is animated and moving in AR scene on the Hiro-Marker.
move360/ar_move_mei_hiro.html - GLB Object is animated and moving in AR scene on the Hiro-Marker.
ar_move_wizard_staff_hiro.html URL Source: https://sketchfab.com/3d-models/wizard-staff-873f596fb3cc44998cb75a3dce60181f - License Info - Wizzard stick with the name "Wizard Staff" by tpbleu is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
ar_move_wizard_hat_hiro.html 3D Model Source: wizard_hat.json for JSON3d4Aframe

Aframe - VR Scenes

Aframe is a web framework for building 3D experiences, that extends HTML syntax with the aframe library to create 3D worlds with HTML tags and entity-components like GLB-files creates with OpenSource Blender The 3D models can be viewed with VR-headset, mobile phone and desktop PC. The following use cases in Aframe take equirectangular images and use them in a VR scene as 360 degree sky image.

Aframe Panorama 360 - Bamberg

Created with WikiCommons2AFrame from recorded [equirectangular 360 degree image](https://en.wikiversity.org/wiki/Equirectangular_projection). Approach based on AFrame VR.

Aframe Panorama 360 - Chemnitz

Created with WikiCommons2AFrame from recorded [equirectangular 360 degree image](https://en.wikiversity.org/wiki/Equirectangular_projection). Approach based on AFrame VR.

Animated GLB in Arame

The following examples shows how to embed an animated GLB with a equirectangular image as sky in the 3D domain.

Animated running boy with equirectangular image as sky.

Moving Object in Arame

Moving Object in Aframe in Panorama 360

Created with WikiCommons2AFrame from recorded equirectangular 360 degree image. Approach based on AFrame VR.

Generators and Tools

HTML4Aframe
JSON3D4Aframe
Navigation with 360-degree images in Aframe navigation for Aframe and move between Aframe scenes.
WikiCommons2Aframe
Select Geolocation for AR-VR Scence
HTML4AFRAME - Create Aframe, AR, AR-Geolocation with one WebApp

Repository - litspatz4c