Loading in JavaScript modules

I've been having a couple of problems trying to load in modules so I could use them in snap. The one giving me the most trouble in particular is three.js (im loading from https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js) and when I dynamically import it, it throws errors, but I cant figure out how to import it safely by using some sort of module.

How are you importing it?

Look at the bignums library. It has to import outside code too.

I did this

and it seemed to run fine for me

i guess the module tag was what was making it not work then because i tried that before, but thanks got it working now, now to wonder about how to load it over the stage canvas, which i believe i can make a canvas on top of it using the getImage() method

You might look into Edgy, https://snapapps.github.io/edgy/app/edgy.html, which overlays a D2 (I think) window over the stage. Or look at what Jens does for the map layer.

I tried using costumes but i guess i am using them incorrectly because this is happening

Maybe it's because the cube is positioned where the camera is? So the camera is seeing the cube's back faces? And it's programmed so it doesn't render back faces?

Also you mispelled "plane" as "pane"

i moved the camera back 2 spaces

Oh I didn't notice that block

Is it facing the right way?

There's a reason Scratch (and hence Snap!) rejected 3D. I once spent ten minutes watching a high school student bang her head against her Alice program that "wasn't doing anything" until eventually she figured out that the camera was facing away from the action. There are no viewpoint issues in 2D.

(I mean, it's not just a matter of wrong camera angles. Lots of things to go wrong in 3D.)

With a negative camera z (-2), the cube is behind the camera at a distance of ~1.5 unit.
Did You try this scene in browser pure JS? E.g https://jsfiddle.net/end3r/bwup75fa/.
Fighting JS, Three.js, and Snap! at once may be overwhelming.

Seems to be working now but for some reason the canvas is tiny when stored as a costume:

stage.fullImage() is offscreen temporary canvas not attached to HTML DOM so invisible. It's quite strange that You see anything at all using this code. Your webgl rendering context is attached to an invisible canvas. There is something more under the hood? Such as constant copying rendered frame to sprite costume?