Threejs + GLTFloader + parcel 2 -> deployed?

Has anyone been able to deploy a production site using a combination of threejs, GLTFloader and bundled with Parcel 2 ?

In the previous similar query that I posted, I found a solution that got it working but only in development mode on the Parcel provided dev-server.

The next step was to test it on a deployed site with parcel-2 doing the code generation, tree shaking, bundling etc. That fails.
The Parcel issue is here.

I’ve seen projects posted that use Parcel 1 with three and GLTFloader, but have yet to find one that uses Parcel 2.

Any thoughts ?

Thanks for your time.

-jg-

this is weird: let url = new URL( "../assets/models/cubeFish.glb", import.meta.url );

i havent used parcel, but most bundlers have a public folder, this is where assets go. the url then is just “/models/cubeFish.glb” without the URL import.meta stuff whatever that is.

if parcel doesn’t have a public folder or doesn’t allow you to have one without jumping through hoops i would throw it in the trash and use vite.

Definitely going to have a look at vite.
Thanks
-jg-

This vite issue looks identical to this one:

OP there says, it works in Dev, not in production.
The good news is there’s a posted solution for vite.

im not sure what this import meta stuff is about tbh. if you put the file into /public/file.glb and new GLTFLoader().load("/file.glb", callback) it’ll work.

ps i really don’t know but im curious, why are people meta importing, what’s the benefit?

Thanks drcmda. I’ll try that…
But after I try a project setup using vitejs.
The meta.import stuff is what Docs for Parcel and Vite tell you to do for accessing static assets. Having this:

new GLTFLoader().load("/file.glb", callback)

fail (don’t remember how) got me going with meta.import, which does work in Dev mode.

there is something very basic that you must be doing wrong, there is no way it can fail if you have a public folder at the very root of your project, not under /src, the file is actually in there, and you refer to it with /file.ext. vite docs explicitely say that meta imports only work in some browsers, don’t work at all in ssr.

The public Directory#

If you have assets that are:

  • Never referenced in source code (e.g. robots.txt )
  • Must retain the exact same file name (without hashing)
  • …or you simply don’t want to have to import an asset first just to get its URL

Then you can place the asset in a special public directory under your project root. Assets in this directory will be served at root path / during dev, and copied to the root of the dist directory as-is.

The directory defaults to <root>/public , but can be configured via the publicDir option.

Note that:

  • You should always reference public assets using root absolute path - for example, public/icon.png should be referenced in source code as /icon.png .
  • Assets in public cannot be imported from JavaScript.

OK, first thing to try is putting the cubeFish.glb file in the public folder at root level.
Thanks again.
-jg-

PS. I’ll post back here with results.

In parcel 2 I’ve used it like this,

import CubeFish from "url:../assets/models/cubeFish.glb";

Thanks sajanv88
I will also try that.

In the mean time, I’m also looking at: assetsInclude, for which the example provided in vite docs is ‘gltf’.

-jg-

As recommended by drcmda this repo demonstrates loading a .glb file using GLTFloader.load() and bundled using vite.
It works in dev mode and deployed.

1 Like