QtQuick Filter based Cube Example Tutorial

This guide covers using the ADTF QtQuick Filter to implement a 3D cube. After reading this guide, you will know how to:

This tutorial focuses on the QtQuick Filter which combines the functionality of QML from the Qt framework with the ADTF runtime. The following section describes how to use the QtQuick Filter to add a cube object inside the main scene.

We are going to create a small session that contains a QtQuick Filter and the Qt3D-Display. We further need to create a binding client named "qtshared" at the QtQuick Filter by right click on the filter. Both components must get connected via Binding Proxy.

Our Tutorial Filter Graph.

Open the context menu of the QtQuick Filter by performing a right click on the Filter. Click on "Open Editor". This will open the ADTF JavaScript-Editor where you can start writing JavaScript code. Paste the following code and save it.


// Import the Qt libaries.
import QtQuick 2.9
import Qt3D.Core 2.0
import Qt3D.Render 2.0
import Qt3D.Input 2.0
import Qt3D.Extras 2.9


Item
{
    id: root

    // Use the onCompleted handler to create an interface client.
    Component.onCompleted: {
        const qtshared = filter.createInterfaceClient("qtshared", "qtshared")

        // Set the parent of your implementation to 'rootEntity' of the 3D-Display.
        filter.connected.connect(function()
        {
            if (qtshared.connected)
            {
                cubeRootEntity.parent = qtshared.getObject("rootEntity")
            }
        })
    }

    // Add a simple cube Entity which consists of a Mesh, Transform and a Material component.
    Entity {
        id: cubeRootEntity

        // Set an object name which is displayed in the VisualElementsView.
        objectName: "cubeEntity"

        // Use a simple CuboidMesh.
        CuboidMesh {
            id: cubeMesh
        }

        // Use the Transform component if you want to apply changes to the entity.
        Transform {
            id: transform
            rotationX: 0
            rotationY: 0
            rotationZ: 0
            scale: 1
            translation: Qt.vector3d(0, 0, 0)
        }

        // Set the Material component of the entity.
        PhongMaterial {
            id: material
            ambient: "steelblue"
            shininess: 50
        }

        components: [cubeMesh, transform, material]
    }
}

    

Now we can start the session and get the cube we designed:

Our QtQuick based Cube Example.

Where to go next?

Have a look at the Overlay Example Filter.