The project opens with a switch just like an electric switch to demanding a click to proceed. Next, it opens another skybox with two circular links to other skyboxes. To decide which one to select, there's a cube in the primary that acts a hotspot.

Each of the three skyboxes that you'll see after switching on the switch has exactly two links to the other skyboxes. Some text is there in each of the skyboxes. That's all for now.

Note: Please run the file with an active internet connection for the fonts to load

The Objective of this assignment is to create a Virtual WebVR experience using A-Frame through which y'all will get to familiarize yourself with the basic functioning of A-Frame and learn to create photospheres, assigning controls to buttons, interaction with objects. The individual tasks will be - Stepwise, they would carry scores, and shall to the point 🎯... Don't tryna copy someone else's work..(we can easily figure out 😇).

Get started with reading the docs at Aframe Docs
Follow along this man's playlist Aframe- Youtube
And this one too Aframe- Youtube

This will be enough for the first assignment...

These individual tasks will be stepwise and will carry scores... Your knowledge of aframe will be directly proportional to how many of them you can complete... The more the better for you 😉

Create a Skybox. Check for an equirectangular image that you can find from Flickr... Then create something like this : 360image... Add cursor and camera to it...

Linking 360 images: Creating the Virtual Tour Experience can be simple enough if you can link one 360 image with another to create something like this:

Visit here Video Website

Hint: this can be done through javascript

Adding hotspots. A hotspot it some sort of object i.e. <a-image> , <a-box> etc... through which you can interact. You may have seen interaction with objects for animation and might have tried too.. But for this specific task you have to create info boxes as shown (not exactly the same :p):

Visit here Video Website

You can use <a-text>, maybe use some <a-image> for the eye icon, use JS for playing with opacity... Best is to do the way you like! , just don't use simple HTML Tags (<div> <p>) as they don't show up on VR-Headset and also avoid CSS Styling other than the ones supported by A-Frame (read docs), use JS instead...

Show your skills. Just come up with what you have learnt and give final touches to this assignment... There's literally no restriction, you can add objects, create button, maybe introduce a videosphere!!!, make it as attractive as you can, you'll be judged on the basis of concept and not design. Just remember to add comments to show what extra you have done and it's functionality, push commits time to time and atleast after each task, preferably more..

• Fork this repo.
• Clone it to your Desktop or to some folder.
• Make necessary changes and complete the assignment.
• See git status to know the changes you made.
• Once sure perform git add -u :/ , git add * :/
• Then with proper commits push those changes i.e. git commit -m "my change" and then git push
• These changes have taken place in your forked repo only.
• Send pull request for us to see and review those changes.

Deadline: Tuesday June 2nd at 11:59 PM

That's it! Happy Aframing...