This repository features an exhibit of AR glasses that allows the user to see an AR Buzz come to life when approaching and putting on the AR glasses.
How to Run:
- Run this command on the command line while in the root folder of this project:
npm install && npm start
- A new tab should open in your web broswer. Bypass permissions when prompted.
- Open up the developer console to see output from the collision detection component.
- Use the arrows to move the user/camera toward the AR glasses, and watch an AR Buzz come to life!
File Information:
- The
collision-detector.js
file is for the A-Frame collision detection component. - The buzz.blend and buzz.glb files are for the 3D model of Buzz.
- The
original_glasses.blend
and theoriginal_glasses.glb
files are for the original 3D model of the glasses. Theglasses.blend
and theglasses.glb
files are for the 3D model of the glasses that was modified from the original 3D model so it could successfully be rendered in the A-Frame scene. See the to-do below. - The
scene.blend
file is for the 3D model that contains the glasses and Buzz. - The
index.html
file is where the A-Frame scene is set up and rendered.
Credits:
- The A-Frame code was written by Akshay Sathiya and built upon examples and existing code from the A-Frame documentation (https://aframe.io/docs/1.2.0/introduction/) and Mozilla's trigger volume compoment (https://github.com/mozilla/hubs/blob/hubs-cloud/src/components/trigger-volume.js).
- The 3D model of Buzz was created by William Colin Freeman.
- The 3D model of the AR glasses was developed by Andrew Nazareth (
original_glasses.blend
,original_glasses.glb
) and was slightly modified by Akshay Sathiya (glasses.blend
,glasses.glb
) so that it could be successfully imported into the A-Frame scene. - The Gallery Content team working on the Futures Room, which this exhibit will be placed in, was led by Jisu Park.
To-do:
- Get the colors and the textures of the original glasses model (
original_glasses.blend
,original_glasses.glb
) to appear in the A-Frame scene. The original glasses model shows up misshapen and all black in the A-Frame scene, without the colors and textures that are present in Blender. When rendered in the A-Frame scene, the modified glasses model (glasses.blend
,glasses.glb
) preserves the shape, but not the colors or textures, of the original glasses model. To test out the different glasses models, simply go to line 30 of the index.html file and change thesrc="./glasses.glb"
tosrc="./original_glasses.glb"
.