using a cdn has its quirks and often depends on the author of the project publishing a version of the javascript library suitable for use in the browser.
In this case the author hasn’t published a suitable version.
As @aldo.ercolani points out - the use of require
giving an error is an indication that the javascript is not intended for use as a cdn.
Not publishing a browser version is becoming the norm.
In this situation what I typically do is go to skypack.dev and find the same package.
I then copy the code they provide. console.log
what gets imported. And then amend the import statement to be what we want.
<script type="module">
import {OrbitControls} from 'https://cdn.skypack.dev/@three-ts/orbit-controls';
window.OrbitControls = OrbitControls;
</script>
Adding the import to the window object means it can then be imported into an anvil app using python.
Edit:
You can also import this directly in python like so:
OrbitControlsModule = anvil.js.import_from("https://cdn.skypack.dev/@three-ts/orbit-controls")
OrbitControls = OrbitControlsModule.OrbitControls