How to use pythreejs

[axiomtutor]

I am trying to use the documentation here: https://quarto.org/docs/interactive/widgets/jupyter.html

to guide me in implementing something in pythreejs. To just do a kind of "hello world" so to speak, I wrote the most basic example I could find on the pythreejs website. Ultimately that was the following, put into a Quarto doc. (In order to typeset it in markdown I replaced the inner triple-tickmark environment with "threeTicks".)

---
title: "Demo"
---

threeTicks {python}
from pythreejs import *
import ipywidgets
from IPython.display import display
from pythreejs._example_helper import use_example_model_ids
use_example_model_ids()
view_width = 600
view_height = 400
sphere = Mesh(
    SphereBufferGeometry(1, 32, 16),
    MeshStandardMaterial(color='red')
)
cube = Mesh(
    BoxBufferGeometry(1, 1, 1),
    MeshPhysicalMaterial(color='green'),
    position=[2, 0, 4]
)
camera = PerspectiveCamera( position=[10, 6, 10], aspect=view_width/view_height)
key_light = DirectionalLight(position=[0, 10, 10])
ambient_light = AmbientLight()
positon_track = VectorKeyframeTrack(name='.position',
    times=[0, 2, 5],
    values=[10, 6, 10,
            6.3, 3.78, 6.3,
            -2.98, 0.84, 9.2,
           ])
rotation_track = QuaternionKeyframeTrack(name='.quaternion',
    times=[0, 2, 5],
    values=[-0.184, 0.375, 0.0762, 0.905,
            -0.184, 0.375, 0.0762, 0.905,
            -0.0430, -0.156, -0.00681, 0.987,
           ])
camera_clip = AnimationClip(tracks=[positon_track, rotation_track])
camera_action = AnimationAction(AnimationMixer(camera), camera_clip, camera)
scene = Scene(children=[sphere, cube, camera, key_light, ambient_light])
controller = OrbitControls(controlling=camera)
renderer = Renderer(camera=camera, scene=scene, controls=[controller],
                    width=view_width, height=view_height)
renderer
threeTicks

When I render in Quarto, the page hangs on the splash screen. The console contains the error message:

Uncaught (in promise) Error: Mismatched anonymous define() module: function(exports){"use strict";"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var errorStackParser={exports:{}},stackframe={exports:{}};!function(module,exports){module.exports=function(){function _isNumber(n){return!isNaN(parseFloat(n))&&isFinite(n)}function _capitalize(str){return str.charAt(0).toUpperCase()+str.substring(1)}function _getter(p){return function(){return this[p]}}var booleanProps=["isConstructor","isEval","isNative","isToplevel"],numericProps=["columnNumber","lineNumber"],stringProps=["fileName","functionName","source"],arrayProps=["args"],objectProps=["evalOrigin"],props=booleanProps.concat(numericProps,stringProps,arrayProps,objectProps);function StackFrame(obj){if(obj)for(var i=0;i<props.length;i++)void 0!==obj[props[i]]&&this["set"+_capitalize(props[i])](obj[props[i]])}StackFrame.prototype={getArgs:function(){return this.args},setArgs:…
    makeError https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1
    T https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1
    s https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1
    requirejs https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js:1
    S https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js:26
    S https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js:26
    I https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js:26
    <anonymous> https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js:29

I'm not sure if I'm just using it wrong or something, but I'd appreciate any insight anyone can give.

[cscheid]

You're attempting to use three pieces of software (jupyter widgets, threejs, quarto) that together require relatively deep knowledge of Javascript in its many different incarnations. Please don't take this the wrong way, but you might find better success if you succeed at a simpler version of what you're trying to do first. I asked in the other issue you created about debugging the generated HTML, and here the issue appears to be that something in your setup is attempting to mix different Javascript build systems.

Have you confirmed that:

• you can reproduce the jupyter widgets example in our documentation?
• what you're attempting to do works on a jupyter notebook by itself?

From there, the next step would be to render that resulting notebook into an .html file with quarto render nb.ipynb --to html, and so on. But you will need to know enough HTML and Javascript to be able to diagnose what's happening during the Javascript initialization of a number of different libraries.

[axiomtutor]

Please don't take this the wrong way, but you might find better success if you succeed at a simpler version of what you're trying to do first.

I would be happy to! And sorry for not responding on the other issue until now -- I thought I did, but I must not have hit submit when I wrote my response. I've responded now.

I've been trying to get the other widgets in the documentation to work. Neither does. With the ipyleaflet I get the exception in the browser

Uncaught (in promise) ReferenceError: loadPyodide is not defined

At least as far as I can tell, I've installed all the dependencies and written the example just as described in the docs.

[cscheid]

I've been trying to get the other widgets in the documentation to work. Neither does.

Ok. The documentation I linked to is using those widgets, which indicates to me that it's not (at least not only) quarto at fault here. If you want to confirm that, you can attempt to clone and render our website locally: https://github.com/quarto-dev/quarto-web

Uncaught (in promise) ReferenceError: loadPyodide is not defined

We don't use pyiodide ourselves in quarto, so I suspect something is happening with your pyiodide setup. Unfortunately, I can't be of much help there.

[axiomtutor]

That makes sense. I think I may need to start thinking about exactly what kinds of compromises I may want to make about the things I want to build.

Just in case it's of interest on your end, when I clone and render the website I get the error which is mentioned here: https://github.com/quarto-dev/quarto-cli/issues/4114

From the shell:

ERROR: Project _quarto.yml validation failed.

In file C:\Users\ax\quarto-web\_quarto.yml
(line 21, columns 3--15) property name bread-crumbs is invalid
20:   page-navigation: true
21:   bread-crumbs: true
     ~~~~~~~~~~~~~
22:   search:
i The error happened in location website:bread-crumbs.

Error: Project _quarto.yml validation failed.

In file C:\Users\ax\quarto-web\_quarto.yml
(line 21, columns 3--15) property name bread-crumbs is invalid
20:   page-navigation: true
21:   bread-crumbs: true
     ~~~~~~~~~~~~~
22:   search:
i The error happened in location website:bread-crumbs.

    at readAndValidateYamlFromFile (file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:42120:15)
    at async file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:82873:26
    at async projectContext (file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:82725:26)
    at async serveProject (file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:103151:19)
    at async Command.fn (file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:103749:13)
    at async Command.execute (file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:8437:13)
    at async quarto (file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:127542:5)
    at async file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:127560:9
PS C:\Users\ax\quarto-web> quarto render
ERROR: Project _quarto.yml validation failed.

In file C:\Users\ax\quarto-web\_quarto.yml
(line 21, columns 3--15) property name bread-crumbs is invalid
20:   page-navigation: true
21:   bread-crumbs: true
     ~~~~~~~~~~~~~
22:   search:
i The error happened in location website:bread-crumbs.

Error: Project _quarto.yml validation failed.

In file C:\Users\ax\quarto-web\_quarto.yml
(line 21, columns 3--15) property name bread-crumbs is invalid
20:   page-navigation: true
21:   bread-crumbs: true
     ~~~~~~~~~~~~~
22:   search:
i The error happened in location website:bread-crumbs.

    at readAndValidateYamlFromFile (file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:42120:15)
    at async file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:82873:26
    at async projectContext (file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:82725:26)
    at async render (file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:90657:21)
    at async Command.fn (file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:90856:32)
    at async Command.execute (file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:8437:13)
    at async quarto (file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:127542:5)
    at async file:///C:/Users/ax/AppData/Local/Programs/Quarto/bin/quarto.js:127560:9

[axiomtutor]

Crap, also, I'm just now realizing that when I tried to get the other widgets working, I put them in a different file than the demo.qmd file that I showed above. In fact, without realizing it, I put them in a file which also loads PyScript. When I remove the PyScript, now the widgets work. So indeed this seems not to be an issue on Quarto's side.

I think if I could just figure out how to change the target of the <py-script> tags when they render, it would solve everything. I just can't find the docs for this! Oh well, wish me luck. :)

Thanks for your help, and the very cool Quarto software! I've been loving it and telling everyone I know about it.

[cscheid]

Just in case it's of interest on your end, when I clone and render the website I get the error which is mentioned here: https://github.com/quarto-dev/quarto-cli/issues/4114

FWIW I don't think it's the same error; I think what's happening is that breadcrumbs are a 1.4 feature, and you're probably rendering with an older version of quarto.