6

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

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

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

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

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

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 的问题？由于在笔记本中显示时视图没问题。

怎么可能修好？

4

2 回答 2

2

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

于 2020-01-16T15:43:36.413 回答
-1

花了几天时间，没有让 cadquery 正常工作，也没有你第一个问题的代码没有 cadquery 这里的代码可以查看这个问题......

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

在为上面的相机旋转设置动画时，我们使用了相机的四元数。这是动画自由形式旋转的最强大的方法。例如，上面的动画是通过首先手动移动相机，然后在想要的视图中读取它的位置和四元数属性来创建的......

文本可以在第 12 页找到。也可以在github 上讨论。

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

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

这里position添加了目标坐标 [0, 5, 0] 但仅当您单击鼠标并调整到立方体/相机的位置时才完成此更新。跳转类似于/等于在 export.HTML 中看到的跳转。

结论：由于没有OrbitControls python类的功能，编程的相机位置被视为手动干预后的跳跃.update()，因此不是错误或错误。

更新 1 - 未在 jupyter-notebook 中运行的 Ipython 渲染器输出：

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 环境中测试它。

于 2020-01-04T15:06:40.677 回答