Skip to content

Latest commit

 

History

History
65 lines (42 loc) · 2.65 KB

README.md

File metadata and controls

65 lines (42 loc) · 2.65 KB

3D-Torus-Animation

Welcome to the 3D Torus Animation project! This project is a visually stunning and interactive 3D animation of a rotating torus, built using HTML, CSS, JavaScript, the Canvas API, and the GSAP (GreenSock Animation Platform) for smooth animations.

Features

  • 3D Rotating Torus: A sleek torus shape rotating continuously in 3D space.
  • Responsive Design: The animation adjusts smoothly to different screen sizes.
  • Smooth Animations: Implemented with GSAP for high-performance animations and buttery-smooth transitions.
  • Canvas Rendering: Utilizes the HTML5 Canvas API to render the torus, providing a lightweight and flexible rendering solution.

Technologies Used

  • HTML: Provides the structure of the web page.
  • CSS: Handles basic styling for the page, ensuring the canvas is properly displayed.
  • JavaScript: Manages the logic behind the torus animation, including geometry and interactivity.
  • Canvas API: Used to render the 3D torus directly in the browser.
  • GSAP: Ensures smooth and optimized animations, making the torus rotate seamlessly.

How It Works

  1. Canvas Setup: A <canvas> element is used to display the animation.
  2. Torus Geometry: JavaScript is used to define the vertices and faces of the torus in 3D space.
  3. Rendering and Animation: The Canvas API and GSAP handle rendering and continuous rotation, giving the torus a dynamic and visually appealing effect.

How to Run the Project

  1. Clone the repository:

    git clone https://github.com/psathul073/3D-Torus-Animation.git

  2. Open the index.html file in your web browser.

That's it! The rotating torus will automatically appear on the screen.

Customization

Feel free to tweak the animation parameters, such as speed, rotation axis, and color, by modifying the relevant JavaScript and GSAP settings. Experiment with different values to create unique variations of the torus.

Project Structure

3D-Torus-Animation/
├── index.html        # Main HTML file
├── styles.css        # CSS for styling
├── script.js         # JavaScript for the 3D Torus and animation logic
└── assets/           # (Optional) Additional assets like images or fonts

Acknowledgements

  • GSAP: For providing an easy-to-use and highly performant animation library.
  • Canvas API: For rendering the 3D graphics directly in the browser.

License

This project is open-source and licensed under the MIT License.

Enjoy exploring and customizing the 3D Torus Animation! Feel free to contribute or open issues if you have any suggestions or run into problems.

Happy Coding! 🎉