AR.js - Aframe - 3D models

AR.js - Augemented Reality

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

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.

Moving Object in Arame

The following examples shows how to move an object with a convex combination in the 3D domain.

Box - Move and Rotate with Hiro-Marker.
Box - Move and Rotate with convex combination of order 1
Box - Move and Rotate with convex combination of order 2
Box - Move and Rotate with convex combination of order 3

Moving Object in Aframe in Panorama 360

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