Loading in JavaScript modules

wunder_wulfe · September 28, 2020, 1:16am

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.

pumpkinhead · September 28, 2020, 1:35am

How are you importing it?

bh · September 28, 2020, 1:45am

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

wunder_wulfe · September 28, 2020, 1:54am

pumpkinhead · September 28, 2020, 1:59am

I did this

and it seemed to run fine for me

wunder_wulfe · September 28, 2020, 2:00am

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

bh · September 28, 2020, 2:13am

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.

wunder_wulfe · September 28, 2020, 2:37am

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

pumpkinhead · September 28, 2020, 2:42am

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"

wunder_wulfe · September 28, 2020, 2:48am

i moved the camera back 2 spaces

pumpkinhead · September 28, 2020, 2:54am

Oh I didn't notice that block

bh · September 28, 2020, 4:17am

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

dardoro · September 28, 2020, 7:20pm

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.

wunder_wulfe · October 1, 2020, 3:31pm

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

dardoro · October 2, 2020, 12:23am

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?