用pythreejs嵌入小部件:错误的视角和摄像头外观 [英] Embed widgets with pythreejs: wrong perspective and camera look-at

问题描述

我正在使用pythreejs可视化某些3D模型.

I am using pythreejs to visualize some 3D models.

当在Jupyter笔记本上可视化模型时，一切都会按预期进行.

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

但是当尝试将小部件嵌入HTML文档中时，我面临两个问题:

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

• 似乎相机在加载时并未像预期的那样看着(0，0，0)，一旦与小部件交互，相机就会跳跃"并开始查看期望的坐标
• 投影(照相相机模式)丢失了也是

• 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:

但是打开export.html文件时:

请注意在交互时多维数据集的视图如何突然跳跃"以及投影如何不同:透视图，而不是正交投影(平行投影).

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

ipywidgets可能有问题吗?由于在笔记本中显示时视图还可以.

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

如何解决?

推荐答案

这是pythreejs( https://github.com/jupyter-widgets/pythreejs/issues/308 ).当任何属性更改时，同步逻辑将需要在摄像机上调用updateProjectionMatrix.与之交互时，OrbitController会调用它，这就是为什么视图在交互时被固定"的原因.

This is a bug in the CombinedCamera code in pythreejs (https://github.com/jupyter-widgets/pythreejs/issues/308). The sync logic will need to call updateProjectionMatrix on the camera when any of the attributes change. The OrbitController calls this when you interact with it, which is why the view is 'fixed' when interacting.

这篇关于用pythreejs嵌入小部件:错误的视角和摄像头外观的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！