03 Loader Functions and Helpers
Here’s a brief summary of the third session:
Objective: Refactor the code to efficiently handle multiple 3D models in the AR flashcard application without creating multiple GLTF loader instances.
Creating a Helper Function:
Developed a loadGltf helper function that accepts a file path as a parameter and returns a Promise.
This function uses GLTFLoader to load 3D models asynchronously.
The helper function streamlines loading models by avoiding redundant code.
Refactoring the Code:
Replaced individual GLTF loader instances with the loadGltf helper function.
Simplified the main code by removing unnecessary loader declarations.
Adjusted the code to use await with the helper function for loading models.
Utilizing an Existing Loader Module:
Introduced a pre-existing loader.js file from the libs folder containing common loader functions.
Imported the loadGltf function from loader.js to further optimize the code.
Removed the manual import of GLTFLoader since it's handled within loader.js.
Testing the Application:
Tested the application to confirm the airplane model appears when the "A" flashcard is scanned.
Noticed that the "B" and "C" flashcards do not display any models because additional anchors are not yet set up.
Next Steps:
Plan to add additional anchors (anchor1, anchor2) and corresponding functions to handle multiple target images.
Will work on adding different 3D models for each flashcard in the upcoming session.
The session focused on code optimization by creating reusable functions and preparing the application to handle multiple models efficiently.
main.js code file
https://drive.google.com/file/d/13p0U...
loader.js file
https://drive.google.com/file/d/1U9AD...