Sunday 12 January 2020

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

I am using pythreejs to visualize some 3D models.

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

But when trying to embed the widget in an HTML document, I am facing two problems:

  • It seems the camera, on load, is looking at (0, 0, 0), not as expected, and once you interact with the widget, the camera will "jump" and start looking at the expected coordinate
  • The projection (ortographic camera mode) is lost too

Here is the code to reproduce the error and an animation of the mentioned problem:

from ipywidgets import embed
from pythreejs import *
from IPython.display import display

base = Mesh(
    BoxBufferGeometry(20, 0.1, 20), 
    MeshLambertMaterial(color='green', opacity=0.5, transparent=True),
    position=(0, 0, 0),
)
cube = Mesh(
    BoxBufferGeometry(10, 10, 10), 
    MeshLambertMaterial(color='green', opacity=0.5, transparent=False),
    position=(0, 5, 0),
)
target = (0, 5, 0)
view_width = 600
view_height = 400
camera = CombinedCamera(position=[60, 60, 60], width=view_width, height=view_height)
camera.mode = 'orthographic'
lights = [
    PointLight(position=[100, 0, 0], color="#ffffff"),
    PointLight(position=[0, 100, 0], color="#bbbbbb"),
    PointLight(position=[0, 0, 100], color="#888888"),
    AmbientLight(intensity=0.2),
]
orbit = OrbitControls(controlling=camera, target=target)
camera.lookAt(target)
scene = Scene(children=[base, cube, camera] + lights)
renderer = Renderer(scene=scene, camera=camera, controls=[orbit],
                    width=view_width, height=view_height)
camera.zoom = 4

embed.embed_minimal_html('export.html', views=renderer, title='Renderer')
display(renderer)

The result looks good in the notebook:

enter image description here

But when opening the export.html file:

enter image description here

Note how the view of the cube "jumps" suddenly on interaction and how the projection is different: perspective instead of orthographic (parallel) projection.

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

How could it be fixed?



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

No comments:

Post a Comment