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: https://threejs-graces.tiiny.site/

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

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

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.