Qt 5.11 | Qt Canvas 3D | Qt Canvas 3D Examples | Interaction Example

Qt 5.11.3 Reference Documentation

# Interaction Example

Interact with an object in canvas using Qt Quick Controls.

The Interaction Example concentrates on the interaction between Qt Quick Controls and the objects displayed in Canvas3D. This also demonstrates drawing the same object in three different ways.

## The Controls

First, we need to import Qt Quick Controls and Layouts:

      import QtQuick.Controls 1.0
      import QtQuick.Layouts 1.0

Then, we add a RowLayout to the main component to easily add the controls side-by-side:

      RowLayout {
          id: controlLayout
          spacing: 5
          x: 12
          y: parent.height - 100
          width: parent.width - (2 * x)
          height: 100
          visible: true

And then we add three sliders to the layout. Here's the one for controlling x-axis rotation:

      Slider {
          id: xSlider
          Layout.alignment: Qt.AlignLeft
          Layout.fillWidth: true
          minimumValue: 0;
          maximumValue: 360;
          onValueChanged: canvas3d.xRotSlider = value;
      }

## Interaction

First we need to define some properties in the Canvas3D for the rotations:

      property double xRotSlider: 0
      property double yRotSlider: 0
      property double zRotSlider: 0

The `onValueChanged` signal handlers of the Slider components are connected to the above properties. Here's the connection in x-rotation slider as an example:

      onValueChanged: canvas3d.xRotSlider = value;

Then, on the JavaScript side, we just use the Canvas3D properties directly when setting the modelview matrix rotations:

      mvMatrix = mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.xRotSlider), [1, 0, 0]);
      mvMatrix = mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.yRotSlider), [0, 1, 0]);
      mvMatrix = mat4.rotate(mvMatrix, mvMatrix, degToRad(canvas.zRotSlider), [0, 0, 1]);

## Three Ways of Drawing

The actual drawing is no different from any situation where the same object is drawn multiple times. Only in this case we use a different drawing mode for each:

      gl.drawElements(gl.TRIANGLES, theModel.count, gl.UNSIGNED_SHORT, 0);
      ...
      gl.drawElements(gl.POINTS, theModel.count, gl.UNSIGNED_SHORT, 0);
      ...
      gl.drawElements(gl.LINES, theModel.count, gl.UNSIGNED_SHORT, 0);

Files:

- interaction/interaction.pro
- interaction/interaction.qrc
- interaction/main.cpp
- interaction/qml/interaction/interaction.js
- interaction/qml/interaction/main.qml

Images:

- interaction/qml/interaction/barrel.jpg