XML3D:相机控件和 XML3D 工具

XML3D: Camera controls & XML3D tools

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

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

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

我需要提供基本功能,例如 rotation/translation/scaling 模型和控制相机。

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

xml3d-toolkit 确实包括转换小工具和各种相机控制器,但它不再处于积极开发中,因为创作者已经转向其他事情。不过,它可能是一个很好的起点,或者至少可以作为构建您自己的相机或小发明的参考。

例如,允许用户更改模型转换的简单方法是:

  1. 为每个切换编辑模式的模型添加一个 onclick 侦听器

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

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

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

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

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

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

作为解决方法,工具包库使用了第二个 XML3D canvas,透明背景位于第一个拦截和中继所有鼠标事件的上方。当一个对象被选中时,它的变换被镜像到绘制 gizmo 的第二个 canvas 中。 Gizmo 变换的变化随后被镜像回主 canvas 中的对象。

查看工具包 xml3doverlay and widgets 文件夹中的 类。

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

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