Pythreejs Example#
Thebe can display output from pythreejs. The examples are taken from the pythreejs documentation and are licensed under the BSD 3-Clause License.
Setup#
Be sure to load require.js before any of your thebe activation code so that the Jupyter widgets can function:
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"></script>
Configure thebe and load it:
<script type="text/x-thebe-config">
{
requestKernel: true,
binderOptions: {
repo: "jupyter-widgets/pythreejs",
ref: "2.2.1",
binderUrl: "https://mybinder.org",
repoProvider: "github",
},
}
</script>
<script src="https://unpkg.com/thebe@latest/lib/index.js"></script>
Create a button to activate thebe:
<button id="activateButton" style="width: 120px; height: 40px; font-size: 1.5em;">
Activate
</button>
<script>
var bootstrapThebe = function() {
thebe.bootstrap();
}
document.querySelector("#activateButton").addEventListener('click', bootstrapThebe)
</script>
Now add code cells between these HTML tags:
<pre data-executable="true" data-language="python"></pre>
Examples#
Press the “Activate” button below to connect to a Jupyter server:
Primitive shapes can be displayed:
from pythreejs import BoxGeometry BoxGeometry( width=5, height=10, depth=15, widthSegments=5, heightSegments=10, depthSegments=15)
More complex shapes can be constructed and viewed:
from IPython.display import display from pythreejs import (ParametricGeometry, Mesh, PerspectiveCamera, Scene, MeshLambertMaterial, DirectionalLight, AmbientLight, Renderer, OrbitControls, PerspectiveCamera) f = """ function f(origu, origv, out) { // scale u and v to the ranges I want: [0, 2*pi] var u = 2*Math.PI*origu; var v = 2*Math.PI*origv; var x = Math.sin(u); var y = Math.cos(v); var z = Math.cos(u+v); out.set(x,y,z); } """ surf_g = ParametricGeometry(func=f, slices=16, stacks=16) surf = Mesh(geometry=surf_g, material=MeshLambertMaterial(color='green', side='FrontSide')) surf2 = Mesh(geometry=surf_g, material=MeshLambertMaterial(color='yellow', side='BackSide')) c = PerspectiveCamera(position=[5, 5, 3], up=[0, 0, 1], children=[DirectionalLight(color='white', position=[3, 5, 1], intensity=0.6)]) scene = Scene(children=[surf, surf2, c, AmbientLight(intensity=0.5)]) renderer = Renderer(camera=c, scene=scene, controls=[OrbitControls(controlling=c)], width=400, height=400) display(renderer)