https://github.com/shaqdeff/the-three-graces
This is a single page site based on Tom Bogner's Dribbble shot The Three Graces. It utilizes Three.js to render the 3D model and apply the spotlight effect.
https://github.com/shaqdeff/the-three-graces
css html javascript threejs webgl webpack
Last synced: 10 months ago
JSON representation
This is a single page site based on Tom Bogner's Dribbble shot The Three Graces. It utilizes Three.js to render the 3D model and apply the spotlight effect.
- Host: GitHub
- URL: https://github.com/shaqdeff/the-three-graces
- Owner: shaqdeff
- License: mit
- Created: 2023-11-21T12:39:55.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-22T05:34:48.000Z (over 2 years ago)
- Last Synced: 2025-04-12T05:12:13.666Z (about 1 year ago)
- Topics: css, html, javascript, threejs, webgl, webpack
- Language: JavaScript
- Homepage: https://three-graces.netlify.app/
- Size: 5.53 MB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# The Three Graces
This is a single page site based on Tom Bogner's Dribbble shot [The Three Graces](https://dribbble.com/shots/6767548-The-Three-Graces-Concept). It utilizes Three.js to render the 3D model and apply the spotlight effect.
## Built With
- Three.js
- JavaScript
- HTML
- CSS
- Webpack
## Live Demo
- Click [here](https://three-graces.netlify.app/) to view the live demo.
## How To Use:
To get started, follow these simple steps:
### Prerequisites
Make sure you have node `16.0.0` or higher and npm `9.0.0` or higher installed.
### Setup
- With git, clone the code to your machine, or download a ZIP of all the files directly.
- [Download the ZIP file from this location](https://github.com/shaqdeff/The-Three-Graces/archive/refs/heads/main.zip) or run the following [git](https://git-scm.com/) command to clone the files to your machine:
```
git clone https://github.com/shaqdeff/The-Three-Graces.git
```
- Once the files are on your machine, open the **Next-Internalization** folder in [Visual Studio Code](https://code.visualstudio.com/download).
```
cd The-Three-Graces && code .
```
## Install
- After opening the files in Visual Studio Code, open the **VS Code** integrated terminal and run the following commands:
```
npm install
```
This will install all the packages and dependencies used in the project.
## Usage
- Run the following command to start a local server:
```
npm run dev
```
This will open up the project on a browser on `http://localhost:8080` / `http://192.168.0.12:8080`
## Build
- To create a production build:
```
npm run build
```
## Resources
- [Ektogamat ThreeJS Boilerplate](https://github.com/ektogamat/threejs-andy-boilerplate)
- [The Three Graces — Concept](https://dribbble.com/shots/6767548-The-Three-Graces-Concept)
## Authors
👤 **Shaquille Ndunda**
- GitHub: [@shaqdeff](https://github.com/shaqdeff)
- Twitter: [@shaquillendunda](https://twitter.com/shaquillendunda)
- LinkedIn: [Shaquille Ndunda](https://www.linkedin.com/in/shaquille-ndunda)
## Feedback and Contributions
If you have any feedback, suggestions, or would like to contribute to this project, your involvement is highly valued. Feel free to open an [issue](../../issues/) or submit a pull request with your ideas and enhancements.
Happy coding and showcasing!
## Show your support
Give a ⭐️ if you like this project!