{"id":28754709,"url":"https://github.com/mohammed-thaha/herospectra-3d","last_synced_at":"2026-04-11T11:44:03.535Z","repository":{"id":298961819,"uuid":"1001665899","full_name":"Mohammed-Thaha/HeroSpectra-3D","owner":"Mohammed-Thaha","description":"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.","archived":false,"fork":false,"pushed_at":"2025-06-13T20:23:01.000Z","size":10912,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-13T21:26:02.940Z","etag":null,"topics":["begginers","firstcontribution","frotend","goodfirstissue","reactjs","reactvite","tailwindcss","threejs-learning","vite"],"latest_commit_sha":null,"homepage":"https://hero-spectra-3-d.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mohammed-Thaha.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-13T19:27:48.000Z","updated_at":"2025-06-13T21:09:58.000Z","dependencies_parsed_at":"2025-06-13T21:36:25.506Z","dependency_job_id":null,"html_url":"https://github.com/Mohammed-Thaha/HeroSpectra-3D","commit_stats":null,"previous_names":["mohammed-thaha/herospectra-3d"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mohammed-Thaha/HeroSpectra-3D","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohammed-Thaha%2FHeroSpectra-3D","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohammed-Thaha%2FHeroSpectra-3D/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohammed-Thaha%2FHeroSpectra-3D/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohammed-Thaha%2FHeroSpectra-3D/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mohammed-Thaha","download_url":"https://codeload.github.com/Mohammed-Thaha/HeroSpectra-3D/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohammed-Thaha%2FHeroSpectra-3D/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260269444,"owners_count":22983651,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["begginers","firstcontribution","frotend","goodfirstissue","reactjs","reactvite","tailwindcss","threejs-learning","vite"],"created_at":"2025-06-17T01:11:21.422Z","updated_at":"2026-04-11T11:44:03.501Z","avatar_url":"https://github.com/Mohammed-Thaha.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HeroSpectra 3D  \n\n![Screen Recording 2025-06-14 005451 (1)](https://github.com/user-attachments/assets/452e78ce-7f0d-4da4-9c4d-22a68d09d185)  \n\n[![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)  \n\n## 🚀 Project Overview  \n\n**HeroSpectra 3D** is an interactive web application built using:  \n\n- **React** for dynamic UI components\n- **Vite** for fast and efficient development \n- **Three.js** for immersive 3D rendering  \n \n\n### 🌟 Features  \n\n- Explore **high-quality 3D models** of superheroes:  \n  - Iron Man  \n  - Captain America  \n  - Hulk  \n  - Thor  \n  - Spider-Man  \n- Smooth **rotation, zoom, and interaction** for an engaging experience  \n- Optimized for modern web browsers  \n\n---\n\nWe appreciate contributions! Check out our [Contribution Guide](CONTRIBUTING.md) for details. 🚀  \n## ✨ Features\n\n- 🎨 High-quality 3D rendering with Three.js\n- ⚡ Fast and modular React app setup with Vite\n- 🕹️ Interactive controls (rotate, zoom, pan)\n- 📦 Open-source assets with proper licensing\n- 🤝 Community-driven development\n\n---\n\n## 🛠️ Tech Stack\n\n- **Frontend:** React 19, Vite\n- **3D Rendering:** Three.js (v0.177.0)\n- **Styling:** Tailwind CSS\n- **Linting:** ESLint (React Hooks \u0026 React Refresh)\n- **Package Manager:** npm\n\n---\n\n## 📦 Installation \u0026 Setup\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/Mohammed-Thaha/HeroSpectra-3D.git\n   cd HeroSpectra-3D\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Run the local development server**\n   ```bash\n   npm run dev\n   ```\n---\n\n# 🤝 Contribution Guide  \n\nWe welcome contributions from the community! To get started, please review our [CONTRIBUTING.md](CONTRIBUTING.md), which outlines the steps for making meaningful contributions.  \n\nAll 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.  \n\n## ✨ How to Contribute  \n1. **Fork** the repository and create your branch from `main`.  \n2. Make your changes following our contribution guidelines.  \n3. **Submit a pull request** with a clear, detailed description of your modifications.  \n4. Ensure your code adheres to our coding standards and passes necessary checks.  \n\nWe appreciate every contribution and look forward to collaborating with you! 🚀  \n---\n\n## 📁 Project Structure\n\n```\nmy-project/\n├── .gitignore               # Git ignore rules\n├── README.md                # Project overview and instructions\n├── eslint.config.js         # ESLint configuration file\n├── index.html               # Main HTML file\n├── package.json             # NPM package configuration\n├── package-lock.json        # NPM package lock file\n├── vite.config.js           # Vite configuration\n├── public/                  # Public assets served statically\n│   └── assets/              # 3D models and textures\n│       ├── captain_america/\n│       │   ├── license.txt\n│       │   ├── scene.bin\n│       │   ├── scene.gltf\n│       │   └── textures/\n│       │       ├── Material__25_baseColor.jpeg\n│       │       └── Material__26_baseColor.jpeg\n│       ├── hulk/\n│       │   ├── license.txt\n│       │   ├── scene.bin\n│       │   ├── scene.gltf\n│       │   └── textures/\n│       │       └── hulk_lambert_baseColor.png\n│       ├── iron_man/\n│       │   ├── license.txt\n│       │   ├── scene.bin\n│       │   ├── scene.gltf\n│       │   └── textures/\n│       │       ├── model_1_submesh_0_baseColor.png\n│       │       └── (other texture files)\n│       ├── spider_man/\n│       │   ├── license.txt\n│       │   ├── scene.bin\n│       │   ├── scene.gltf\n│       │   └── textures/\n│       │       └── CoC_iOS_HER_PPA_SEN_B_baseColor.png\n│       └── thor/\n│           ├── license.txt\n│           ├── scene.bin\n│           ├── scene.gltf\n│           └── textures/\n│               └── Material_baseColor.png\n├── src/                     # Source code\n│   ├── App.jsx              # Main React application component\n│   ├── components/          # React components folder\n│   │   └── Model.jsx        # 3D model component\n│   ├── index.css            # Global styles\n│   └── main.jsx             # React app entry point\n\n```\n\n- **public/**: Static assets and 3D models\n- **src/components/**: React components (Navbar, ModelViewer, Sidebar, etc.)\n- **src/App.jsx**: Main application component\n- **src/main.jsx**: Entry point for React\n- **src/index.css**: Tailwind CSS imports and custom styles\n- **tailwind.config.js**: Tailwind CSS configuration\n- **.eslintrc.js**: ESLint configuration\n\n---\n## 📜 License \u0026 Contact Info\n\n- **License:** [MIT License](https://github.com/Mohammed-Thaha/HeroSpectra-3D/blob/main/LICENSE.md)\n- **Contact:** Please use [GitHub Issues](https://github.com/mohammed-thaha/HeroSpectra-3D/issues) \n---\n\n\u003e Made with ❤️ by the Mohammed Thaha\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammed-thaha%2Fherospectra-3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohammed-thaha%2Fherospectra-3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammed-thaha%2Fherospectra-3d/lists"}