Documentation on Three.js #1656

axiomtutor · 2023-08-29T17:40:12Z

axiomtutor
Aug 29, 2023

I'm running into a couple issues trying to figure out how to use Three.js in PyScript. (One has to do with where the renderings are placed in the page and how to change it. The other is about how to use Three.js addons, if that's possible, like for instance CSS2DRenderer.) But from googling and from trying to navigate the documentation on the PyScript website I can't find anything about this. Can anyone point me to where I could learn more about how to use this?

Or maybe even just keywords to try googling -- I tried "pyscript three.js documentation" and didn't find anything. Would you call this a "submodule" of pyscript? Or an addon or something else?

Alternately, maybe someone has a recommendation about how to approach my more general problem. I can load and render Three.js directly without PyScript. I can also load and run PyScript without Three.js. For whatever reason when I try to do both, I get a CORS exception. It seemed like perhaps the ideal solution was to just try to use PyScript's in-built reproduction of Three.js. But perhaps it's better if I just try to find out what's causing the CORS exception and address that directly?

Here is a minimal example which produces the CORS exception:

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css"/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.154.0/build/three.module.js';
globalThis.THREE = THREE;
</script>

But suppose that you would like to rotate a figure about a point that is NOT the origin!  Like this:

<py-script src="./pyscript.py"></py-script>

<script src="./cube.js" type="module"></script> 

<canvas id="c" width="500px" height="500px"></canvas>
<script  type="importmap">
{
	"imports": {
		"three": "https://threejs.org/build/three.module.js",
                "three/addons/": "https://threejs.org/examples/jsm/"
	}
}
</script><!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
</body>
</html>

If it helps, I can show the related JavaScript and so on. But the long story short is that if I remove the Three.js then it's fine, and if I remove the PyScript then it's fine. But with both of them present, I get the CORS exception.

Also the CORS exception seems only related to the addon import, and I don't really get why that would cause a problem but not the other. But I can try to research it if this is a productive thing to do.

WebReflection · 2023-08-29T19:07:15Z

WebReflection
Aug 29, 2023
Maintainer

I don't think your importmap is correct but, most importantly, I don't think you want to define that after you import three.js from another domain.

Let's assume without pyscript stuff works ... then you want to do this (order matters):

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css"/>
<script  type="importmap">
{
	"imports": {
		"three": "https://threejs.org/build/three.module.js",
                "three/addons/": "https://threejs.org/examples/jsm/"
	}
}
</script>
<script type="module">
import * as THREE from 'three';
globalThis.THREE = THREE;
</script>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>

But suppose that you would like to rotate a figure about a point that is NOT the origin!  Like this:

<py-script src="./pyscript.py"></py-script>

<!-- what's in here? -->
<script src="./cube.js" type="module"></script> 

<canvas id="c" width="500px" height="500px"></canvas>
</body>
</html>

Also, to help us help you, please stay away from polyfills 'cause also no polyfill can fix importmap at all because that's backed into the JS syntax, as native import functionality, and nothing, really nothing, can fix that on the fly.

3 replies

axiomtutor Aug 29, 2023
Author

So I tried this and still get the CORS exception:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://threejs.org/examples/jsm/. (Reason: CORS request did not succeed). Status code: (null).

I was about to show the cube.js file but I realized two things: 1) is that it's very long and all it really does is some boring animation, and 2) if you remove it I still get the CORS exception. If you're very curious, I can still share, but it is likely not important.

I'll try to stay away from polyfill -- I only had it because that's what the Three.js documentation says to do! It seems not to break anything when removed so I suppose it's fine, although I'm sure there's some reason they say to have it. (I don't really know anything about it, though, I have no real webdev background.)

WebReflection Aug 29, 2023
Maintainer

polyfills are good to enhance "the enhancable" in JS world, but syntax is not something you can enhance, so I assume their suggestion is out of legacy and not updated docs ... that being said, I've suggested removing it as it looked like you believed that could fix importmap scripts ... but I'd bet that could never be the case ... one layer of indirection down to your issue ... now ...

the CORS issue is a server side issue:

either your server explicitly avoid that, hence you need to place three.js files locally, which you could
the three.js suggested CDN doesn't allow CORS so it's actually pointless these days as a CDN

there are possible solutions to these problems but if their servers say no, there's not much we can help with, sorry.

axiomtutor Aug 29, 2023
Author

I see, thanks! I think probably then I should just download the three.js files and host them locally.

chenkianwee · 2025-12-10T18:32:32Z

chenkianwee
Dec 10, 2025

I am having challenges importing some of the three.js modules into my script.

My html I have an import map

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

My pyscript.toml

name = "my app"
packages = ["numpy""]

[js_modules.main]
"https://cdn.jsdelivr.net/npm/three@0.181.2/build/three.module.js" = "three"
"https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/controls/OrbitControls.js" = "oc"
"https://cdn.jsdelivr.net/npm/three@0.181.2/examples/jsm/utils/BufferGeometryUtils.js" = "bg"

In my script I am importing the modules as follows

from pyscript.js_modules import three as THREE
from pyscript.js_modules.oc import OrbitControls
from pyscript.js_modules.bg import BufferGeometryUtils

This works fine with THREE and OrbitControls. However, if I try to import BufferGeometryUtils I get the following error

File "<exec>", line 10, in <module>
  File "/lib/python3.13/site-packages/pyscript_3dapp_lib/libthree.py", line 5, in <module>
    from pyscript.js_modules.bg import BufferGeometryUtils
ModuleNotFoundError: No module named 'None'

What could be the issue here? Thanks

1 reply

chenkianwee Dec 10, 2025

I think I resolve the issue. As I check the BufferGeometryUtils.js file BufferGeometryUtils is not explicitly exported so if I just import the function I need to use I do not get an error.

from pyscript.js_modules.bg import mergeGeometries
However I am having another challenge ...

chenkianwee · 2025-12-10T21:02:33Z

chenkianwee
Dec 10, 2025

I am trying to visualize voxels (world build up with boxes kind of like mindcraft) That is why I want to use the mergeGeometries function to reduce the drawing load for threejs. The code below tries to merge outline of the cubes and viz them. However, I keep getting the error TypeError: PyProxy is not a constructor. The error is from the line merged_edges = mergeGeometries(geometries, False) How do I convert the python list of jsproxy threejs geometries into the right objects for the script to work? Thanks

geometries = []
for cnt,midpt in enumerate(positions):
    cube = THREE.BoxGeometry.new(1, 1, 1)
    cube.applyMatrix4(THREE.Matrix4.new().makeTranslation(positions[0], positions[1], positions[2]))
    edge_geom = THREE.EdgesGeometry.new(cube)

geometries = to_js(geometries)
merged_edges = mergeGeometries(geometries, False)
outline = THREE.LineSegments.new(merged_edges, THREE.LineBasicMaterial.new(vertexColors = True))

1 reply

chenkianwee Dec 10, 2025

Ah I solve it there is no problem with the script. It was just an error on my part, I have put in the wrong arguments. At the line edge_geom.setAttribute('color', THREE.BufferAttribute.new(color, 3)) I have carelessly put the 'colors' instead of 'color' causing a prob malformed JS object and giving me all the errors.

geometries = []
    for cnt,midpt in enumerate(midpts):
        cube = THREE.BoxGeometry.new(vox_dim, vox_dim, vox_dim)
        midpt = window.Float32Array.new(midpt)
        cube.applyMatrix4(THREE.Matrix4.new().makeTranslation(midpt[0], midpt[1], midpt[2]))
        # edges geometry
        edge_geom = THREE.EdgesGeometry.new(cube)
        color = colors[cnt]
        color = window.Float32Array.new(color)
        edge_geom.setAttribute('color', THREE.BufferAttribute.new(color, 3))
        outline = THREE.LineSegments.new(edge_geom, THREE.LineBasicMaterial.new(vertexColors = True))
        geometries.append(edge_geom)

Documentation on Three.js #1656

Uh oh!

Uh oh!

axiomtutor Aug 29, 2023

Replies: 3 comments · 5 replies

Uh oh!

WebReflection Aug 29, 2023 Maintainer

Uh oh!

axiomtutor Aug 29, 2023 Author

Uh oh!

Uh oh!

WebReflection Aug 29, 2023 Maintainer

Uh oh!

axiomtutor Aug 29, 2023 Author

Uh oh!

chenkianwee Dec 10, 2025

Uh oh!

chenkianwee Dec 10, 2025

Uh oh!

chenkianwee Dec 10, 2025

Uh oh!

chenkianwee Dec 10, 2025

axiomtutor
Aug 29, 2023

Replies: 3 comments 5 replies

WebReflection
Aug 29, 2023
Maintainer

axiomtutor Aug 29, 2023
Author

WebReflection Aug 29, 2023
Maintainer

axiomtutor Aug 29, 2023
Author

chenkianwee
Dec 10, 2025

chenkianwee
Dec 10, 2025