Skip to content

A react built VR application where users can upload and share their images in a 3D space.

Notifications You must be signed in to change notification settings

DomenicoGranito/VR-Art-Gallery

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

What is VR-Art-Gallery?

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.

Technologies

Virtual Reality Techs:

  • 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).

Amazon S3 Relevant Techs:

  • attr-accept
  • aws-sdk
  • uuid
  • react-dropzone
Dropzone in creating a gallery

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.

Client to Backend Techs:

  • bcryptjs
  • axios
  • dotenv
  • massive
Register view

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.

Core Application Techs:

  • 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.

Stylistic Features

  • Pagination
  • Notifications (Favorites❤️, Sharing🤝)
Pagination on landing page

Functional Features

  • Search Filters
  • Portal Hopping
  • Gallery Jams🎵
Search bars on landing page, favorites, and galleries Portal Hop 3D stereo

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.

Performance Issues

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.

Creators

Brady Snuggs & Jake Rowland

Stretch Goals

  • 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.

About

A react built VR application where users can upload and share their images in a 3D space.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 81.3%
  • CSS 18.0%
  • Other 0.7%