https://github.com/mohammed-thaha/herospectra-3d

A frontend web app built with React, Vite, and Three.js to showcase interactive 3D superhero models. Open-source and optimized for learning and collaboration.
https://github.com/mohammed-thaha/herospectra-3d

begginers firstcontribution frotend goodfirstissue reactjs reactvite tailwindcss threejs-learning vite

Last synced: 3 months ago
JSON representation

A frontend web app built with React, Vite, and Three.js to showcase interactive 3D superhero models. Open-source and optimized for learning and collaboration.

Host: GitHub
URL: https://github.com/mohammed-thaha/herospectra-3d
Owner: Mohammed-Thaha
License: other
Created: 2025-06-13T19:27:48.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2025-06-13T20:23:01.000Z (about 1 year ago)
Last Synced: 2025-06-13T21:26:02.940Z (about 1 year ago)
Topics: begginers, firstcontribution, frotend, goodfirstissue, reactjs, reactvite, tailwindcss, threejs-learning, vite
Language: JavaScript
Homepage: https://hero-spectra-3-d.vercel.app
Size: 10.4 MB
Stars: 1
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

# HeroSpectra 3D

![Screen Recording 2025-06-14 005451 (1)](https://github.com/user-attachments/assets/452e78ce-7f0d-4da4-9c4d-22a68d09d185)

[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md)

## 🚀 Project Overview

**HeroSpectra 3D** is an interactive web application built using:

- **React** for dynamic UI components
- **Vite** for fast and efficient development
- **Three.js** for immersive 3D rendering

### 🌟 Features

- Explore **high-quality 3D models** of superheroes:
- Iron Man
- Captain America
- Hulk
- Thor
- Spider-Man
- Smooth **rotation, zoom, and interaction** for an engaging experience
- Optimized for modern web browsers

---

We appreciate contributions! Check out our [Contribution Guide](CONTRIBUTING.md) for details. 🚀
## ✨ Features

- 🎨 High-quality 3D rendering with Three.js
- ⚡ Fast and modular React app setup with Vite
- 🕹️ Interactive controls (rotate, zoom, pan)
- 📦 Open-source assets with proper licensing
- 🤝 Community-driven development

---

## 🛠️ Tech Stack

- **Frontend:** React 19, Vite
- **3D Rendering:** Three.js (v0.177.0)
- **Styling:** Tailwind CSS
- **Linting:** ESLint (React Hooks & React Refresh)
- **Package Manager:** npm

---

## 📦 Installation & Setup

1. **Clone the repository**
```bash
git clone https://github.com/Mohammed-Thaha/HeroSpectra-3D.git
cd HeroSpectra-3D
```

2. **Install dependencies**
```bash
npm install
```

3. **Run the local development server**
```bash
npm run dev
```
---

# 🤝 Contribution Guide

We welcome contributions from the community! To get started, please review our [CONTRIBUTING.md](CONTRIBUTING.md), which outlines the steps for making meaningful contributions.

All contributors are expected to follow our [Code of Conduct]([CODE_OF_CONDUCT.md](https://github.com/Mohammed-Thaha/HeroSpectra-3D/blob/main/CODE_OF_CONDUCT.md)) to ensure a respectful and inclusive environment.

## ✨ How to Contribute
1. **Fork** the repository and create your branch from `main`.
2. Make your changes following our contribution guidelines.
3. **Submit a pull request** with a clear, detailed description of your modifications.
4. Ensure your code adheres to our coding standards and passes necessary checks.

We appreciate every contribution and look forward to collaborating with you! 🚀
---

## 📁 Project Structure

```
my-project/
├── .gitignore # Git ignore rules
├── README.md # Project overview and instructions
├── eslint.config.js # ESLint configuration file
├── index.html # Main HTML file
├── package.json # NPM package configuration
├── package-lock.json # NPM package lock file
├── vite.config.js # Vite configuration
├── public/ # Public assets served statically
│ └── assets/ # 3D models and textures
│ ├── captain_america/
│ │ ├── license.txt
│ │ ├── scene.bin
│ │ ├── scene.gltf
│ │ └── textures/
│ │ ├── Material__25_baseColor.jpeg
│ │ └── Material__26_baseColor.jpeg
│ ├── hulk/
│ │ ├── license.txt
│ │ ├── scene.bin
│ │ ├── scene.gltf
│ │ └── textures/
│ │ └── hulk_lambert_baseColor.png
│ ├── iron_man/
│ │ ├── license.txt
│ │ ├── scene.bin
│ │ ├── scene.gltf
│ │ └── textures/
│ │ ├── model_1_submesh_0_baseColor.png
│ │ └── (other texture files)
│ ├── spider_man/
│ │ ├── license.txt
│ │ ├── scene.bin
│ │ ├── scene.gltf
│ │ └── textures/
│ │ └── CoC_iOS_HER_PPA_SEN_B_baseColor.png
│ └── thor/
│ ├── license.txt
│ ├── scene.bin
│ ├── scene.gltf
│ └── textures/
│ └── Material_baseColor.png
├── src/ # Source code
│ ├── App.jsx # Main React application component
│ ├── components/ # React components folder
│ │ └── Model.jsx # 3D model component
│ ├── index.css # Global styles
│ └── main.jsx # React app entry point

```

- **public/**: Static assets and 3D models
- **src/components/**: React components (Navbar, ModelViewer, Sidebar, etc.)
- **src/App.jsx**: Main application component
- **src/main.jsx**: Entry point for React
- **src/index.css**: Tailwind CSS imports and custom styles
- **tailwind.config.js**: Tailwind CSS configuration
- **.eslintrc.js**: ESLint configuration

---
## 📜 License & Contact Info

- **License:** [MIT License](https://github.com/Mohammed-Thaha/HeroSpectra-3D/blob/main/LICENSE.md)
- **Contact:** Please use [GitHub Issues](https://github.com/mohammed-thaha/HeroSpectra-3D/issues)
---

> Made with ❤️ by the Mohammed Thaha

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/mohammed-thaha/herospectra-3d

Awesome Lists containing this project

README