Qt Quick 3D - Ejemplo de Quick Items

Demuestra el uso de Qt Quick Items en la escena Quick 3D.

Esfera 3D con elementos 2D en capas, incluidos el logotipo y el texto de Qt.

Este ejemplo demuestra el uso de Qt Quick Items 2D en la escena Quick 3D.

Elementos rápidos en una escena Quick 3D

Qt Quick Los elementos 2D Items, junto con todos sus elementos hijos, pueden añadirse a escenas Quick 3D. Al utilizar tipos Qt Quick en la escena 3D, hay que tener en cuenta algunas cosas:

Cuando un Item está dentro de un Node, su esquina superior izquierda se coloca en el origen del Nodo. Esto significa que el elemento a menudo querrá especificar anchors.centerIn: parent para asegurarse de que el origen de Node sirve al punto central de Item.
Las transformaciones 3D se heredan del padre Node. Si más de un Item se ve afectado por la misma transformación, estos elementos pueden agruparse bajo un padre común Item en Node.
En Qt 6.0, los elementos no reciben eventos de toque/ratón, por ejemplo con MouseArea, por lo que no deberían ser interactivos.
Los elementos rápidos no se ven afectados por luces y sombras.
Clipping deben evitarse y no confiar en ellos.

A diferencia de versiones anteriores de Qt, y otros enfoques de incrustación 2D-in-3D, emparentar un elemento Qt Quick a un nodo Qt Quick 3D no implica crear una textura, renderizar el contenido 2D en ella, y luego dibujar un quad texturizado. En su lugar, Qt 6.0 permite renderizar el contenido 2D en la misma pasada de renderizado que la escena 3D. En la práctica, esto puede suponer enormes mejoras de rendimiento. Esto no se aplica cuando el elemento se renderiza utilizando un objetivo de renderizado adicional por diseño, por ejemplo porque tiene layer.enabled establecido en true, o porque es un ShaderEffectSource.

La escena de prueba

Lo importante de este ejemplo es el contenido de la escena del elemento View3D.

Comenzamos añadiendo la capa más alejada de la cámara. Esta capa contiene los elementos Rectangle, Text y Image. Para asegurar que los elementos de la capa se posicionan correctamente se agrupan bajo un padre común Item. Tenga en cuenta que todo el contenido se recorta dentro de este elemento raíz, por lo que debe tener el tamaño adecuado.

Node {
    position: Qt.vector3d(0, 100, -120)
    Item {
        width: 400
        height: 400
        anchors.centerIn: parent
        Rectangle {
            anchors.fill: parent
            opacity: 0.4
            color: "#202020"
            radius: 10
            border.width: 2
            border.color: "#f0f0f0"
        }
        Text {
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 20
            color: "#e0e0e0"
            style: Text.Raised
            text: qsTr("Background Item")
        }
        Image {
            anchors.centerIn: parent
            source: "Built_with_Qt_RGB_logo_vertical"
        }
    }
}

A continuación, Node y sus elementos se sitúan un poco más cerca de la cámara. Contiene tres elementos Rectangle que animan tanto la posición x como la rotación. Tenga en cuenta que las animaciones se realizan en el padre Node mientras que el contenido del Quick Item permanece estático. Desde el punto de vista del rendimiento, este es un buen enfoque con elementos más complejos.

Node {
    position: Qt.vector3d(0, 150, 100)
    SequentialAnimation on x {
        loops: Animation.Infinite
        NumberAnimation {
            to: -200
            duration: 1500
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            to: 200
            duration: 1500
            easing.type: Easing.InOutQuad
        }
    }
    NumberAnimation on eulerRotation.z {
        loops: Animation.Infinite
        from: 0
        to: 360
        duration: 4000
        easing.type: Easing.InOutBack
    }
    Item {
        width: 400
        height: 400
        anchors.centerIn: parent
        // This allows rendering into offscreen surface and caching it.
        layer.enabled: true
        Rectangle {
            x: 150
            y: 100
            width: 100
            height: 100
            radius: 50
            color: "#80808020"
            border.color: "black"
            border.width: 2
        }
        Rectangle {
            x: 90
            y: 200
            width: 100
            height: 100
            radius: 50
            color: "#80808020"
            border.color: "black"
            border.width: 2
        }
        Rectangle {
            x: 210
            y: 200
            width: 100
            height: 100
            radius: 50
            color: "#80808020"
            border.color: "black"
            border.width: 2
        }
    }
}

La tercera capa de elementos de este ejemplo contiene un único elemento Text con una animación de opacidad. El elemento Texto se centra automáticamente en el elemento padre Node.

Node {
    position: Qt.vector3d(0, 80, 250)
    Text {
        anchors.centerIn: parent
        width: 300
        wrapMode: Text.WordWrap
        horizontalAlignment: Text.AlignJustify
        font.pixelSize: 14
        color: "#e0e0e0"
        style: Text.Raised
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod " +
              "tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim " +
              "veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea " +
              "commodo consequat."
        SequentialAnimation on opacity {
            loops: Animation.Infinite
            NumberAnimation {
                to: 0
                duration: 1500
                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
                to: 1
                duration: 1500
                easing.type: Easing.InOutQuad
            }
        }
    }
}

Para visualizar la ordenación en Z de las capas de elementos rápidas anteriores, también configuraremos un modelo para la bola de demolición 3D. Anima la rotación alrededor de la parte superior Node, lo que hace que la esfera se mueva a través de las otras capas.

Node {
    position: Qt.vector3d(0, 800, 0)
    SequentialAnimation on eulerRotation.x {
        loops: Animation.Infinite
        NumberAnimation {
            to: 20
            duration: 3500
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            to: -20
            duration: 3500
            easing.type: Easing.InOutQuad
        }
    }
    Model {
        source: "#Cylinder"
        y: -300
        scale: Qt.vector3d(0.1, 6.1, 0.1)
        materials: PrincipledMaterial {
            baseColor: Qt.rgba(0.9, 0.9, 0.9, 1.0)
        }
    }
    Model {
        source: "#Sphere"
        y: -700
        scale: Qt.vector3d(2, 2, 2)
        materials: PrincipledMaterial {
            baseColor: Qt.rgba(0.4, 0.4, 0.4, 1.0)
        }
    }
}

Proyecto de ejemplo @ code.qt.io

Ver también Qt Quick Escenas 3D con contenido 2D.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.