Deploy three js 3D model to netlify but models didn't load (404)

Questions
, ,
1

Hi All,

I have simple .gltf 3D models, using three js loader to load all the models. The demo works fine in my local server when I run it. But when I deploy to netlify I started to get errors that the paths to the 3D models could not be found. If anyone could point me in the right direction it would be great. I tried Building for Production | Vite and Static Asset Handling | Vite but still couldn’t work it out and I am new to this so If one of these links is the solution, could you do an example of how to set that up? Thank you so much in advance. the following are my build structures and screenshots of the demo should look like. (by the way, I am using vite bundler)

This runs on local server

localServer
localServer1920×1050 123 KB

this was to netlify

netlifyServer
netlifyServer2880×1576 249 KB

this is the path I use to load the 3D models

loadModels
loadModels1920×1200 127 KB

this is the directories location

directories
directories635×1354 72.9 KB

build structure

Build Structure
Build Structure867×1691 44.4 KB

2

The GTLF file references the scene.bin that shows in your same directory for your models.
Somewhere the relative path is not working when deployed.

You might try converting your gtlf files to the binary version “glb”.
Here is an converter I used:
https://glb-packer.glitch.me/

3

in your screen grabs it shows your are trying to download your files from the /src/ folder and not from a reference related to where the bundle is served from or accessible via the web server.

4

Thanks for answering. I tried to drop the scene.gltf and scene.bin and it said “Something went wrong: TypeError: Cannot read properties of undefined (reading ‘length’).” I tried and drop all three files (scene.bin, scene.gltf, and the textures folder) but the converter didn’t take them

5

Thanks for the response @seanwasere. Sorry, I am not familiar with the terminology. Could you suggest what I should do? This is my first time deploying (for a demo only) a demo on a web server and I am not familiar with the environment. I tried and moved all three 3D models files (factory_machine, factory_machine_noColor, old_oil_tank_.2) out of the src directory but netlify still couldn’t find the path to the scene.gltf files.

6

@seanwasere and @sww314
Thank you for both of your responses, I really appreciate them. But I fixed the problem since the files are in my local machine and when I deploy the demo on netlify, netlify didn’t have access to them so by moving all of the 3D models’ folders to the public directory, it resolved the issue.

1 Like
7

the reason for that is that “src” does not exist in production. the bundler pulls out all the parts your app relies on and forms a bundle. you can never use relative urls (../ or ./) unless you import/require them, as in:

import fileUrl from './models/file.gltf'

so it’s either that or /public.

1 Like
8

@drcmda Thank you for doing an example, I’ll test that out too, I might use that approach instead.