Failing to import OrbitControls from Three.js using Pyscript

Technical Topics PyScript
1

Hello!

I’ve been trying and failing to import the OrbitControls for Three.js into Pyscript. When I run the following snippet of code:

<script src="https://cdn.jsdelivr.net/npm/three@0.141.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.141.0/examples/jsm/controls/OrbitControls.js"></script>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<p>Using OrbitControls with Three.js and Pyscript</p>
<canvas id="canvas"></canvas>

</body>
<py-script>
from pyodide import create_proxy, to_js
from js import Object
from js import window
from js import THREE

from js import OrbitControls

I then get the following error:

JsException(PythonError: Traceback (most recent call last): File "/lib/python3.10/site-packages/_pyodide/_base.py", line 429, in eval_code .run(globals, locals) File "/lib/python3.10/site-packages/_pyodide/_base.py", line 300, in run coroutine = eval(self.code, globals, locals) File "", line 6, in ImportError: cannot import name 'OrbitControls' from 'js' (unknown location) )

I had a rummage around in the Pyodide documentation (Type translations — Version 0.21.0.dev0) and found this but to be honest my JavaScript skills are very, very limited and I can’t tell if the OrbitControls.js is in the “globalThis global scope” or not. If anyone could help me in resolving the import error then that would be very much appreciated.

I’ve also been working on some beginner Pyscript/Three.js examples which might be useful if you are just starting out like me and getting to grips with Pyscript (awesome!) and Three.js. I’ve temporarily put the examples in an S3 bucket:
https://kersnazzle.s3.eu-west-2.amazonaws.com/index.html

3 Likes
2

Looking at the documentation link it appears that OrbitControls is part of the pythreejs namespace. That means you would:

from js import pythreejs

and the reference the class in Python:

pythreejs.OrbitControls.new()

However, I am guessing as I have not worked with that library.

Suggestion: create a separate post about your demos. Others might find them interesting to study.

1 Like
3

Thanks very much for the response John. I’ve had a quick look at the link and it looks like the pythreejs project is an attempt to bridge Python/Three.js for Jupyter Widgets. I was hoping to be able to use the Pyodide/Pyscript magic to be able to access the OrbitControls.js provided by Three.

I want to thank you for all of your blog articles as they are a fantastic resource for learning Pyscript and have really helped me get going. Keep posting!

3 Likes
4

I’ve managed to resolve my import OrbitControls issue by updating the script src to point at:

<script src="https://cdn.jsdelivr.net/npm/three@0.141.0/examples/js/controls/OrbitControls.js"></script>

Pyscript/pyodide then seems happy to import it from /js/controls/OrbitControls.js. If you use /jsm/controls/OrbitControls.js as I first did then it has a huff (technical term) about the import statement at the top of the OrbitControls.js file.

2 Likes
5

Sadly, FWIW, this doesn’t work if three is imported as a module, e.g.

    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.141.0/build/three.module.js"
            }
        }
    </script>
1 Like
6

OrbitControl is Not a part of the threejs module.

I copied OrbitControl on my web server. That works.

Example

1 Like
7

Sorry, I wasn’t clear; if three is imported as a module, importing OrbitControls via a regular script tag doesn’t work.

1 Like
8

The module can be found in
./examples/jsm/controls/…