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