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

Question

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

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:

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.

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

Answer 1

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

Answer 2

It took a few days, didn't get cadquery working properly, but your second question on this topic without cadquery made it possible to look at the issue...

The jumping happens because orbit.update() for target does not occurs and the function update() is not available in python; only in c++ or c#, etc. From the docs:

When animating the camera rotation above, we used the camera’s quaternion . This is the most robust method for animating free-form rotations. For example, the animation above was created by first moving the camera manually, and then reading out its position and quaternion properties at the wanted views...

The text can be found here on page 12. And also discussed here at github.

However, the jumping can be reproduced in IPython if you apply the following:

renderer = Renderer(scene=scene, camera=camera, controls=[orbit], position=target, width=view_width, height=view_height)

here position is added with target coordinates [0, 5, 0] but the update for this is only done when you mouse-click and adjust to position of the cube/camera. The jump is similar/equal to the jump as seen in the export.HTML.

Conclusion: the programmed camera position is seen as a jump after manual interference due to the absense of the .update() function of the OrbitControls python class and thus not a bug or mistake.