Qt Quick 3D - Introducción

Este ejemplo da una visión general introductoria de las características básicas de Quick 3D pasando por el código de un ejemplo sencillo.

Configuración de la escena

Configuramos toda la escena en el archivo main.qml.

Para poder utilizar los tipos del módulo QtQuick3D, debemos importarlo:

import QtQuick
import QtQuick3D

Para dibujar cualquier escena 3D, necesitamos un viewport 3D dentro de la escena Qt Quick. Esto es proporcionado por la clase View3D, y aquí es donde definimos nuestra escena. También es posible tener múltiples vistas en una aplicación, ver Qt Quick 3D - Ejemplo View3D.

Comenzamos definiendo el entorno de nuestra escena. En este ejemplo sólo limpiamos el color de fondo con skyblue, que especificamos en un SceneEnvironment para la propiedad environment de la vista. SceneEnvironment describe varias propiedades relacionadas con el entorno de la escena, como los ajustes de tonemapping, los ajustes de la sonda de luz para la iluminación basada en imágenes, el modo de fondo o los parámetros de oclusión ambiental. También puede controlar el anti-aliasing, ver Qt Quick 3D - Ejemplo de Antialiasing. En nuestro ejemplo establecemos las propiedades clearColor y backgroundMode para obtener un fondo azul.

environment: SceneEnvironment {
    clearColor: "skyblue"
    backgroundMode: SceneEnvironment.Color
}

Mallas

Para hacer la escena un poco más interesante vamos a añadir algunas mallas. En Quick 3D hay una serie de mallas incorporadas para mayor comodidad, por ejemplo, esfera, cubo, cono o cilindro. Estas son referenciadas usando los identificadores especiales, como #Sphere, #Cube, o#Rectangle en la propiedad source de un nodo Model. Además de las primitivas incorporadas, se puede especificar un archivo .mesh. Para generar archivos .mesh a partir de activos FBX o glTF2, es necesario procesar los activos con la herramienta de importación de activos de Balsam. A continuación se muestra el código que añade una esfera azul y un cilindro aplanado rojo:

Model {
    position: Qt.vector3d(0, -200, 0)
    source: "#Cylinder"
    scale: Qt.vector3d(2, 0.2, 1)
    materials: [ PrincipledMaterial {
            baseColor: "red"
        }
    ]
}

Model {
    position: Qt.vector3d(0, 150, 0)
    source: "#Sphere"

    materials: [ PrincipledMaterial {
            baseColor: "blue"
        }
    ]

    SequentialAnimation on y {
        loops: Animation.Infinite
        NumberAnimation {
            duration: 3000
            to: -150
            from: 150
            easing.type:Easing.InQuad
        }
        NumberAnimation {
            duration: 3000
            to: 150
            from: -150
            easing.type:Easing.OutQuad
        }
    }
}

Para añadir las mallas, utilizamos dos nodos Model, con #Sphere y #Cylinder como source para cargar nuestras mallas incorporadas. Para dar un color al modelo necesitamos primero especificar un material. En este caso usamos un PrincipledMaterial con un color base rojo y azul. Hay tres materiales diferentes disponibles con diferentes propiedades, a saber PrincipledMaterial, SpecularGlossyMaterial y CustomMaterial, ver Qt Quick 3D - Ejemplo de Material Principal y Materiales Programables, Efectos, Geometría y Datos de Textura. La malla cargada por un Model puede tener múltiples sub-mallas, y cada sub-malla necesita tener un material especificado. En el ejemplo sólo se utilizan las mallas incorporadas, y éstas sólo tienen una submalla cada una, por lo que es suficiente especificar una única PrincipledMaterial en la lista materials.

Un Model es un Node, por lo que tiene una transformación asociada. Para aplicar una traslación, utilizamos la propiedad position. También es posible rotar el modelo estableciendo la propiedad eulerRotation. Para hacer que el cilindro parezca un plato establecemos la propiedad scale en consecuencia.

Cámara

A continuación definimos una cámara, que especifica cómo se proyecta el contenido de la escena 3D sobre una superficie 2D. En este ejemplo, utilizamos PerspectiveCamera que nos da una proyección en perspectiva. La proyección ortográfica también es posible a través del tipo OrthographicCamera. La orientación por defecto de la cámara tiene su vector hacia delante apuntando a lo largo del eje Z negativo y su vector hacia arriba a lo largo del eje Y positivo. El ejemplo mueve la cámara hacia atrás a 300 en el eje Z. Además, se mueve un poco hacia arriba en el eje Y, y se rota ligeramente alrededor del eje X para mirar ligeramente hacia abajo.

PerspectiveCamera {
    position: Qt.vector3d(0, 200, 300)
    eulerRotation.x: -30
}

Luces

La escena también necesita una fuente de luz para poder ver los modelos en nuestra escena. Se añade a la escena un DirectionalLight, que puede considerarse como un sol lejano que brilla desde una dirección determinada. Hay otras dos fuentes de luz disponibles, a saber, SpotLight y PointLight, véase Qt Quick 3D - Ejemplo de luces.

DirectionalLight {
    eulerRotation.x: -30
    eulerRotation.y: -70
}

Animación

Por último, también vamos a animar la esfera. Lo hacemos aplicando un SequentialAnimation sobre el componente y, moviendo la esfera arriba y abajo infinitamente.

SequentialAnimation on y {
    loops: Animation.Infinite
    NumberAnimation {
        duration: 3000
        to: -150
        from: 150
        easing.type:Easing.InQuad
    }
    NumberAnimation {
        duration: 3000
        to: 150
        from: -150
        easing.type:Easing.OutQuad
    }
}

Con todas estas partes trabajando juntas somos capaces de renderizar nuestra escena 3D. Este ejemplo sólo muestra algunas de las capacidades básicas de Qt Quick 3D. Visita la página de ejemplos para ver más ejemplos.

Proyecto de ejemplo @ code.qt.io