Build Interactive AR Tutor App

Watch this self-guided tutorial on Build Interactive AR Tutor App. This includes an understanding of the Aframe library which help in building the web framework for Augmented Reality experiences along with the use of different 3D models and use of Markers to build your own Build Interactive AR Tutor App. Completed the training? Apply for your Participation Certificate and Achievement Certificate now! Apply for Certification Tag us on social media with a screenshot or video of your working application for a chance to be featured as an Open Source Champion and get a verified badge.

For Windows OS, 1. Download, extract and double-click kit installer file to install the kit. Note: Do ensure to extract the zip file before running it. 2. When you're prompted during the installation of the kit, press Y to launch the app automatically, and this one will open the application in a browser with a URL address referring to folder structure. E.g. :(c:/temp/index.html) 3. But for 3d images that are put inside the application to work, you should deploy the application in your local webserver only. 4. To run the application in a local environment, You can create a local HTTP server with Python by using the command "python -m http.server 8000," or you can deploy this in any other web server also. 5. If you plan to use a Python-based web server and Python is not available on your machine, Click here to install Python. On that page, go down to find relevantly installable. For Windows OS, "Windows installer (64-bit) / Windows installer (32-bit)" is recommended depending on your system. 6. Run the application in your local webserver. 7. Now, the application can be accessed using http://localhost:8000 Note: use the port where your web server is running.

Visual studio code IDE is used for this development. It becomes easy to modify the code and the configuration with Visual studio code.

A-Frame is an open-source web framework used for building Augmented reality (AR) experiences. In the spirit of open-source software development, jQuery plays a vital role in community code contribution. The below library could be used to create jQuery scripts and respective models.

The library added in this section is primarily used to create this Immersive AR Learning project. The entire solution is available as a package to download from the source code repository.

Follow below instructions to run the solution: 1. Locate and open the respective extracted zip file. 2. Open the command prompt and start your local HTTP server with Python by using the command "python -m http.server 8000," or you can deploy this in any other web server also. 3. Use the "G" marker, i.e., available in the assets folder or you can download here. Show the marker to the application, and then see the 3d image in the browser. (can use the print-out-based marker or marker can be downloaded in your mobile and can also show the same). 4. The application currently has 15 models. Refer the same under < a-assets > in the "index.html" file. You can replace any of the 3d models with your own model. 5. Use left arrow and right arrow available on the screen to experience the models. Zoom in option is also available in the application. For changing the images for your topics, Create your own 3d images related to the themes that you would like to explain with AR features. 1. To add your 3d models, follow below procedure: a. The 3d models should be in the format of ".gltf" b. If your 3d model contains a single file, then place the same directly in the assets folder i.e., available under the "AR-Alphabets-master" folder otherwise if your 3d model contains multiple files, then create a folder with the respective name inside assets and place the files in the folder. c. Then go to the "index.html" file and update the src attribute accordingly Example :- src="assets/3d-model-name.gltf" or src="assets/your-folder-name/3d-model-name.gltf" d. To place your 3d model, some more helpful comments are available under < a-assets > in "index.html" file Note:- To experience your 3d models, you should run the application on your local web server mode only. For information about creating the 3d models, kindly refer to the Creation of 3d Model Repository section. 2. You can change the size of the 3d models by adjusting the scale values in "main.js" (eg:-scale: "0.2 0.2 0.2") 3. You can also change the voice assistant corresponding to the 3d image by changing the description name in "main.js" (eg:-description: "Earth") 4. Once changes are done, make sure to restart the application for the changes to be effective. 5. Now, you will experience your theme with AR in your Environment! 6. For more details or clarification please refer this Link

1. You can create your own 3d models by using open source IDE like unity3d, Blender, AutoCAD or you can get 3d models from open source websites given below a. Creazilla, Eg:- Camel b.Sketchfab Note:- Kindly check the license of the 3d models before using them. 2. Make sure that 3d models should be in the form of ".gltf" format, if not so kindly change them to the respective format. You can refer to the below links to convert your 3d models in the ".gltf" format. a.fbx-to-gltf b.obj-to-gltf

1. While running batch file, if you encounter Windows protection alert, select More info --> Run anyway 2. During kit installer, if you encounter a Windows security alert , click Allow

If you need help to use this kit, you can email us at kandi.support@openweaver.com or direct message us on Twitter Message @OpenWeaverInc.