https://github.com/techtronixx/3d-ball-3js

Simple web application that showcases a 3D ball using the Three.js library.
https://github.com/techtronixx/3d-ball-3js

3d 3js 3jsproject ball camera gsap vite

Last synced: about 1 month ago
JSON representation

Simple web application that showcases a 3D ball using the Three.js library.

• Host: GitHub
• URL: https://github.com/techtronixx/3d-ball-3js
• Owner: TechTronixx
• Created: 2023-08-03T07:29:24.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-03T08:20:16.000Z (over 1 year ago)
• Last Synced: 2023-08-03T08:45:10.673Z (over 1 year ago)
• Topics: 3d, 3js, 3jsproject, ball, camera, gsap, vite
• Language: JavaScript
• Homepage: https://3dball.vercel.app/
• Size: 9.77 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# 3D Ball App

This project is a simple web application that showcases a 3D ball using the Three.js library. The ball can be interactively rotated by clicking and holding the mouse. The project also demonstrates the use of GSAP (GreenSock Animation Platform) for timeline-based animations and OrbitControls for camera manipulation.

## Demo

You can try the live demo of the project by visiting the following link:

Demo - [Link](https://3dball.vercel.app/)

## Features

- 3D Ball rendering using Three.js.

- Interactivity: Click and hold the mouse to rotate the ball.

- Smooth animations with GSAP (GreenSock Animation Platform).

- Camera manipulation with OrbitControls.

## Installation

1. Clone the repository:

   ```bash

   https://github.com/TechTronixx/3D-Ball-3js

   ```

2. Navigate to the project directory:

   `cd 3d-ball-app`

3. Install dependencies using npm or yarn:

   `npm install`

   or

   `yarn`

4. Start the development server with Vite:

   `npm run dev`

   or

   `yarn dev`

5. Open your web browser and visit the local development URL provided by Vite. Typically, it will be something like `http://localhost:3000/`.

Now you should be able to see and interact with the 3D ball application locally using Vite's development server.

## Tech Used

The project uses the following technologies:

- Three.js - A popular JavaScript 3D library for rendering 3D objects in the browser.

- GSAP (GreenSock Animation Platform) - A powerful animation library for smooth and precise animations.

- Vite - A fast and lightweight development server.

- OrbitControls - A popular Three.js library for camera manipulation.

## Credits

The 3D ball model used in this project is from the Three.js documentation: [Three.js - SphereGeometry](https://threejs.org/docs/?q=sph#api/en/geometries/SphereGeometry)