Why Does My Three.js CSS3DRenderer Deployment on Vercel Return 404 Errors?

Hello everyone!
I'm deploying my first Three.js project on Vercel using a domain from PorkBuns and developing in IntelliJ. Locally, everything renders correctly—the glTF desk model, orbital controls, and CSS3D renderer display as expected:

However, after deployment, the interface changes, and clicking the bottom button leads to a 404 error on the model’s screen:

This view is shown more clearly here:

The error seems related to an iframe with id "comprescreen". The console logs reveal that the source of this iframe cannot be found (as indicated by a network error in the console):

Initially, the iframe source was an absolute path "/tabs/home.html". I switched it to a relative path "./tabs/home.html" thinking that might fix the issue, but it did not resolve the problem.

Here are my JavaScript imports used in the project:

JAVASCRIPTCopied
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';

I’d appreciate any insights or suggestions because I’ve been stuck on this for the last 4 days. If needed, I can provide access to my Git repository to show previous attempts at resolving this issue.

Thanks, fellow software engineers!