我们如何在 Z 轴上平移 QML 矩形，而不仅仅是 X 和 Y？答案

【问题标题】：How do we translate a QML Rectangle on the Z axis, not just X and Y?我们如何在 Z 轴上平移 QML 矩形，而不仅仅是 X 和 Y？
【发布时间】：2015-10-26 06:50:54
【问题描述】：

是否可以像在 HTML 中使用 CSS transform:translateZ() 和 transform:translate3d() 那样在 Z 轴上转换 QML 矩形？

在 Rectangle 上应用 transform: Translate {x: 0; y: 0; z: 100} 会引发 z 属性未定义的错误。

我可以将transform: Rotation{} 应用于具有 z 轴旋转的矩形，它看起来是 3D 的。我希望我也可以翻译成 3D 的东西。

有办法吗？

编辑：我尝试像这样设置 Matrix4x4：

        transform: Matrix4x4 {
            matrix: Qt.matrix4x4(
                1,0,0,0,
                0,1,0,0,
                0,0,1,10,
                0,0,0,1
            )
        }

我将数字 10 设置为我认为 Z 平移的位置，但矩形只是消失了，而不是靠近相机一点。

【问题讨论】：

标签： qt 3d qml transform

【解决方案1】：

在Rectangle 上应用转换：Translate {x: 0; y: 0; z: 100} 会引发错误，因为Translate 只有x 和y 属性（请参阅http://doc.qt.io/qt-5/qml-qtquick-translate.html）。

Transform 与您尝试使用它的方式不对应，因为z 不是沿 z 轴的位置。 z 是“堆叠顺序”，用于控制哪些项目被绘制在其他项目之上或之下（http://doc.qt.io/qt-5/qml-qtquick-item.html#z-prop）。

如果你想让你的Rectangle 看起来“离相机更近一点”，Scale 似乎可以使用Transform (http://doc.qt.io/qt-5/qml-qtquick-scale.html) 或者只使用该项目的scale 属性(@ 987654325@)。

这个answer 也可能对您有帮助，因为其他人也有类似的问题。它说明了如何沿不同的轴旋转。例如，您可以执行以下操作：transform: Rotation { origin.x: 50; origin.y: 55; axis { x: 0; y: 1; z: 0 } angle: 60}。

请注意，实际上不可能沿“z 轴”翻译 QML Rectangle。因此，如果您的目标是在 QML 中创建 3D 场景，两个可能的选项是 Qt Canvas3D 或 Qt3D 模块。如果你想使用three.js，请查看post

【讨论】：

为此使用比例是一种技巧。我想旋转物体并在 3D 空间中移动它们，类似于这个 HTML5 示例：threejs.org/examples/#css3d_periodictable 单击“SPHERE”和/或旋转场景以查看它是 3D 的。
你可以这样做：'transform: Rotation { origin.x: 50;起源.y：55；轴 { x: 1;是：1； z：0}角度：60}'。但是根据您链接到的示例，我认为这不是您要寻找的东西。如果您想使用three.js，请查看Qt Canvas 3D 和这篇文章blog.qt.io/blog/2015/06/05/porting-three-js-code-to-canvas3d
如果要在 QML 中创建 3D 场景，Qt Canvas3D 或 Qt3D 模块有两个选项
我可以在 Qt3D 中使用 Rectangle 吗（我认为 Canvas 3D 是不可能的。我仍然想要 Item、Rectangle 等的好处，但只是想像我们一样在 3D 空间中操作它们可以使用 HTML DOM 和 CSS 转换。
似乎 QML Transform 类型应该支持 3D 至少在这方面与 HTML 处于同一水平。