Skip to content

TimeScape AR is an immersive Augmented Reality experience that brings together creatures from different timelines—prehistoric dinosaurs and mythical beasts—in one interactive scene. Built using A-Frame and AR.js, this web-based AR application lets users explore animated 3D models

Notifications You must be signed in to change notification settings

IT21826740/TimeScape-AR

Repository files navigation

🕒 TimeScape AR

TimeScape AR is an immersive Augmented Reality experience that brings together creatures from different timelines—prehistoric dinosaurs and mythical beasts—in one interactive scene. Built using A-Frame and AR.js, this web-based AR application lets users explore animated 3D models like the Diabolus Rex, Stegosaurus, Velociraptor, and Dragon using marker-based tracking.


📸 Demo

Open the project in a browser and point your camera at a Hiro marker to see the creatures come alive in AR.

TimeScape-AR.mp4

🦖 Featured 3D Models

  • 🐉 Dragon – A legendary creature from fantasy worlds
  • 🦕 Stegosaurus – A calm, armored herbivore from the Jurassic era
  • 🦖 Velociraptor – A quick, intelligent predator
  • 🦍 Diabolus Rex – A powerful hybrid dinosaur

All models are animated and scaled for realistic interaction using the animation-mixer component.


🔧 Technologies Used

Tech Description
A-Frame Web framework for building 3D/VR/AR scenes with HTML
AR.js Marker-based Augmented Reality for the web
GLTF/GLB 3D model format used for efficient asset rendering
aframe-extras Animation handling and helper components for A-Frame
HTML/CSS Basic structure and layout for the web interface

🗂 Folder Structure

TimeScape-AR/
├── index.html               # Main AR scene
├── dragon.gltf              # Dragon model
├── stegasaurus.gltf         # Stegosaurus model
├── velociraptor.gltf        # Velociraptor model
├── diabolus_rex.gltf        # Diabolus Rex model
├── textures/                # Texture assets 
└── README.md                # Project description

🧪 How to Run

  1. Clone or download the project folder.
  2. Open index.html in a WebAR-compatible browser (Chrome recommended).
  3. Use a printed or digital Hiro marker to view the models in AR.

You can print a Hiro marker from this link


🗺️ Scenario

In TimeScape AR, a tear in the space-time continuum has brought together dinosaurs and mythical creatures in a single distorted timeline. With the balance of nature disrupted, these creatures—once rulers of their own worlds—must now adapt, coexist, or clash in unfamiliar territory. You, the explorer, get a rare window into this chaotic fusion of history and legend.


💡 Future Enhancements

  • 🌿 Add environmental background (jungle, volcano, ruins)
  • 🎮 Include interactive controls (click to animate/sound)
  • 📱 Deploy on mobile via GitHub Pages or Netlify
  • 🧠 Add storytelling voiceover or text narration

📄 License

This project is for educational/demo purposes only. 3D assets belong to their respective creators and are used under their permitted licenses.


About

TimeScape AR is an immersive Augmented Reality experience that brings together creatures from different timelines—prehistoric dinosaurs and mythical beasts—in one interactive scene. Built using A-Frame and AR.js, this web-based AR application lets users explore animated 3D models

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages