# 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](/files/3wtiQgOkakR305fzJqVQ)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.novaflowos.com/start/qt6-qml-book/readme/ch12-qtquick3d/mixing-2d-and-3d.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.