Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ektogamat/threejs-graces
In this project, I wanted to show that creating a fancy design like this using #threejs is not as difficult as it looks. It has only 240 lines of code. The original design was created by Tom Bogner @dastom on Dribble: https://dribbble.com/shots/6767548-The-Three-Graces-Concept.
https://github.com/ektogamat/threejs-graces
creative-coding threejs threejs-example webgl
Last synced: 6 days ago
JSON representation
In this project, I wanted to show that creating a fancy design like this using #threejs is not as difficult as it looks. It has only 240 lines of code. The original design was created by Tom Bogner @dastom on Dribble: https://dribbble.com/shots/6767548-The-Three-Graces-Concept.
- Host: GitHub
- URL: https://github.com/ektogamat/threejs-graces
- Owner: ektogamat
- License: other
- Created: 2022-05-15T21:36:49.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-12T17:10:44.000Z (over 1 year ago)
- Last Synced: 2025-01-17T04:06:38.444Z (13 days ago)
- Topics: creative-coding, threejs, threejs-example, webgl
- Language: JavaScript
- Homepage:
- Size: 1.89 MB
- Stars: 259
- Watchers: 1
- Forks: 70
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Ektogamat Three Graces Design Concept using threejs
by Anderson Mancini
In this project, I wanted to show that creating a fancy design like this using #threejs is not as difficult as it looks. It has only 240 lines of code. The original design was created by Tom Bogner @dastom on Dribble: https://dribbble.com/shots/6767548-The-Three-Graces-Concept.
This project uses Threejs in vanillaJS with WebPack and is based on my boilerplate: https://github.com/ektogamat/threejs-andy-bolierplate. I think this could be easier to understand for those who isn't familiar with React Three Fiber yet (like myself).
# Live Link
Live: https://threejs-graces.tiiny.site/
# Getting Started
Download and install Node.js on your computer (https://nodejs.org/en/download/).
Then, open VSCODE, drag the project folder to it. Open VSCODE terminal and install dependencies (you need to do this only in the first time)
```
npm install
```
Run this command in your terminal to open a local server at localhost:8080
```
npm run dev
```
# Attribution
Original design created by Tom Bogner @dastom on Dribble: https://dribbble.com/shots/6767548-The-Three-Graces-Concept
The GLTF used in this example was made by 3DLadnik: https://sketchfab.com/3DLadnik
Released as CC-BY-4.0 by Sketchfab: https://sketchfab.com/3d-models/3d-printable-the-three-graces-58e0ae19e2984b86883edc41bf43415a
# Notes
Would be really appreciated if you are willing to give me a star here on GitHub 🎉 or buy me a coffee ☕ https://www.buymeacoffee.com/andersonmancini. The money will be used to produce more content about threejs or to buy new courses.