Qt Quick 3D - Simple Example | Qt Quick 3D 5.14.1

Qt 5.14 | Qt Quick 3D | Qt Quick 3D - Simple Example

Qt 5.14.1 Reference Documentation

# Qt Quick 3D - Simple Example

Demonstrates how to render a simple scene in Qt Quick 3D.

Simple demonstrates how to render a scene in Qt Quick 3D.

#### Setting Up the Scene

We set up the entire scene in the main.qml file.

To be able to use the types in the QtQuick3D module, we must import it:

      import QtQuick3D 1.14

First of all, we define the environment of our simple scene. We just clear the background color with 'skyblue' in this example.

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

And then, we define a camera which represents the viewport of the rendered scene. In this example, we use PerspectiveCamera which shows perspective viewport in a general 3D scene. Because we want to define some objects around origin, we move this camera to the rear position and rotate slightly.

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

For the objects in the scene to be rendered correctly we need to add a light source, in this example we'll be using a DirectionalLight

      DirectionalLight {
          rotation: Qt.vector3d(30, 70, 0)
      }

#### Draw Simple Objects

Now, we draw some built-in objects. In this example, we draw a red cylinder and a blue sphere using Model. However, just drawing objects is too simple, so we make a round plate with the red cylinder and add bouncing animation for the sphere.

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

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

          materials: [ DefaultMaterial {
                  diffuseColor: "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
              }
          }
      }

Files:

- simple/main.cpp
- simple/main.qml
- simple/qml.qrc
- simple/simple.pro