使用 pythreejs 嵌入小部件：错误的视角和相机观察

Question

我正在使用pythreejs可视化一些 3D 模型。

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

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

• 似乎相机在加载时正在查看 (0, 0, 0)，而不是按预期，一旦您与小部件交互，相机将“跳跃”并开始查看预期坐标
• 的投影（ortographic摄像机模式）丢失太

这是重现错误的代码和上述问题的动画：

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)

结果在笔记本中看起来不错：

但是打开export.html文件时：

请注意立方体的视图如何在交互时突然“跳跃”以及投影有何不同：透视而不是正交（平行）投影。

这可能是 ipywidgets 的问题吗？由于在笔记本中显示时视图没问题。

怎么可能修好？

Answer 1

这是 pytwojs 中的 CombinedCamera 代码中的一个错误（https://github.com/jupyter-widgets/py Threejs/issues/ 308）。updateProjectionMatrix当任何属性发生变化时，同步逻辑将需要调用相机。当您与 OrbitController 交互时，OrbitController 会调用它，这就是交互时视图“固定”的原因。