Threejs + GLTFloader + parcel 2 -> deployed?

Questions
1

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-

2

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.

3

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

4

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.

5

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?

6

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.

1 Like
7

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.
8

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.

9

In parcel 2 I’ve used it like this,

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

10

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-

11

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.

2 Likes
12

Consider I just ran a while loop giving you 10000 thanks. While the battle of ‘better understanding’ bundling systems still looms (for me), the parcel/gltf bugs were seeming to occur at more ornery levels of code where I had no clue on where to begin. Vite gave none of that, so much appreciated!