XML3D:相机控件和XML3D工具



在XML3D中处理用户输入和相机控件的建议方法是什么?

可以使用DOM树事件添加基本的交互性,但我不确定这是否足以提供旋转小玩意儿(例如)。库是否提供了一些API来处理用户输入和相机控制?

我注意到有xml3d工具包是一年前开发的。然而,这似乎是一个松散的演示集合,而不是一个处理用户输入的库,也没有像样的使用文档。

我需要提供基本的功能,如旋转/平移/缩放模型和控制相机。

xml3d.js本身不提供任何相机或小玩意。它们通常是特定于应用程序的(例如,有许多实现相机的方法),因此将它们作为核心库的一部分实际上没有意义。与xml3d.js一起提供了一个非常基本的相机,但它相当有限。

xml3d-toolkit确实包括转换小玩意儿和各种相机控制器,但由于创建者已经转移到其他事情上,因此它不再处于积极开发状态。尽管如此,它可能是一个很好的起点,或者至少可以作为构建自己的相机或小发明的参考。

例如,允许用户更改模型转换的一种简单方法是:
  1. 为每个模型添加一个onclick监听器,用于切换编辑模式

  2. 在UI的某个地方显示3个按钮,让用户在编辑旋转,平移或缩放之间切换

  3. <xml3d>元素添加onmouseup和onmousedown监听器以记录点击+拖动动作
  4. 作为这些监听器的一部分,根据用户所处的编辑模式,将鼠标位置的变化转换为转换的变化

  5. 将这些转换更改应用于模型,要么通过更改其CSS转换,要么通过由模型周围的<group>引用的<transform>元素上的相关属性。

  6. 如果用户单击画布以取消对象的选择(而不是单击+拖动操作),则退出编辑模式

为了避免与相机交互发生冲突,您可以使用鼠标右键进行编辑,或者在用户编辑转换时禁用相机。

3D小玩意有点棘手,因为它需要绘制在模型之上,同时仍然可以点击,目前没有办法做到这一点。你可以使用RenderInterface在清除深度缓冲区后的第二个通道中绘制gizmo,但这不会在内部对象拾取通道中完成,这需要找出用户点击了哪个对象。

作为一种解决方法,工具箱库使用了第二个XML3D画布,其透明背景位于第一个画布之上,该画布拦截并转发了所有鼠标事件。当一个对象被选中时,它的转换被镜像到绘制小玩意的第二个画布中。然后,小玩意转换的变化被镜像回主画布中的对象。

查看工具包的xml3overlay和widgets文件夹中的类。

使用XML3D实现可拖动对象的建议:

使用XML3D元素的光线拾取方法获取对象和光线交点&模型(函数getElementByRay)。将鼠标移动从屏幕坐标更改为世界坐标。您必须根据所选点到摄像机和摄像机到投影平面的相对距离缩放变换,以便移动的对象可以跟踪您的光标。

最新更新