# Mixing 2D and 3D Contents

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

## 3D Contents in a 2D Scene

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.

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

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.

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.

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 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.

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.

![image](https://378126997-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSh8Zb0vw9zlstTaGKIdC%2Fuploads%2Fgit-blob-2786bf61d324ec61606016e18cb0d42b43f06a80%2Fmix-2d-and-3d.png?alt=media)

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 {
    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"
        }
    }
}
```