VR-Art-Gallery is a full stack, mobile-responsive, virtual reality application built in React and deployed in Preact where users can upload images into their own custom art galleries to display to the world. As a user, you customize your two-story gallery with texture presets for the floors and walls, and choose your own gallery music (all songs were performed by Kevin Macleod). Additionally, you can favorite other galleries, share their links, or create private galleries that are only accessible by the link you provide.
- A-Frame
- aframe-extras
- aframe-physics-system
- aframe-react
- aframe-room-component
- aframe-star-system-component
The foundation for the 3D environment was built in A-frame with aframe-react serving as a proxy between the aframe framework and react library. The aframe-physics-system, as well as aframe-extras, were implemented for collision detection between the user and entities in addition to providing a gravitational force for when the user drops down from the 2nd floor to the first. The aframe-room-component was used to build the 2D dimensional planes for the first-floor and walls of the gallery, which also allowed for the repetition of repeating textures for a more realistic, and less stretched, appearance of the user-selected presets. The aframe-star-system-component provides the spherical backdrop and populates it with star-like particles. All entities within this application were either imported 3D models, entirely free and under the royalty free license from turboSquid, imported repeating-texture files, or built with aframe.registerComponent (Clock).
- attr-accept
- aws-sdk
- uuid
- react-dropzone
Users are able to add images to their gallery thumbnails, as well as populate their gallery, using the react-dropzone on the client-side in combination with aws-sdk in the server - setting up a connection between the client and amazon S3 bucket. Those images, presets, and captions are then retrieved using the techs listed below.
- bcryptjs
- axios
- dotenv
- massive
Bcryptjs was used for salting and hashing user-created passwords for securely registered accounts, and all sensitive keys, passwords, and related information is stored in dotenv.
Axios was used for making client to server-side calls, and massive was used for connecting my server-side to the database.
- preact
- preact-compat
- prop-types
- react
- react-dom
- react-redux
- react-router-dom
- react-scripts
- redux
As mentioned in the opening description, this application was built in react and therefore contains all of the same scripts as a react app; however, the deployed application is in preact using preact-compat alias in the package-json. React-router-dom is used for redirected users from landing-page to lobby as well as anyone's gallery by taking in the author and gallery name as params. Redux was implemented as a solution to a run-time error in passing image URLs in the mounting of the ArtGallery component to the assets file which contains the portrait entities populating the gallery.
- Pagination
- Notifications (Favorites❤️, Sharing🤝)
- Search Filters
- Portal Hopping
- Gallery Jams🎵
A-Frame has a built in link entity that functions identically to an anchor tag and allows users to traverse from a-scene (3D environment) to a-scene; however, we found this incompatible within the react library, specifically with react-router-dom, and we re-created the shader and portal entity without the link functionality and simply redirected the user programtically with react-router's history. The user simply has to left-click entities in order to interact with them: Stereo, Exit Door (redirects to landing page), and Portal.
Make sure that "Hardware Acceleration" is enabled if you are using Google Chrome. You can enable this setting by doing the following:
- Click the 3 circles in the top right corner of the window
- Click on settings
- Scroll down and click on advanced
- Enable "Use hardware acceleration when available"
- Click on the "Relaunch" button that appears
This application has been tested for performance in Edge, Firefox, and Chrome.
- Make Gallery multi-network and supports audio chat.
- Notifications tab so users can get statistics on views, favorites, shares, and who is looking at their galleries specifically.
- Built in Messages tab so users can message one another within Lobby/Landing Page - ostensibly in 3D Gallery as well.
- Expand presets so that users are not limited to built-in application presets.