THREE.js orbit controls

Anvil Q&A
1

THREE.js orbit controls

Hi,

I am currently trying to create a custom 3D graphics control in anvil using the THREE.js Library. In doing so I am currently trying to get its orbit controls running in anvil. For this test I work on a simplified version of the Christmas tree example for THREE.js in anvil (3D Christmas Tree).

My current roadblock is that I fail to properly import orbit controls. In the Native Libraries section, I import:


<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"></script>

<script src="https://unpkg.com/three-orbitcontrols-ts@0.1.2/dist/index.js"></script>

When I now call (in init)


print(type(THREE))

print(type(OrbitControls))

I get:


<class 'Proxy'>

<class 'NoneType'>

Why do I get NoneType instead of OrbitControls even although OrbitControls contains the following export?


exports.OrbitControls = OrbitControls;

You can see my setup here:

https://anvil.works/build#clone:ESVCMP7HJWSRMPXQ=KNSKNFEPD5SHT6DZB2I5UCJ7

I would highly appreciate your suggestions.

All the best,

Henrik

2

Hello @henrikj.stromberg
I just tried your clone App and noticed in browser’s control that the second native library is giving an error:
firefox_onqamTb649

firefox_csqbMvZGNP
firefox_csqbMvZGNP698×190 8.16 KB

I think this is why your OrbitControls object is not correctly initialised and hence it’s None in python code.

Googling this error points to https://requirejs.org/ for some sort of solution.

BR

3

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
4

Thank you very much for the solution and explanation.