Qt6 QML Book/Qt Quick 3D/混合2D和3D内容

Mixing 2D and 3D Contents

混合2D和3D内容

Qt Quick 3D has been built to integrate nicely into the traditional Qt Quick used to build dynamic 2D contents.

Qt Quick 3D已经构建，可以很好地集成到用于构建动态2D内容的传统Qt Quick中。

3D Contents in a 2D Scene

2D场景中的3D内容

It is straight forward to mix 3D contents into a 2D scene, as the View3D element represents a 2D surface in the Qt Quick scene.

直接将3D内容混合到2D场景中是很简单的，因为View3D元素表示Qt Quick场景中的2D曲面。

There are a couple of properties that can be of interest when combining 3D contents into a 2D scene this way.

当以这种方式将3D内容组合到2D场景中时，有两个属性可能很有趣。

First, the renderMode of View3D, which lets you control if the 3D contents is rendered behind, in-front-of, or inline with the 2D contents. It can also be rendered on an off-screen buffer which then is combined with the 2D scene.

首先是View3D的renderMode，它允许您控制3D内容是在2D内容的后面、前面还是与2D内容内联。它也可以在屏幕外缓冲区上渲染，然后与2D场景结合。

The other property is the backgroundMode of the SceneEnvironment bound to the environment property of the View3D. Ẁe've seen it set to Color or SkyBox, but it can also be set to Transparent which lets you see any 2D contents behind the View3D through the 3D scene.

另一个属性是绑定到View3D的environment属性的SceneEnvironment的backgroundMode。我们已经看到它被设置为Color或SkyBox，但它也可以被设置为Transparent，这样可以通过3D场景看到View3D后面的任何2D内容。

When building a combined 2D and 3D scene, it is also good to know that it is possible to combine multiple View3D elements in a single Qt Quick scene. For instance, if you want to have multiple 3D models in a single scene, but they are separate parts of the 2D interface, then you can put them in separate View3D elements and handle the layout from the 2D Qt Quick side.

在构建组合的2D和3D场景时，最好知道可以在单个Qt Quick场景中组合多个View3D元素。例如，如果希望在单个场景中包含多个3D模型，但它们是2D界面的独立部分，则可以将它们放置在单独的View3D元素中，并从2D Qt Quick侧处理布局。

2D Contents in a 3D Scene

​​​​​​​三维场景中的二维内容

To put 2D contents into a 3D scene, it needs to be placed on a 3D surface. The Qt Quick 3D Texture element has a sourceItem property that allows you to integrate a 2D Qt Quick scene as a texture for an arbitrary 3D surface.

要将2D内容放入3D场景，需要将其放置在3D曲面上。Qt Quick 3D纹理元素具有sourceItem属性，允许您将2D Qt Quick场景集成为任意3D曲面的纹理。

Another apporoach is to put the 2D Qt Quick elements directly into the scene. This is the approach used in the example below where we provide a name badge for Suzanne.

另一种方法是将2D Qt快速元素直接放入场景中。这是下面示例中使用的方法，其中我们为Suzanne提供了一个铭牌。

 

What we do here is that we instantiate a Node that serves as an anchor point in the 3D scene. We then place a Rectangle and a Text element inside the Node. These two are 2D Qt Quick elements. We can then control the 3D position, rotation, and scale through the corresponding properties of the Node element.

我们在这里所做的是实例化一个节点Node，该节点在3D场景中用作锚点。然后，我们在节点内放置一个矩形和一个文本元素。这两个是2D Qt快速元素。然后，我们可以通过节点元素的相应属性来控制三维位置、旋转和缩放。

Node {
    y: -30
    eulerRotation.y: -10
    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        color: "orange"
        width: text.width+10
        height: text.height+10
        Text {
            anchors.centerIn: parent
            id: text
            text: "I'm Suzanne"
            font.pointSize: 14
            color: "black"
        }
    }
}