How to load GLTF files with texture?

[chloesun]

Thanks for creating the react component and sharing with the community! From the example, this is how you reference the src

export const sampleModel1 = {
  id: 'duplex',
  src: './models/duplex/scene.gltf',
  metaModelSrc: './metaModels/duplex/metaModel.json',
  edges: true
};

For the GLTF files with texture, (gltf, bin, png), how to load them?

[xeolabs]

@chloesun the GLTFLoaderPlugin has a performance configuration - this is normally set true to load large models into the viewer for high-performance non-realistic engineering-style rendering without textures.

Set that false to load models into xeokit's lower-performance flavor of scene representation, which supports glTF 2 materials with physically-based rendering, textures etc.

Note that's going to freak your browser out if you try to load a hugely detailed model with that configuration. Best for a few thousand objects, not good for hundreds of thousands.

const gltfLoader = new GLTFLoaderPlugin(viewer);

const model = gltfLoader.load({
        id: "myModel",
        src: "./models/gltf/schependomlaan/scene.gltf",
        metaModelSrc: "./metaModels/schependomlaan/metaModel.json",

        performance: false // <<--------- Set false to enable full materials
    });

[chloesun]

Here is where my GLTF stored, right under public directory:

I added this in Models.js

export const sampleModel3 = {
  id: 'cbr',
  src: './cbr_room/cbr.gltf',
  performance: false
};

I got a blank canvas with the error messages like this, note I have no problem rendering models with gltf and json (like your sample models)

If I removed the performance: false, I can see the spinner, but with the same error, like this:

What could be wrong?

[eriadam]

Usually "unexpected token < in JSON at position 0" means that the server gives you back a 404 error and an html response — instead of JSON. Maybe the path to the gltf file is not correct or you don't have read permissions?

[chloesun]

@eriadam I think the path is correct, and I can render this model at https://gltf-viewer.donmccurdy.com/, so I think there is no permission issue either...

[eriadam]

@chloesun In your web inspector look into the resources being loaded and the network logs, you should see the request for the gltf file and the response as well. I am pretty sure the response is not a proper gltf. Note that the JSON loader throws the error, not the renderer.

[chloesun]

@eriadam thanks for the speedy response, the status code is 304

[eriadam]

@chloesun Cool, what is in the Preview/Response tabs?

[chloesun]

@eriadam response: preview

[eriadam]

Yap, it's html alright. When you request http://localhost:1234/cbr_room/cbr.gltf even simply from the browser, your local server needs to return the gltf file. I am not sure about your local setup, maybe some reverse proxy or web server config issue.

[barnabasmolnar]

@chloesun

Are you by any chance using Parcel to serve your app? I see your css and js files have these hashes that I know Parcel generates when bundling your app, although other bundlers may do that too, of course. In any case, @eriadam is almost certainly right in that the gltf file is not being served properly. If you're using a bundler like Parcel that serves static files with these hashes, then your gltf file should have one too.

I've mostly relied on create react app to serve react applications so I'm not sure I can be of much help on this one. If you are, however, willing to share a bit more on how you're bundling your app, we might at the very least be able to help point you in the right direction.

[chloesun]

I'm using Parcel to bundle the app

[barnabasmolnar]

Might be worth asking the parcel guys about this.

This is what a quick search yielded for me, not sure if this is relevant to your use-case: https://github.com/parcel-bundler/parcel/issues/1080

Maybe have a look at the last comment and the plugin mentioned there: https://www.npmjs.com/package/parcel-plugin-static-files-copy

Honestly though, I'm only shooting in the dark here, I've never actually used Parcel to serve a React app. :blush: Please do let us know if you manage to figure it out.

[chloesun]

@barnabasmolnar Thanks for the guidance. I've tried this library https://github.com/tiaanduplessis/parcel-plugin-asset-copier, to solve the servicing static files like gltf with Parcel, based on this discussion https://github.com/parcel-bundler/parcel/issues/1411

The JSON error is gone, and I saw this error from the console:

Since I want to reference gltf model with gltf bin and png, and I think I only need to add one gltf src here :

export const sampleModel3 = {
  id: 'cbr',
  src: 'cbr_room/cbr.gltf',
  performance: false
};

If I remove the performance:false tag, there is no error, and the gltf and bin file loaded properly, but there is nothing showed in the viewer

Somehow, this approach can reference the geometry, but still not the texture. I also tested with your newly updated code, it is the same behaviour.

[chloesun]

Also, thanks for updating the components with more features!

[chloesun]

This PR will solve the issue https://github.com/xeokit/xeokit-sdk/pull/117