Spin-Spin-Away - First Three.js Project

About the project

[(https://spinspinaway.netlify.app)]

PS. Because of a bug, the 3D meshes and GSAP animations aren't showing. Currently working on it so in the meantime, kindly check it out on my Codepen instead: (https://codepen.io/Nushen/full/qBLbBBG)

My mentor, André Elias (thank you for the challenge), gave me a challenge to create a sphere and a cube side by side using Three.js: a Javascript animation library. Pretty straightforward and simple right? Yes and No. Anyway, I ended up doing more than what I was challenged to do because Three.js is just that fun!

Side note: Thanks to Emilian Kasemi as well, for helping me set up Three.js.

What extra thing did I do

• Set up Orbit controls so you can drag, zoom in, zoom out, and rotate the meshes (cube and sphere), as you will

• Used MeshNormalMaterial instead of MeshBasicMaterial so I could target wireframes and view the meshes differently. And also because I wanted to play around with what I was learning from the [documentation][(https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene)]

• Added a nav bar, header, and social icons and used GSAP timeline to animate them as well as the meshes

Tech Stack Used

• HTML
• CSS
• JavaScript (Three.js)
• GSAP

Version Control & Deployment

• Netlify
• Git

Cool Features

• Draggable, shrinkable, zoom in & out-"able" 3D mesh
• 3D meshes zoom from out to in on reload and rotate infinitely
• Animated Nav bar, h1, and socials

Typography

• 'Poppins', sans-serif

Color

• #000
• #fff

Icons

• https://iconmonstr.com/

Layout

Developer's Log

• For a first project, I would say I did a lot of research than I thought I would and fixed more bugs than I have ever in my entire programming PS. I still have another bug to fix haha. But hey, that's what makes this fun rightt??

How to access the website

(https://czacawealth.netlify.app/)

• Just have fun playing with the meshes by zooming in and out and dragging them around.

To clone repository

Pré-requisitos: npm / yarn

# clone repository
git clone https://github.com/wealthczarena/Spin-Spin-Away.git

# enter your folder name
cd your-folder-name

# install dependencies
yarn install

# execute the project
yarn start

Autor

Czarena Wealth

(https://www.linkedin.com/in/czarenawealth/)