01 Setup Project with Multiple Image Targets

Here’s a brief summary of the AR flashcard project described:

Objective: Create an AR flashcard app for kindergarten students where specific 3D models (like an airplane, ball, and car) appear when a teacher shows corresponding flashcards (A, B, C) using a mobile or tablet.
Project Customization: Students can replace A, B, C cards with other alphabets (e.g., D for Duck, E for Elephant, F for Fish) using custom models.
Assets: A provided zip file contains folders for models (Airplane, Ball, Car), images (flashcards), JavaScript libraries, and sound effects.
Development Tools:
Use Notepad++ or Visual Studio Code for coding.
Notepad++: Configure settings like dark mode for better readability.
HTML and JavaScript Setup:
Create index.html and main.js files.
index.html: Set up the structure, include meta tags, scripts (AR library, GLTF loader, main.js), and style elements.
main.js: Import GLTF loader and 3.js for rendering external models.
AR Targets Setup: Use the MindAR website to create image target codes for tracking multiple flashcards (A, B, C), then download and integrate the target code into the project.
Web Server Setup:
Run a local server on port 8080 to test the app.
Use Ngrok to make the local server accessible on other devices for testing.
The app will be further refined and tested in upcoming sessions.

resource files for this project can be downloaded from the below link

https://drive.google.com/file/d/116ahzpW6tcgVKp4TJppePxVUhwb7FtXb/view?usp=sharing

Completed index.html file

https://drive.google.com/file/d/1gtSPEhYXfMRZJHddy7Sw7CDfnlX-S3BX/view?usp=sharing

main.js completed code file

https://drive.google.com/file/d/1rdy07kOWSWc9iqPACgOdhTE0yeDThKn2/view?usp=sharing

Видео 01 Setup Project with Multiple Image Targets канала Sudheendra S G