Qt Quick 3D - 简介

本示例通过一个简单示例的代码介绍了 Quick 3D 的基本功能。

设置场景

我们在main.qml文件中设置了整个场景。

要使用QtQuick3D 模块中的类型，我们必须导入该模块：

import QtQuick
import QtQuick3D

要绘制任何三维场景，我们需要在Qt Quick 场景中建立一个三维视口。View3D 类提供了视口，我们就在这里定义场景。在一个应用程序中也可以有多个视图，请参见Qt Quick 3D - View3D 示例。

我们首先要定义场景的环境。在本例中，我们只需用skyblue 清除背景颜色，并在SceneEnvironment 中为视图的environment 属性指定背景颜色。SceneEnvironment 描述了与场景环境相关的各种属性，如色调映射设置、基于图像照明的光线探针设置、背景模式或环境闭塞参数。它还可以控制抗锯齿，请参见Qt Quick 3D - 抗锯齿示例。在我们的示例中，我们设置了clearColor 和backgroundMode 属性，以获得蓝色背景。

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

网格

为了使场景更加有趣，我们现在要添加一些网格。在 Quick 3D 中，为了方便起见，有许多内置网格，例如球体、立方体、圆锥体或圆柱体。在模型节点的源属性中，可以使用特殊标识符（如#Sphere 、#Cube 或#Rectangle ）来引用这些网格。除了内置基元，还可以指定.mesh 文件。要从 FBX 或 glTF2 资产生成.mesh 文件，需要使用Balsam 资产导入工具对资产进行处理。下图显示了添加蓝色球体和红色扁平圆柱体的代码：

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
        }
    }
}

要添加网格，我们使用两个模型节点，以#Sphere 和#Cylinder 作为source 来加载内置网格。要给模型添加颜色，我们首先需要指定一种材质。在本例中，我们使用的是带有红蓝基色的PrincipledMaterial 。有三种不同属性的材质可供选择，分别是PrincipledMaterial 、SpecularGlossyMaterial 和CustomMaterial ，请参见Qt Quick 3D - Principled Material Example和Programmable Materials, Effects, Geometry, and Texture data（可编程材质、效果、几何图形和纹理数据）。Model 加载的网格可以有多个子网格，每个子网格都需要指定一种材料。示例中只使用了内置网格，而内置网格只有一个子网格，因此只需在materials 列表中指定一个PrincipledMaterial 即可。

Model 是Node ，因此它有一个相关的变换。要应用平移，我们可以使用position 属性。还可以通过设置eulerRotation 属性来旋转模型。要使圆柱体看起来像一个平板，我们可以相应地设置scale 属性。

摄像机

然后，我们定义一个摄像头，指定如何将三维场景的内容投射到二维表面上。在本例中，我们使用PerspectiveCamera 进行透视投影。正投影也可以通过OrthographicCamera 类型实现。摄像机的默认方向是前向矢量沿负 Z 轴指向，上向矢量沿正 Y 轴指向。本示例将摄像机沿 Z 轴后移至 300。此外，它还在 Y 轴上向上移动了一些，并围绕 X 轴稍微旋转了一下，使其略微向下看。

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

灯光

为了能够看到场景中的模型，场景还需要一个光源。我们在场景中添加了一个DirectionalLight ，它可以被看作是从某个方向照射过来的远处的太阳。还有其他两种光源可供选择，即SpotLight 和PointLight ，请参见Qt Quick 3D - 灯光示例。

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

动画

最后，我们还要为球体制作动画。我们在y 组件上应用SequentialAnimation ，使球体上下无限移动。

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
    }
}

有了所有这些部分的协同工作，我们就可以渲染 3D 场景了。本示例仅涉及Qt Quick 3D 的部分基本功能。请访问示例页面了解更多示例。

示例项目 @ code.qt.io