Import non esm libs?

Questions
1

Hi, so i have my scene set up and that wonderful stuff using import/module
but i have hit a little snag i want to use this shader:
https://cdn.rawgit.com/mattatz/THREE.Fire/master/FireShader.js
https://cdn.rawgit.com/mattatz/THREE.Fire/master/Fire.js

and i am wondering how i can import them to the module? as i can’t use the above because they load either to soon (before three.js module) or to late so the code doesn’t work any ideas of how i can use import with these two files?
or is there any other tricks i can use?

original non module: https://codepen.io/uiunicorn/pen/YzZqKNw

Thank you for reading
javascript - import non es6 libs - Stack Overflow - free internet points

edit: I’m completely new to modules, es6, importing and stuff :slightly_frowning_face:

2

yes: https://webpack.js.org/guides/shimming

but it would be a mess, you’re better off just forking/copying the thing.

edit. read your stackoverflow question, copying means you throw the thing into your project and then re-write it. you don’t need to mutate the THREE namespace, just form a shadermaterial:

class FireMaterial extends THREE.ShaderMaterial {
  constructor() {
    super({
      defines: {
        "ITERATIONS": "20",
        "OCTIVES": "3"
      },
      uniforms: {
        "fireTex": { type : "t", value : null },
        ...
      },
    })
  }
}
3

i tried it out, nice effect: Basic demo (forked) - CodeSandbox

you can copy the shader material as is, though i removed the simplex chunk because you can load that with imports, too (im using macros here because of codesandbox).

as for the “Fire” thing, you can tie it together in a class Fire extends THREE.Mesh, it still needs a texture in the end to function.

1 Like
5

everything seems to load now im using vanila js so nothing special like react and i keep getting this MIME type error:

Failed to load module script: The server responded with a non-JavaScript MIME type of “image/png”. Strict MIME type checking is enforced for module scripts per HTML spec.

on the fire.png image

also in the normal js version i can do things like this:

scene.add(fire);
fire.scale.x = 6;
fire.scale.y = 5;

and clone the fire etc is there a way to keep those?
original non module: https://codepen.io/uiunicorn/pen/YzZqKNw

6

esm spec does not support importing non-js assets (images). so the image must be in your public folder, the whole project needs then to be served (as in, you need a server), you can’t just run it locally by loading the html. generally i would suggest you use bundlers, “vanilla esm” is pretty much unusable at this point, the spec is years from being finished.

you can clone and scale the object. for cloning you need to override the clone method.

1 Like
7

I’ve hosted it live on my server I haven’t tried it locally but yeah the error is from a live server