Definition
Showing 3D models by scanning a 2D image
Goal: Allow visitors of the Lowe Museum to see a 3D representation of a mask by scanning an informational sheet.
Challenges
- Finding the right tools to develop with (AR.JS, Three.JS, A-Frame)
- Finding the right image tracking method (Hiro marker, QR code, NFT Marker, Barcode)
- Cleaning up the 3D models (Reducing the poly count of the models to render on mobile devices, adjusting model x-y-z transform values)
- Finding a way to host the project without FTP access to the UM website
- Keeping the 3D models in the same location as they were last scanned if the image stopped being tracked
- Creating a panel element to show information about the model
Solutions
- Used A-Frame to develop the project
- Used the Barcode method to recognize images, and edited the original information sheets to include the barcodes
- Cleaned up the 3D models using Blender, and re-exported them as .glb files
- Hosted the project on git and used git-lfs for storing large assets
- Used three.js with a-frame to get the object’s world position and tracking status of each marker
.png){kind=icon}