Need help for Pokémon 3D Api for react/next support

Issue Overview

I am working on a GitHub Action to automate the conversion of .glb 3D models into .jsx components using gltfjsx. The goal is to:

Detect changes in models/glb/ directory

Convert or update corresponding JSX files in models/glt…


This content originally appeared on DEV Community and was authored by Sudhanshu Ambastha

Issue Overview

I am working on a GitHub Action to automate the conversion of .glb 3D models into .jsx components using gltfjsx. The goal is to:

Detect changes in models/glb/ directory

Convert or update corresponding JSX files in models/gltfjsx/

Modify JSX files to use export default and update useGLTF paths

Commit and push the changes directly to the main branch

The CLI script works fine locally, but the GitHub Action is failing to push updates.

Repo link: Pokémon3D

GitHub Action Workflow

name: Convert Updated GLB to JSX

on:
  push:
    paths:
      - "models/glb/**/*.glb" # Runs only if a .glb file changes
  workflow_dispatch: # Allows manual trigger

jobs:
  convert-glb:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install gltfjsx
        run: npm install -g gltfjsx

      - name: Find Modified GLB Files
        id: changed-files
        run: |
          FILES=$(git diff --name-only HEAD^ HEAD -- 'models/glb/**/*.glb' | xargs)
          echo "FILES=$FILES" >> $GITHUB_ENV

      - name: Convert or Update JSX Files
        if: env.FILES != ''
        run: |
          GITHUB_BASE_URL="https://raw.githubusercontent.com/Sudhanshu-Ambastha/Pokemon-3D/main"
          for glb_file in $FILES; do
            category=$(basename "$(dirname "$glb_file")")
            output_dir="models/gltfjsx/$category"
            mkdir -p "$output_dir"
            model_name=$(basename "$glb_file" .glb)
            output_file="$output_dir/$model_name.jsx"
            github_url="$GITHUB_BASE_URL/$glb_file"
            if [ -f "$output_file" ]; then
              if grep -q "useGLTF(\"$github_url\")" "$output_file"; then
                echo "✅ $output_file is already up to date."
                continue
              else
                echo "⚠️ Fixing path in: $output_file"
              fi
            else
              echo "🚀 Converting new model: $glb_file -> $output_file"
              npx gltfjsx "$glb_file" -o "$output_file"
            fi
            sed -i 's/export function Model/export default function Model/' "$output_file"
            sed -i "s|useGLTF(\".*.glb\")|useGLTF(\"$github_url\")|" "$output_file"
            sed -i "s|useGLTF.preload(\".*.glb\")|useGLTF.preload(\"$github_url\")|" "$output_file"
            echo "✅ Updated JSX: $output_file"
          done

      - name: Commit and Push Changes
        run: |
          git config --global user.name "github-actions[bot]"
          git config --global user.email "github-actions[bot]@users.noreply.github.com"
          git add models/gltfjsx/
          git commit -m "Updated JSX files for modified GLB models" || echo "No changes to commit"
          git push

Problem Statement

The action fails during the push step. I have already enabled workflow permissions to allow the action to push directly to main, but the issue persists.

Are there any permission settings I might be missing?

Is there a better approach to handling git push inside a GitHub Action?

Does the script correctly handle all models in different subdirectories (e.g., shiny, gigantamax)?

Any guidance would be greatly appreciated! 🙌


This content originally appeared on DEV Community and was authored by Sudhanshu Ambastha


Print Share Comment Cite Upload Translate Updates
APA

Sudhanshu Ambastha | Sciencx (2025-02-23T14:20:57+00:00) Need help for Pokémon 3D Api for react/next support. Retrieved from https://www.scien.cx/2025/02/23/need-help-for-pokemon-3d-api-for-react-next-support/

MLA
" » Need help for Pokémon 3D Api for react/next support." Sudhanshu Ambastha | Sciencx - Sunday February 23, 2025, https://www.scien.cx/2025/02/23/need-help-for-pokemon-3d-api-for-react-next-support/
HARVARD
Sudhanshu Ambastha | Sciencx Sunday February 23, 2025 » Need help for Pokémon 3D Api for react/next support., viewed ,<https://www.scien.cx/2025/02/23/need-help-for-pokemon-3d-api-for-react-next-support/>
VANCOUVER
Sudhanshu Ambastha | Sciencx - » Need help for Pokémon 3D Api for react/next support. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/02/23/need-help-for-pokemon-3d-api-for-react-next-support/
CHICAGO
" » Need help for Pokémon 3D Api for react/next support." Sudhanshu Ambastha | Sciencx - Accessed . https://www.scien.cx/2025/02/23/need-help-for-pokemon-3d-api-for-react-next-support/
IEEE
" » Need help for Pokémon 3D Api for react/next support." Sudhanshu Ambastha | Sciencx [Online]. Available: https://www.scien.cx/2025/02/23/need-help-for-pokemon-3d-api-for-react-next-support/. [Accessed: ]
rf:citation
» Need help for Pokémon 3D Api for react/next support | Sudhanshu Ambastha | Sciencx | https://www.scien.cx/2025/02/23/need-help-for-pokemon-3d-api-for-react-next-support/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.