https://github.com/ivan-corporation/3d-planet-destroyer

3D planet destroyer with animation transitions 🌏 (PWA App with Firebase notifications support)
https://github.com/ivan-corporation/3d-planet-destroyer

3d 3d-animation drei firebase firebase-notifications framer-motion javascript navigation pwa react react-router-dom service-worker solar-system stepper styled-components three-fiber three-js typescript

Last synced: about 5 hours ago
JSON representation

3D planet destroyer with animation transitions 🌏 (PWA App with Firebase notifications support)

• Host: GitHub
• URL: https://github.com/ivan-corporation/3d-planet-destroyer
• Owner: Ivan-Corporation
• License: mit
• Created: 2022-01-08T04:52:27.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T01:20:03.000Z (over 1 year ago)
• Last Synced: 2023-03-05T12:43:40.637Z (over 1 year ago)
• Topics: 3d, 3d-animation, drei, firebase, firebase-notifications, framer-motion, javascript, navigation, pwa, react, react-router-dom, service-worker, solar-system, stepper, styled-components, three-fiber, three-js, typescript
• Language: TypeScript
• Homepage: https://planet-destroyer.netlify.app/
• Size: 157 MB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

 3D Planets destroyer 🌏

Project with very tricky animated transition and 3D support that can help you visualize our solar system in details ☀️, and even zoom on the planets (textures from NASA)











Videos about 3D in this website:




### EN 🌝 [YouTube video - "I created sun"](https://www.youtube.com/watch?v=DbWTAG9pBoU)

### RU 🌚 [Видео на YouTube - Создаём Плутон](https://www.youtube.com/watch?v=v73BxVUzjYQ)




Examples













PWA













## Todo



 Solar system planets with textures three.js ✔



 transition router with animation ✔



 Background filter in every image ✔



 onClick top section hide? ✔



 Pluto ✔



 Sun ✔



 Refactor DRY 



 Framer motion opacity 



 Earth atmosphere rotate like Venus 



 Responsive design for phone 



 TypeScript support to pages but not 3D 




 Down navigation bottom - mobile responsive (padding bottom more) 



 Check for some stepper (with router-DOM support) in left side? 






### Demo - https://planet-destroyer.netlify.app/