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

Question

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

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

但是当试图将小部件嵌入 HTML 文档时，我遇到了两个问题：

似乎相机在加载时正在注视 (0, 0, 0)，与预期不符，一旦您与小部件交互，相机将 "jump" 并开始注视预期坐标
projection（正交相机模式）也丢失了

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

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文件时：

请注意立方体的视图 "jumps" 突然发生交互以及投影有何不同：perspective instead of orthographic (parallel) projection。

会不会是ipywidgets的问题？由于在笔记本中显示时视图还可以。

如何修复？

Answer 1

花了几天时间，没有让 cadquery 正常工作，你的中关于这个主题的代码也没有 cadquery 这里的代码使查看问题成为可能...

发生跳转是因为目标orbit.update()没有发生并且函数update()在python中不可用；仅在 c++ 或 c# 等中。来自文档：

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...

可以在 github 找到文本 here on page 12. And also discussed here。

但是，如果您应用以下内容，则可以在 IPython 中重现跳跃：

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

此处 position 添加了目标坐标 [0, 5, 0] 但仅当您单击鼠标并调整到 cube/camera 的位置时才会更新此内容。跳转是 similar/equal 到 export.HTML.

中看到的跳转

结论：由于缺少OrbitControlspythonclass的.update()功能，在手动干扰后，编程的相机位置被视为跳跃，因此不是错误或错误。

更新 1 - Ipython 渲染器输出而不是运行在 jupyter-notebook 中：

target = (0,5,0)
Renderer(camera=CombinedCamera(height=400.0, mode='orthographic', position=(60.0, 60.0, 60.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0), width=600.0, zoom=4.0), controls=[OrbitControls(controlling=CombinedCamera(height=400.0, mode='orthographic', position=(60.0, 60.0, 60.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0), width=600.0, zoom=4.0), target=(0.0, 5.0, 0.0))], scene=Scene(children=(Mesh(geometry=BoxBufferGeometry(depth=20.0, height=0.1, width=20.0), material=MeshLambertMaterial(alphaMap=None, aoMap=None, color='green', emissiveMap=None, envMap=None, lightMap=None, map=None, opacity=0.5, specularMap=None, transparent=True), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), Mesh(geometry=BoxBufferGeometry(depth=10.0, height=10.0, width=10.0), material=MeshLambertMaterial(alphaMap=None, aoMap=None, color='green', emissiveMap=None, envMap=None, lightMap=None, map=None, opacity=0.5, specularMap=None), position=(0.0, 5.0, 0.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), CombinedCamera(height=400.0, mode='orthographic', position=(60.0, 60.0, 60.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0), width=600.0, zoom=4.0), PointLight(position=(100.0, 0.0, 0.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), PointLight(color='#bbbbbb', position=(0.0, 100.0, 0.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), PointLight(color='#888888', position=(0.0, 0.0, 100.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), AmbientLight(intensity=0.2, quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0))), fog=None, overrideMaterial=None, quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), shadowMap=WebGLShadowMap())

target = (0,0,0)
Renderer(camera=CombinedCamera(height=400.0, mode='orthographic', position=(60.0, 60.0, 60.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0), width=600.0, zoom=4.0), controls=[OrbitControls(controlling=CombinedCamera(height=400.0, mode='orthographic', position=(60.0, 60.0, 60.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0), width=600.0, zoom=4.0))], scene=Scene(children=(Mesh(geometry=BoxBufferGeometry(depth=20.0, height=0.1, width=20.0), material=MeshLambertMaterial(alphaMap=None, aoMap=None, color='green', emissiveMap=None, envMap=None, lightMap=None, map=None, opacity=0.5, specularMap=None, transparent=True), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), Mesh(geometry=BoxBufferGeometry(depth=10.0, height=10.0, width=10.0), material=MeshLambertMaterial(alphaMap=None, aoMap=None, color='green', emissiveMap=None, envMap=None, lightMap=None, map=None, opacity=0.5, specularMap=None), position=(0.0, 5.0, 0.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), CombinedCamera(height=400.0, mode='orthographic', position=(60.0, 60.0, 60.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0), width=600.0, zoom=4.0), PointLight(position=(100.0, 0.0, 0.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), PointLight(color='#bbbbbb', position=(0.0, 100.0, 0.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), PointLight(color='#888888', position=(0.0, 0.0, 100.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), AmbientLight(intensity=0.2, quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0))), fog=None, overrideMaterial=None, quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), shadowMap=WebGLShadowMap())

target = (0, 5, 0) and position=target
Renderer(camera=CombinedCamera(height=400.0, mode='orthographic', position=(60.0, 60.0, 60.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0), width=600.0, zoom=4.0), controls=[OrbitControls(controlling=CombinedCamera(height=400.0, mode='orthographic', position=(60.0, 60.0, 60.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0), width=600.0, zoom=4.0), target=(0.0, 5.0, 0.0))], scene=Scene(children=(Mesh(geometry=BoxBufferGeometry(depth=20.0, height=0.1, width=20.0), material=MeshLambertMaterial(alphaMap=None, aoMap=None, color='green', emissiveMap=None, envMap=None, lightMap=None, map=None, opacity=0.5, specularMap=None, transparent=True), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), Mesh(geometry=BoxBufferGeometry(depth=10.0, height=10.0, width=10.0), material=MeshLambertMaterial(alphaMap=None, aoMap=None, color='green', emissiveMap=None, envMap=None, lightMap=None, map=None, opacity=0.5, specularMap=None), position=(0.0, 5.0, 0.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), CombinedCamera(height=400.0, mode='orthographic', position=(60.0, 60.0, 60.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0), width=600.0, zoom=4.0), PointLight(position=(100.0, 0.0, 0.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), PointLight(color='#bbbbbb', position=(0.0, 100.0, 0.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), PointLight(color='#888888', position=(0.0, 0.0, 100.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), AmbientLight(intensity=0.2, quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0))), fog=None, overrideMaterial=None, quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), shadowMap=WebGLShadowMap())

target = (0,0,0)  and position=(0, 5, 0)
Renderer(camera=CombinedCamera(height=400.0, mode='orthographic', position=(60.0, 60.0, 60.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0), width=600.0, zoom=4.0), controls=[OrbitControls(controlling=CombinedCamera(height=400.0, mode='orthographic', position=(60.0, 60.0, 60.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0), width=600.0, zoom=4.0))], scene=Scene(children=(Mesh(geometry=BoxBufferGeometry(depth=20.0, height=0.1, width=20.0), material=MeshLambertMaterial(alphaMap=None, aoMap=None, color='green', emissiveMap=None, envMap=None, lightMap=None, map=None, opacity=0.5, specularMap=None, transparent=True), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), Mesh(geometry=BoxBufferGeometry(depth=10.0, height=10.0, width=10.0), material=MeshLambertMaterial(alphaMap=None, aoMap=None, color='green', emissiveMap=None, envMap=None, lightMap=None, map=None, opacity=0.5, specularMap=None), position=(0.0, 5.0, 0.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), CombinedCamera(height=400.0, mode='orthographic', position=(60.0, 60.0, 60.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0), width=600.0, zoom=4.0), PointLight(position=(100.0, 0.0, 0.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), PointLight(color='#bbbbbb', position=(0.0, 100.0, 0.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), PointLight(color='#888888', position=(0.0, 0.0, 100.0), quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), AmbientLight(intensity=0.2, quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0))), fog=None, overrideMaterial=None, quaternion=(0.0, 0.0, 0.0, 1.0), scale=(1.0, 1.0, 1.0), up=(0.0, 1.0, 0.0)), shadowMap=WebGLShadowMap())

为了测试 export.html 的 .update()，我考虑搜索免费的 SDD，这样我就可以使用我当前的 yml 文件在 linux conda 环境中对其进行测试。

Answer 2

这是 pythreejs (https://github.com/jupyter-widgets/pythreejs/issues/308) 中 CombinedCamera 代码中的错误。当任何属性发生变化时，同步逻辑将需要在相机上调用 updateProjectionMatrix。 OrbitController 在与它交互时会调用它，这就是交互时视图为 'fixed' 的原因。

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

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

python

three.js

jupyter-notebook

ipywidgets

pythreejs