Need help deploying Vite + Three.js + TypeScript project on GitHub Pages--- works on npm run dev, but not on GitHub Pages or npm run preview

[kuuudo]

Body

Hey everyone,
I’m currently working on a project using Three.js, Vite, and TypeScript. I want to make it a published website, and I’m using GitHub Pages as the hosting platform. Everything works perfectly when I run npm run dev, but when I try to run npm run preview, or when I deploy it to GitHub Pages, it just shows a blank (white) canvas.
When I open the browser console (F12), I get a 404 error saying it can’t find my main.ts file.
Here’s what I’ve tried so far:
I added this line in my package.json: "homepage": "https://kuuudo.github.io/roberterrante/"
I also updated vite.config.js to include: base: '/roberterrante/',
But none of this seems to fix the issue.
I also have a mobile.ts file that should load instead of main.ts when a mobile device is detected, but I haven’t gotten that part to work in the deployed version either.
Also, just a heads up — this is my first website project, and I probably put too many unnecessary files in the src folder 😅. There are files like car.ts, box.ts, eve.ts, followCam.ts, game.ts, keyboard.ts, main.js, othermain.ts, and a few others I’m honestly too afraid to delete right now, in case they break something.
Any ideas what I might be missing? I'd really appreciate your help!

🔗 Live website:
👉 https://kuuudo.github.io/roberterrante/
💻 GitHub repository:
👉 https://github.com/kuuudo/roberterrante
Any ideas wha



t I might be missing? I'd really appreciate your help!

Guidelines

• I have read and understood this category's guidelines before making this post.

[3ni8ma]

I deploy Vite + Three.js + TypeScript to GitHub Pages regularly (my portfolio uses this exact stack).

1. vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  base: "/your-repo-name/",
  plugins: [react()],
});

2. GitHub Pages: Actions deployment

3. Deploy workflow

name: Deploy
on:
  push: { branches: [main] }
jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci && npm run build
      - uses: actions/configure-pages@v4
      - uses: actions/upload-pages-artifact@v3
        with: { path: "./dist" }
      - id: deployment
        uses: actions/deploy-pages@v4

4. Three.js models in /public/ referenced as /repo-name/model.glb

The base config is the most common pitfall. Once that's set, Vite + Three.js + TS deploys cleanly.