javascript - XML3D：相机控件和 XML3D 工具

Question

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

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

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

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

Answer 1

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

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

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

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

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

3. 将 onmouseup 和 onmousedown 监听器添加到<xml3d>元素以记录单击+拖动动作

4. 作为这些侦听器的一部分，根据用户所处的编辑模式将鼠标位置的变化转换为转换的变化

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

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

为了防止它与相机交互冲突，您可以使用鼠标右键进行编辑，或者在用户编辑转换时简单地禁用相机。

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

作为一种变通方法，工具包库使用第二个 XML3D 画布，其透明背景位于第一个画布之上，拦截并中继所有鼠标事件。当一个对象被选中时，它的变换被镜像到绘制 Gizmo 的第二个画布中。然后将 Gizmo 变换中的更改镜像回主画布中的对象。

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

Answer 2

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

使用 XML3D 元素的光线拾取方法来获取对象以及光线和模型的交点（函数getElementByRay）。将鼠标移动从屏幕坐标更改为世界坐标。您必须通过拾取点到相机和相机到投影平面的相对距离来缩放变换，以便移动对象可以跟踪您的光标。