https://github.com/cynthiachiu/3D-Art-Gallery

An interactive, 3D art gallery featuring paintings and sketchings that I have done over the past while. This is a React-based application that leverages React-Three-Fiber to render my art in 3D with moving spotlights, smooth horizontal scrolling, interactive mouse movement, realistic lighting with shadows, and postprocessing to add effects to the scene including noise and filters.
https://github.com/cynthiachiu/3D-Art-Gallery

3d art gallery horizontal-scrolling light mouse-movement react react-three-drei react-three-fiber shadows spotlight

Last synced: about 2 months ago
JSON representation

An interactive, 3D art gallery featuring paintings and sketchings that I have done over the past while. This is a React-based application that leverages React-Three-Fiber to render my art in 3D with moving spotlights, smooth horizontal scrolling, interactive mouse movement, realistic lighting with shadows, and postprocessing to add effects to the scene including noise and filters.

• Host: GitHub
• URL: https://github.com/cynthiachiu/3D-Art-Gallery
• Owner: cynthiachiu
• Created: 2022-05-06T21:45:02.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-07T21:23:08.000Z (over 2 years ago)
• Last Synced: 2024-11-08T16:08:12.283Z (about 2 months ago)
• Topics: 3d, art, gallery, horizontal-scrolling, light, mouse-movement, react, react-three-drei, react-three-fiber, shadows, spotlight
• Language: JavaScript
• Homepage: https://cynthia-3d-art-gallery.netlify.app/
• Size: 14.4 MB
• Stars: 28
• Watchers: 1
• Forks: 7
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 

  


   

  Demo



Art Gallery




  

  

  

  

  

  

  





  About   |   

  Features   |  

  Technologies   |  

  Requirements   |  

  Starting   |  

  License   |  

  Author






## :dart: About ##

An interactive, 3D art gallery featuring paintings and sketchings that I have done over the past while. This is a React-based application that leverages React-Three-Fiber to render my art in 3D with moving spotlights, smooth horizontal scrolling, interactive mouse movement, realistic lighting with shadows, and postprocessing to add effects to the scene including noise and filters.

See and play with my deployed demo at: https://cynthia-3d-art-gallery.netlify.app/

https://user-images.githubusercontent.com/20048911/167222076-aeb6a9a5-eb95-452f-88c9-d582e9ce5bf2.mp4

## :sparkles: Features ##

:heavy_check_mark: React-based application using 3D web technology;\

:heavy_check_mark: 3D Rendering of my paintings and sketches;\

:heavy_check_mark: Interactive mouse movement;\

:heavy_check_mark: Moving spotlights that highlight the current piece of art and cast realistic shadows;\

:heavy_check_mark: Postprocessing scene effects;

## :rocket: Technologies ##

The following tools were used in this project:

- [React-Three-Fiber](https://github.com/pmndrs/react-three-fiber)

- [React-Three-Drei](https://github.com/pmndrs/drei)

- [Node.js](https://nodejs.org/en/)

- [React](https://pt-br.reactjs.org/)

## :white_check_mark: Requirements ##

Before starting :checkered_flag:, you need to have [Git](https://git-scm.com) and [Node](https://nodejs.org/en/) installed.

## :checkered_flag: Starting ##

```bash

# Clone this project

$ git clone https://github.com/cynthiachiu/3D-Art-Gallery

# Access

$ cd 3D-Art-Gallery

# Install dependencies

$ npm i

# Run the project

$ npm start

# The server will initialize in the 

```

## :memo: License ##

This project is under license from MIT. For more details, see the [LICENSE](LICENSE.md) file.

Made with :heart: by cynthiachiu

 

Back to top