🌐 Three.js Tuto

Welcome to Three.js Tuto, a project designed to dive into the fundamentals of 3D web development using Three.js and Vite. This tutorial project creates a captivating 3D scene featuring a rotating sphere illuminated by dynamic lighting, enhanced with smooth scroll animations.

🚀 Project Overview

Features

• 3D Sphere Creation: Generate and render a smooth, rotating sphere.
• Dynamic Lighting: Implement realistic lighting with point lights.
• Camera Controls: Utilize OrbitControls for interactive camera movement.
• Scroll Animations: Smooth animations using GSAP.
• Responsive Design: Adjusts seamlessly to different screen sizes.

Why This Project?

This project is crafted for those who are eager to explore the basics of 3D web development. By leveraging Vite's fast build process and Three.js's powerful 3D rendering capabilities, this project serves as an excellent starting point for anyone looking to enhance their skills in 3D graphics and animations on the web.

🛠 Installation & Usage

Follow these steps to set up and run the project locally:

Prerequisites

• Node.js (v16 or later)
• npm or yarn

Installation

1. Clone the Repository

git clone https://github.com/khairislama/threejs-tuto.git
cd threejs-tuto

2. Install Dependencies

npm install
# or
yarn install

Running the Development Server

npm run dev
# or
yarn dev

Open your browser and navigate to http://localhost:3000 or whatever writting on the terminal to see the project in action.

Building for Production

npm run build
# or
yarn build

Previewing the Production Build

npm run preview
# or
yarn preview

📦 Project Structure

• style.css: CSS styling file.
• main.js: Source files including the Three.js scene and animations
• index.html: Main HTML file to render the 3D scene.

🧩 Future Improvements

• Additional Shapes: Experiment with different geometries and shapes.
• Advanced Animations: Incorporate more complex animations with GSAP.
• Enhanced Interactivity: Add more interactive elements and controls.
• Optimizations: Improve performance and responsiveness for various devices.

🌟 Acknowledgements

This project is inspired by the vast community of Three.js enthusiasts and the wealth of tutorials available online. Special thanks to the creators of Three.js, Vite, and GSAP for their incredible tools and resources.

📫 Contact

Feel free to reach out with any questions, suggestions, or to share your own experiments:

• Khairi Slama: LinkedIn | Twitter | Email