GLTF (.glb) + threejs, bundled with parcel?

Questions
1

Has anyone been able to get a project working when combining THREE with GLTF assets ( in .glb files) and bundling with parcel ?

Apparently the challenge is to configure parcel so the it makes your .glb files available for serving from a ‘dist’ directory rather than bundling them in with your js code.

I have tried a variety of proposed solutions found in parcel Docs and suggestions in Issues in parcel on github . All result in the same error along the lines of:
Unexpected token < in JSON at position 0
which apparently means that parcel still thinks this binary data should be treated like code (JSON).

Any suggestions would be appreciated.

-jg-

2

Can you provide code on how you’re referencing the files? And how you’re serving them?

One approach that should work in any Parcel version is specifying the path to the GLB using the “URL” and “import.meta.url” syntax:

new GLTFLoader().load( new URL( './path/to/model.glb', import.meta.url ), gltf => { ... } );
3

I’ve been using Parcel v1 with the parcel-plugin-static-files-copy plugin configured for a static folder…

… this might work differently in newer versions of Parcel though.

4

Hey Garrett and Don:

Thanks for the excellent pointers.
Combining the two (using URL() to process the static file location and using the parcel-plugin-static-files-copy plugin to make copies of .glb files) it looks like things are working.

I say ‘looks like’ because I first have to solve a build loop issue with parcel before I can see what happens in the browser. :sunglasses:

cheers
-jg-

5

This thread describes attempts at next steps with three, GLTFloader and parcel…

-jg-