Row-Row-Tate - 2nd Three.js Project

3D child mesh rotating around parent mesh [(https://codepen.io/czaczar/full/jOXrxMx)]

About the project

This project is about creating two 3D meshes and making one of them rotate around the other by using the parent-child relationship. Although the challenge was directed to only the messages, I used this opportunity to practice CSS by adding a gradient background to the text and animating it using GSAP.

Special Thanks to André Elias for giving me this challenge

What extra thing did I do

• Gave the text a background with CSS and animated it into view on reload using GSAP.

Tech Stack Used

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

Version Control & Deployment

• Netlify
• Git

Typography

• 'Poppins', sans-serif

Color

• #000
• #fff
• --white: rgb(255, 255, 255);
• --purple: rgb(123, 31, 162);
• --violet: rgb(103, 58, 183);
• --pink: rgb(244, 143, 177);

Layout

Developer's Log

• Very interesting challenge and once again, I learned something different, especially with the text gradient, so YAY!

How to access the website

([https://codepen.io/czaczar/full/jOXrxMx])

• 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/Row-Row-Tate

# 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/)