# Failing to import OrbitControls from Three.js using Pyscript

**URL:** <https://forum.anaconda.com/t/failing-to-import-orbitcontrols-from-three-js-using-pyscript/24162>\
**Category:** PyScript\
**Created:** [June 6, 2022, 5:29pm UTC](https://forum.anaconda.com/t/failing-to-import-orbitcontrols-from-three-js-using-pyscript/24162 "2022-06-06T17:29:11Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Adam](https://avatars.discourse-cdn.com/v4/letter/a/00a5b5/32.png) [@Adam](https://forum.anaconda.com/u/Adam)\
**Post date:** [June 6, 2022, 5:29pm UTC](https://forum.anaconda.com/t/failing-to-import-orbitcontrols-from-three-js-using-pyscript/24162/1 "2022-06-06T17:29:11Z")

</div>

Hello!

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

```auto
<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:

```auto
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](https://pyodide.org/en/latest/usage/type-conversions.html#importing-javascript-objects-into-python)) 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](https://kersnazzle.s3.eu-west-2.amazonaws.com/index.html)

---

<div class="post-metadata">

**Author:** ![john.hanley](https://dub1.discourse-cdn.com/anaconda/user_avatar/forum.anaconda.com/john.hanley/32/1294_2.png) [@john.hanley](https://forum.anaconda.com/u/john.hanley)\
**Post date:** [June 6, 2022, 10:42pm UTC](https://forum.anaconda.com/t/failing-to-import-orbitcontrols-from-three-js-using-pyscript/24162/2 "2022-06-06T22:42:46Z")

</div>

Looking at the documentation [link](https://pythreejs.readthedocs.io/en/stable/api/controls/OrbitControls_autogen.html) 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.

---

<div class="post-metadata">

**Author:** ![Adam](https://avatars.discourse-cdn.com/v4/letter/a/00a5b5/32.png) [@Adam](https://forum.anaconda.com/u/Adam)\
**Post date:** [June 7, 2022, 6:06am UTC](https://forum.anaconda.com/t/failing-to-import-orbitcontrols-from-three-js-using-pyscript/24162/3 "2022-06-07T06:06:26Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Adam](https://avatars.discourse-cdn.com/v4/letter/a/00a5b5/32.png) [@Adam](https://forum.anaconda.com/u/Adam)\
**Post date:** [June 14, 2022, 12:37pm UTC](https://forum.anaconda.com/t/failing-to-import-orbitcontrols-from-three-js-using-pyscript/24162/4 "2022-06-14T12:37:44Z")

</div>

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

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Ben\_Alkov](https://dub1.discourse-cdn.com/anaconda/user_avatar/forum.anaconda.com/ben_alkov/32/1669_2.png) [@Ben\_Alkov](https://forum.anaconda.com/u/Ben_Alkov)\
**Post date:** [July 9, 2022, 6:45pm UTC](https://forum.anaconda.com/t/failing-to-import-orbitcontrols-from-three-js-using-pyscript/24162/5 "2022-07-09T18:45:59Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![hebi](https://dub1.discourse-cdn.com/anaconda/user_avatar/forum.anaconda.com/hebi/32/1549_2.png) [@hebi](https://forum.anaconda.com/u/hebi)\
**Post date:** [July 10, 2022, 9:21am UTC](https://forum.anaconda.com/t/failing-to-import-orbitcontrols-from-three-js-using-pyscript/24162/6 "2022-07-10T09:21:22Z")

</div>

OrbitControl is Not a part of the threejs module.

I copied OrbitControl on my web server. That works.

Example

> <https://github.com/Python-Ninja-Hebi/pyscript-threejs/blob/master/globe.html>

---

<div class="post-metadata">

**Author:** ![Ben\_Alkov](https://dub1.discourse-cdn.com/anaconda/user_avatar/forum.anaconda.com/ben_alkov/32/1669_2.png) [@Ben\_Alkov](https://forum.anaconda.com/u/Ben_Alkov)\
**Post date:** [July 14, 2022, 8:39pm UTC](https://forum.anaconda.com/t/failing-to-import-orbitcontrols-from-three-js-using-pyscript/24162/7 "2022-07-14T20:39:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hebi](https://dub1.discourse-cdn.com/anaconda/user_avatar/forum.anaconda.com/hebi/32/1549_2.png) [@hebi](https://forum.anaconda.com/u/hebi)\
**Post date:** [July 24, 2022, 3:43pm UTC](https://forum.anaconda.com/t/failing-to-import-orbitcontrols-from-three-js-using-pyscript/24162/8 "2022-07-24T15:43:02Z")

</div>

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