The Gallery
View the app online
Open the live app in your browser with this link: https://deanssmart.github.io/the-gallery/
Intro
Interactive 3D art gallery to showcase some of my drawings and paintings
Technologies
- JavaScript
- Three.js
- React
- react-three-fiber
- JSX
- HTML/CSS
- Git (version managed)
- Blender
Functionality and Features
- First-person view and controls
- WASD movement
- MOUSE to look
- SHIFT to run
- SPACE to fly
- N to toggle between night and day
- P to toggle performance
- More features will be added... so watch this space
How to Use
- Click the center dot to allow the browser control of your pointer
- Use W to move forward, A to move left, D to move right and S to move backwards
- Use the mouse to look in the direction you want to move
- (If you've played any first-person shooters youll be familliar)
- Hold SHIFT to run (there is no security guard in this gallery)
- Hold SPACE to fly (because why not!)
- Press N at any time to toggle the environment between night and day
- If you have a slower laptop and the frame rate is a bit low press P, this will turn off all the spotlights on the paintings so should allow the app to runs smoother although it won't look as visually intended
- (I intend to bake the lighting at some point in the future)
Setup on your machine
- Create a local directory on your machine
- Run the following code in your command line to navigate into that directory:
$ cd ~/your-directory-name-here
-
Copy the SSH key from this GitHub repository
git@github.com:deanssmart/the-gallery.git
-
Run the following code in your command line to clone the repo to your machine (you can change the app-name to what you desire):
git clone git@github.com:deanssmart/the-gallery.git <app-name>
- Navigate to your new app directory (the app name you just picked):
$ cd app-name
- Install the dependencies:
npm i
- Run the following command to launch the app in your default browser at http://localhost:3000/:
npm start
- Enjoy
Credits
3D Models (Sketchfab)
- Adapted fancy picture frame from Jamie McFarlane https://skfb.ly/6QZpO
- Adapted square picture frame from Lonit https://skfb.ly/6WMFM
- Adapted long picture frame from ROOFUSMAN1976 https://skfb.ly/6SKu9
- Adapted Victorian window from expy https://skfb.ly/6qupO
- Adapted industrial set from feivelyn https://skfb.ly/6SqIT
- Parametric benches from decah https://skfb.ly/6qwEw & https://skfb.ly/6qvZD
Textures
- Grass texture from Simon Murray https://www.brusheezy.com/textures/20185-seamless-green-grass-textures
- Marble textures from ShareTextures https://opengameart.org/users/sharetextures
- Wall texture from Seme Design Lab http://www.texturise.club/2016/12/seamless-white-wall-paint-stucco.html
- Moon texture from Richard Andersson https://richardandersson.net/?p=331