pythonjupyter-notebookthree.jsipywidgetscadquery

Embed widgets with jupyter-cadquery (threejs): wrong position on load


I am using jupyter-cadquery to visualize some 3D models made with CadQuery.

When visualizing the models on a Jupyter notebook, everything works as expected.

But when trying to embed the widget in an HTML document, it seems the camera, on load, is pointing to (0, 0, 0), not as expected. Once you interact with the widget, the camera will point to the expected coordinate.

Here is the code to reproduce the error and an animation of the mentioned problem (see instructions bellow on how to reproduce it with Binder):

from cadquery import Workplane
from ipywidgets import embed
from jupyter_cadquery.cad_view import CadqueryView
from jupyter_cadquery.cadquery import Assembly
from jupyter_cadquery.cadquery import Part


# Create a simple assembly
box1 = Workplane('XY').box(10, 10, 10).translate((0, 0, 5))
a1 = Assembly([Part(box1)], "example 1")

# Generate HTML
a1.collect_shapes()
view = CadqueryView()
for shape in a1.collect_shapes():
    view.add_shape(shape["name"], shape["shape"], shape["color"])
renderer = view.render()
embed.embed_minimal_html('export.html', views=renderer, title='Renderer')

renderer

output

Note how the view of the cube "jumps" suddenly on interaction.

Could it be an issue with ipywidgets? Since the view is okay when displayed in the notebook.

How could it be fixed?

How to reproduce

You can reproduce it with Binder, without needing to create a local environment (admitedly, installing CadQuery/jupyter-cadquery is not the easiest/fastest thing to do):

https://mybinder.org/v2/gh/bernhard-42/jupyter-cadquery/master?urlpath=lab&filepath=examples%2Fcadquery.ipynb

Just execute the code above in a new empty notebook. See how the renderer shows the 3D model without any issues on the notebook:

Screenshot from 2019-12-23 21-28-42

After execution, an export.html document will also appear in the file list on the left. Open it and make sure to click on the "Trust HTML" button on top of the viewer and hit refresh. If you interact with the view, you can reproduce the issue.

Screenshot from 2019-12-23 21-25-21

Note that, also, the perspective is lost (that is not an orthogonal view). Fixing that would be a plus! ^^


Solution

  • This can be reproduced without the need of jupyter-cadquery, so a new question has been opened instead:

    Embed widgets with pythreejs: wrong perspective and camera look-at