GLTFLoader + DRACOLoader + Svelte 5: Path error

Questions
, , ,
1

Hello everyone,

I have a strange behavior that I can’t explain. I have built a small Svelte 5 app. Within my onMount method I create a small scene and try to load a 3D model (glb) using GLTF and DRACOLoader. In my local development environment, the object loads as desired and everything is available. Online, however, I have the problem that I get the following error:

https://example.com/[object%20Object] 404 (Not Found)

I am not completely new to web development and know that JS objects are displayed like that. However, I am not passing an object but a string.

Here is my code:

import * as THREE from 'three';
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader"
import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader'

...

draco = new DRACOLoader();
draco.setDecoderPath('/public/path/decoder/')
draco.preload()

loader = new GLTFLoader()
loader.setPath('/public/path/models/')
loader.setDRACOLoader(draco)
loader.load('bike.glb', ( gltf: any ) => {

...

})

Thanks in advance!

2

/public is not a valid path, normally. the role of that folder is that its contents are copied into the /dist folder. when the project is served /public does not exist. given /public/foo.glb the url would become “/foo.glb” (or, ./foo.glb, if you have routes). you do not normally need to use setPath, it’s only needed for gltf which has to refer to external files.

3

Thank you for your reply!
I should have mentioned that the app will be embedded in another page. Accordingly, it is not a standard Svelte app with SvelteKit or similar. Therefore, my files are not in the app itself, but on the server. My server root and public folder is actually “/public” (Symfony). In which I would like to store and use my models and decoders. So I have to specify the path accordingly, right?

I have also read that relative paths are not OK, but the error message remains the same for both variants. The error message that an object is appended to the URL therefore still puzzles me.

4

My last attempt looks like this:

draco = new DRACOLoader();
draco.setDecoderPath('configurator/')
draco.preload()

loader = new GLTFLoader()
loader.setPath('configurator/')
loader.setDRACOLoader(draco)

These are the files that are public and accessible via example.com/configurator/*:

root
root231×201 5.84 KB

5

try this

const draco = new DRACOLoader()
draco.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.5/")
const loader = new GLTFLoader()
loader.setDRACOLoader(draco)

loader.load("/configurator/bike.glb", ...

if it works it must be how draco wasm is set up. wrong files, broken files, empty files, wrong names, …

1 Like
6

Locally, it continues to work perfectly with this code. Online I get the same errors. :expressionless:

I have also noticed the following:
with draco.preload():

issue1
issue11098×102 11.6 KB

without draco.preload():
issue2

7

did you use the code i posted, just that and nothing else? there must be something otherwise that you didn’t post here, some code that forms a url to fetch.

and if not it perhaps is your build system. i take it you use vite, and you run “npm run build”, and copy the contents of the /dist folder to your server.

8

I used the code exactly as you suggested. Yes, I use Vite to build with the following setting (Library Mode) to be able to embed it into an HTML page.

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve('./src/main.ts'),
      name: 'Configurator',
      fileName: 'configurator'
    },
    rollupOptions: {
      output: {
        dir: '../public/build/',
        entryFileNames: 'configurator.js'
      }
    },
  },
  plugins: [svelte()],
  resolve: {
    alias: {
      $lib: path.resolve("./src/lib"),
    },
  },
})

I upload the entire build (dist) folder in the public directory.
It could probably be due to the build process. I’m just not sure how to solve the problem.

UPDATE:
I have tried to embed the DRACOLoader and GLTFLoader via the HTML page itself and to access these instances in the code. Even with these (non-built) embeddings, the URL is resolved incorrectly when loading.

When debugging I see the URL, it seems to be only the error message / response that shows the [object%20Object]:

image
image628×393 18.2 KB

However, I do not seem to have access to it.

9

Okay, after 1 1/2 days of troubleshooting I found it and you will laugh. The customer works on the site himself and uses the stone-age library Mootools, which caused all the problems. :relieved:

@drcmda thank you very much for dealing with the problem :pray: