Vercel/Vite CSS3DRenderer, CSS3DObject deployment issue

Questions
1

Hey guys! first project using 3js, got my domain from porkbuns, and deploying it with vercel. Using inteliJ for my IDE

Issue:
Running locally my project looks exactly how its supposed to look –

image
image1249×770 66 KB

Which is essentially gltf desk model , orbital controls and css3d renderer on desktop of my portfolio.

issue comes in deployment where it looks like this

image
image1572×739 55.5 KB

more specifically - - (click bottom button)
image
image894×609 76.6 KB

error 404 on my model’s screen.

I am not sure where issue comes from i believe it may be from here

image
image1179×542 57.3 KB

as iframe id = comprescreen is throwing a src issue that it cannot be found? ( a while ago when in deployment > console > network )

this is the console error on the deployed side.

image
image1661×173 30.3 KB

feel free from that to go visit my website. I been stuck on this issue for the last 4 days. the following are the js imports.
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’;

should also note my previous iframe id=compscreen path was absolute at “/tabs/home.html” but i changed it to a more relative path “./tabs/home.html” thinking that was the issue but it wasnt. if interested please let me know i can provide the git and you could see my previous attempts at fixing this issue.

Thanks, fellow software engineer.

2

This is what I see when visiting the URL, https://godinezdevtech.com/tabs/home.html:

image
image459×187 7.7 KB

The good news is that your model is working as expected. You only need to resolve the URL issue.

3

i dont know why its throwing that error, home html is included in the build, and path is correct

4

I’ve never used Vercel, so I can’t help much with that. The good news is we’ve confirmed it’s not a three.js related issue, so you can focus on your deployment process.

As a tip, when I’m working with a new cloud service provider, I often use ChatGPT or Claude AI. They’re great for step-by-step guidance.

5

thanks will look into it

1 Like