Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/manish1803/3d-text

Interactive 3D text project using Three.js. Real-time rendering with dynamic animations for web graphics.
https://github.com/manish1803/3d-text

3d canvas three-js threejs vite web webgl

Last synced: 12 days ago
JSON representation

Interactive 3D text project using Three.js. Real-time rendering with dynamic animations for web graphics.

Awesome Lists containing this project

README

        

# 3D Text and Shapes Animation with Three.js

> A dynamic 3D scene created using Three.js to render 3D text surrounded by rotating torus shapes, with smooth camera animations using GSAP.

## Table of Contents

- [Overview](#overview)
- [Features](#features)
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Usage](#usage)
- [Libraries used](#libraries-used)

## Overview

This project displays animated 3D text with surrounding torus shapes, providing an interactive and visually engaging experience. It leverages [Three.js](https://threejs.org/) for 3D rendering and [GSAP](https://greensock.com/gsap/) for smooth animations.

## Features

- 3D text generated with custom fonts
- Surrounding 3D torus shapes with random positions, rotations, and scales
- Smooth camera animation using GSAP
- Responsive and fullscreen support
- Interactive orbit controls for user manipulation

## Getting Started

### Prerequisites

Ensure you have [Node.js](https://nodejs.org/) installed on your machine.

### Installation

1. Clone this repository:

```bash
git clone https://github.com/yourusername/your-repo-name.git
cd your-repo-name
```

2. Install dependencies:

```bash
npm install
```

3. Run the project:

```bash
npm run dev
```

## Libraries Used

- `Three.js` - For 3D rendering
- `GSAP` - For animations