Pokémon 3D API

Welcome to the Pokémon 3D Model Viewer! Explore a vast collection of Pokémon 3D models directly in your browser using interactive <model-viewer> previews. This project provides a JSON API to access URLs for these ready-to-use models, enabling seamless integration into your own web applications.

---

Table of Contents

• Pokémon 3D API
  • Table of Contents
  • Features
  • Using the API
    • JSON Response Structure
    • API Endpoint
  • Contributing
    • Steps to Contribute:
  • How to Add More Models
  • Optimizing 3D Models
    • CLI Command for Optimization
  • Converting .glb Models to JSX Components
    • Steps to Convert .glb to .jsx
  • Pokémon Categories and Counts
  • | Origin Forms | 3 | 3 | Origin Forms represent the true or primal state of certain legendary Pokémon, showcasing their full power and unique design. i.e Giratina, and Dialga/Palkia. |
  • Note About APIs
  • Check Model Animations
  • Credits
  • License
  • Legal Notice
    • The Pokémon3D project community

---

Features

• View Pokémon in 3D directly in the browser.
• Access a JSON API for retrieving Pokémon 3D model URLs.
• Support for various Pokémon forms and categories.
• Instructions for adding and optimizing models.
• Guidance on converting .glb models to .jsx components.

---

Using the API

To fetch Pokémon data from this project for use in your own applications, you can consult the documentation or examine the provided opt.html file also shown in deployed site in optimized page tab.

JSON Response Structure

The API returns an array of Pokémon objects. Each object contains an id and an array of forms.

[
  {
    "id": 1,
    "forms": [
      {
        "name": "Bulbasaur",
        "model": "https://raw.githubusercontent.com/Sudhanshu-Ambastha/Pokemon-3D/main/models/glb/regular/1.glb",
        "formName": "regular"
      },
      {
        "name": "Shiny Bulbasaur",
        "model": "https://raw.githubusercontent.com/Sudhanshu-Ambastha/Pokemon-3D/main/models/glb/shiny/1.glb",
        "formName": "shiny"
      }
    ]
  },
  // ... more Pokémon objects
]

API Endpoint

The Pokémon data is exposed as a JSON API. You can access it using the following URL:

https://pokemon-3d-api.onrender.com/v1/pokemon

You can use this endpoint to fetch the JSON data and use it in your applications to display Pokémon 3D models.

Example of fetching data with JavaScript:

fetch('https://pokemon-3d-api.onrender.com/v1/pokemon')
  .then(response => response.json())
  .then(data => {
    console.log(data); 
  })
  .catch(error => console.error('Error fetching data:', error));

Contributing

We welcome contributions from the community! You can help by:

1. Adding new 3D models of Pokémon.
2. Improving the user interface and styling.
3. Fixing bugs and optimizing the app for better performance.
4. Enhancing the code with new features (like sorting Pokémon, filtering by type, etc.).
5. Improving the documentation for easier understanding and navigation.

Steps to Contribute:

1. Fork the Repository: Fork the repo to your GitHub account.
2. Clone your Fork: Clone your fork to your local machine.

   git clone https://github.com/Sudhanshu-Ambastha/Pokemon-3D.git
3. Create a Branch: Create a new branch for your feature or bug fix.

   git checkout -b add-new-pokemon-model
4. Make Your Changes: Add new Pokémon models in the models and within the folder according to pokemon form and implement any necessary changes.
5. Commit Your Changes: Commit your changes with a meaningful message.

   git commit -m "Added new Pokémon model named 'Pikachu'"
6. Push to Your Fork: Push your changes to your fork on GitHub.

   git push origin add-new-pokemon-model
7. Create a Pull Request: Create a pull request to the main repository, describing your changes.

How to Add More Models

To add new Pokémon models to the app, follow these steps:

1. Find or Create a 3D Model: Locate or create Pokémon 3D models in .glb format.
2. Update the Data Source: Add a new Pokémon object to your data source (e.g., MergedOpt.json) or database, following the JSON Response Structure outlined above.
3. Host the Model: Ensure the model is hosted and accessible via a URL.

Optimizing 3D Models

To ensure optimal performance, particularly for web-based applications, it's crucial to optimize 3D models. This involves reducing file sizes and improving rendering efficiency.

Recommended Optimization Settings:

For the best balance of visual quality and performance, we recommend optimizing your .glb models with the following settings:

• Resolution: Resize models to a maximum size of 1024x1024 pixels. This resolution provides good detail while keeping file sizes manageable.
• Geometry Compression: Use Draco compression to reduce the size of the model's geometry without significantly impacting visual quality.
• Texture Compression: Convert textures to WebP format, which offers excellent compression ratios and supports transparency.

For more detailed information on using gltf-transform, refer to the official documentation: gltf-transform.

CLI Command for Optimization

1. Install gltf-transform globally:

   npm i -g @gltf-transform/cli

2. Install gltf-transform as a dev dependency (optional):

   npm i @gltf-transform/cli --save-dev

3. Use the following gltf-transform command to resize and optimize your .glb models:

   gltf-transform resize models/glb/regular/1.glb models/opt/regular/1.glb --width 1024 --height 1024 && gltf-transform optimize models/opt/regular/1.glb models/opt/regular/1.glb --compress draco --texture-compress webp

Converting .glb Models to JSX Components

For developers using JSX/Next.js, working with .glb models directly can be challenging. Instead, we can convert .glb files to .jsx components, which makes rendering and interaction easier.

Steps to Convert .glb to .jsx

1. Install gltfjsx
   First, install the required package globally or locally using npm:

   npm i gltfjsx
2. Navigate to the Directory Move to the directory where your .glb file is stored:

   cd models/glb/
   
3. Run the Conversion Command Use the following command to convert a .glb file into a .jsx component:

   npx gltfjsx 150.glb -o ../../gltfjsx/shadow/150.jsx
   
   • 150.glb → The input .glb file
   • -o ../../gltfjsx/shadow/150.jsx → Output directory for the .jsx file
4. Ensuring Default Export After conversion, make sure the generated .jsx file exports the model as a default component. If not, update the export statement at the end of the file:

const  bulbasaur= (props) => {
---Content leave as it is---
export default bulbasaur;

This ensures that the component can be imported correctly without causing errors.

Pokémon Categories and Counts

This app supports various Pokémon forms and categories. Below is a breakdown of the available Pokémon models and their counts:

Category	Available	Total	Description
Regular Forms	953	1028	Standard Pokémon forms from Generations 1 to 9 including male & female.
Shiny Forms	78	1028	Alternate color variants of all standard Pokémon.
Gigantamax	10	32	Special forms of select Pokémon with unique appearances in Sword and Shield.
Mega Evolutions	48	49	Includes both single Mega forms and X/Y variants.
MegaShiny Evolutions	4	49	Includes both single Mega forms and X/Y variants.
Hisuian Forms	17	17	Regional variants from Pokémon Legends: Arceus.
Alolan Forms	12	18	Regional variants introduced in Pokémon Sun and Moon.
Galarian Forms	11	20	Regional variants from Pokémon Sword and Shield.
Primal Forms	2	2	Primal Groudon and Primal Kyogre.
Unique Forms	4	4	Ash's Greninja, Armoured Mewtwo, Eternamax Eternatus, Ultra Necrozma
Shadow Forms	3	131	Dark, corrupted versions of Pokémon often seen in Pokémon Colosseum and XD: Gale of Darkness.
Fusion Forms	3	6	Kyurem (black/white), Necrozma (Dusk Mane/Dawn Wings), Calyrex (Ice Rider/Shadow Rider)
Origin Forms	3	3	Origin Forms represent the true or primal state of certain legendary Pokémon, showcasing their full power and unique design. i.e Giratina, and Dialga/Palkia.

---

Note About APIs

While there are many Pokémon APIs available that provide Pokémon data (e.g., stats, types, moves, etc.), most of these APIs do not offer 3D models of Pokémon. This is primarily due to the significant storage and bandwidth requirements for hosting and serving 3D models, as well as potential licensing issues. Existing APIs like PokéAPI are excellent resources for general Pokémon information, but they do not include 3D models.

Check Model Animations

To verify whether a model contains animations or to inspect its structure, you can use the 3D Preview extension in Visual Studio Code. This extension allows you to preview 3D models directly in the editor, making it easier to inspect and test your models.

1. Upload your .glb or .gltf file to Visual Studio Code, or open it using Visual Studio Code.
2. If the extension is set as the default, you can easily open the 3D model from the sidebar or by right-clicking the file and selecting 3D Preview.
3. If the model contains animations, they will appear in a dropdown menu; otherwise, no animations will be shown.

Credits

Check Credits.md for a list of contributors and resources used in this project. This project is a community-driven effort to provide a comprehensive and accessible 3D model database for Pokémon. We appreciate the contributions of everyone who has helped make this project a reality. If you have any questions or would like to contribute, please don't hesitate to reach out. We're always happy to help and appreciate any assistance you can provide. Thank you for your interest in this project!

License

This project is open source and available under the .

Legal Notice

For more information about the legal considerations related to this project, please see the COPYRIGHT.md file.

The Pokémon3D project community

Join our Discord:

Don't just clone 🤖 it, also star 🌟 it!