Using Depthkit.js

🌵 Needle Engine
21

I responded in your other thread as well: from the issues on the DepthKit repo it looks like while they have an npm package it’s not actually properly built to be used as module.

So you’re struggling to bring a broken package in, which is not surprising :smile:

22

You should be able to include it via a regular script tag. You can create a script tag with a script in it from inside a component and wait for it to load, then continue accessing the code inside

23

have you tried what solved the issue here?

24

Is there any documentation for a script tag?

by user 103054507105067008

25 
const script = document.createElement("script");
script.src = "https://unpkg.com/vconsole@latest/dist/vconsole.min.js";
script.onload = () => {
  // code is ready, start using the code in it, no need to import anything
  // the library will have documentation on how to access it (e.g. via a global)
}
document.body.appendChild(script);
26

I assume I put that in start?

by user 103054507105067008

27

looking into using these to solve the elusive Uncaught ReferenceError: require is not defined https://requirejs.org/docs/node.html
https://www.npmjs.com/package/require

by user 103054507105067008

28

require is for the old common js standard, import is for the more modern ES6 modules

29

if you read require somewhere it means it’s for that other standard and you can usually replace it with import.
Most libraries have code samples for both

30

Yes!

31

I did initially try swapping require to import which caused errors. I’ll have a few shots at it next week but otherwise if it doesn’t work I’ll just give up and use their own three.js samples that work

by user 103054507105067008

32

:arrow_up: just use that script way, if they simply don’t have a properly working ES6 npm package then that’s the way to go

33

I did but then the scripts the script depended on needed to be added there and there were a lot :sweat_smile: I might try adding all of them there as script tags and just see if it works.

by user 103054507105067008

34

Is this also an option or are script tags better to use?
https://medium.com/swlh/browersify-use-require-in-client-side-javascript-7414b229a4ad

by user 103054507105067008

35

Changed the channel name: Using Depthkit.js

36

@marcel :cactus: I have just cracked using Depthkit in Needle using a local copy of DepthKit in the /src/ folder but it is from this PR in case you wanted to rely on an npm package version.

I will PM Marcel a Gdrive link to the sample project, feel free to use in your samples of course!

by user 103054507105067008

37

Well, was this PR but with imports changed to from ‘request’ to ‘import’ https://github.com/juniorxsound/Depthkit.js/pull/30

by user 103054507105067008