/the-gallery

Primary LanguageJavaScript

The Gallery

app preview

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

  1. Create a local directory on your machine
  2. Run the following code in your command line to navigate into that directory:
$ cd ~/your-directory-name-here

  1. Copy the SSH key from this GitHub repository git@github.com:deanssmart/the-gallery.git

  2. 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>
  1. Navigate to your new app directory (the app name you just picked):
$ cd app-name
  1. Install the dependencies:
npm i
  1. Run the following command to launch the app in your default browser at http://localhost:3000/:
npm start
  1. Enjoy

Credits

3D Models (Sketchfab)

Textures