XML3D：相机控件＆amp; XML3D工具

Question

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

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

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

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

Answer 1

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

xml3d-toolkit确实包含了转换小玩意和各种相机控制器，但由于创作者已转向其他事物，因此它不再处于活跃开发阶段。尽管如此，它可能是一个很好的起点，或者至少可以用作构建自己的相机或小发明的参考。

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

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

2. 在用户界面的某处显示3个按钮，让用户在编辑旋转，翻译或缩放之间切换

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

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

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

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

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

3D小发明有点棘手，因为它需要在模型顶部绘制，同时仍然可以点击，目前无法做到这一点。清除深度缓冲区后，您可以使用RenderInterface在第二遍中绘制Gizmo，但这不会在找出用户点击的对象所需的内部对象拾取过程中完成。

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

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

Answer 2

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

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