Qt Quick 3D-简介

Qt Quick 3D - Introduction

Qt Quick 3D-简介

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

演示如何在Qt Quick 3D中渲染场景。

This example gives an introductory overview of the basic Quick 3D features by going through the code of a simple example.

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

Setting Up the Scene

设置场景

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

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

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

​为了能够使用QtQuick3D模块中的类型，我们必须导入它：

import QtQuick
import QtQuick3D

To draw any 3D scene, we need a 3D viewport within the Qt Quick scene. This is provided by the View3D class, and this is where we define our scene. It is also possible to have multiple views in one application, see Qt Quick 3D - View3D Example.

​要绘制任何三维场景，我们需要在Qt Quick场景中创建一个三维视口。这是由View3D类提供的，也是我们定义场景的地方。在一个应用程序中也可以有多个视图，请参阅Qt Quick 3D-View3D示例。

We start with defining the environment of our scene. In this example we just clear the background color with skyblue, which we specify in a SceneEnvironment for the environment property of the view. SceneEnvironment describes various properties related to the environment of the scene, such as tonemapping settings, light probe settings for image based lighting, background mode, or ambient occlusion parameters. It can also control anti-aliasing, see Qt Quick 3D - Antialiasing Example. In our example we set the clearColor and backgroundMode properties to get a blue background.

​我们从定义场景的环境开始。在这个例子中，我们只是用天蓝色来清除背景颜色，我们在SceneEnvironment中为视图的环境属性指定了天蓝色。SceneEnvironment描述了与场景环境相关的各种属性，例如色调映射设置、基于图像的照明的光探测器设置、背景模式或环境遮挡参数。它还可以控制抗锯齿，请参见Qt Quick 3D-抗锯齿示例。在我们的示例中，我们设置clearColor和backgroundMode属性以获得蓝色背景。

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

Meshes

网格

To make the scene a bit more interesting we are now going to add some meshes. In Quick 3D there are a number of builtin meshes for convenience, for example sphere, cube, cone, or cylinder. These are referenced by using the special identifiers, such as #Sphere, #Cube, or#Rectangle in the source property of a Model node. Besides the built-in primitives, a .mesh file can be specified. To generate .mesh files from FBX or glTF2 assets, the assets need to be processed using the Balsam Asset Import Tool. Below shows the code adding a blue sphere and a red flattened cylinder:

​为了使场景更加有趣，我们现在将添加一些网格。在Quick 3D中，为了方便起见，有许多内置网格，例如球体、立方体、圆锥体或圆柱体。这些是通过使用特殊标识符来引用的，例如Model节点的源属性中的#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: [ 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
        }
    }
}

To add the meshes, we use two Model nodes, with #Sphere and #Cylinder as the source to load our built-in meshes. To give the model a color we need to first specify a material. In this case we use a DefaultMaterial with a red and blue diffuse color. There are three different materials available with different properties, namely DefaultMaterial, PrincipledMaterial and CustomMaterial, see Qt Quick 3D - Principled Material Example and Programmable Materials, Effects, Geometry, and Texture data. The mesh loaded by a Model can have multiple sub-meshes, and each sub-mesh needs to have a material specified. In the example only the built-in meshes are used, and those only have one sub-mesh each, and therefore it is sufficient to specify a single DefaultMaterial in the materials list.

​要添加网格，我们使用两个Model节点，以#Sphere和#Cylinder作为源来加载内置网格。要给模型一种颜色，我们需要首先指定一种材质。在这种情况下，我们使用具有红色和蓝色漫反射颜色的DefaultMaterial。有三种不同的材料具有不同的特性，即DefaultMaterial、Principled Material和CustomMaterial，请参阅Qt Quick 3D-Principled Material示例和可编程材料、效果、几何体和纹理数据。模型加载的网格可以有多个子网格，每个子网格都需要指定一种材质。在该示例中，仅使用内置网格，并且这些网格各只有一个子网格，因此在材质列表中指定一个DefaultMaterial就足够了。

A Model is a Node, so it has an associated transformation. To apply a translation, we use the position property. It is also possible to rotate the model by setting the eulerRotation property. To make the cylinder look like a plate we set the scale property accordingly.

​模型是一个节点，因此它具有关联的转换。为了应用翻译，我们使用position属性。也可以通过设置eulerRotation特性来旋转模型。为了使圆柱体看起来像一块板，我们相应地设置了比例属性。

Camera

相机

Then we define a camera, which specifies how the content of the 3D scene is projected onto a 2D surface. In this example, we use PerspectiveCamera which gives us a perspective projection. Orthographic projection is also possible through the OrthographicCamera type. The default orientation of the camera has its forward vector pointing along the negative Z axis and its up vector along the positive Y axis. The example moves the camera back to 300 on the Z axis. In addition, it is moved up an the Y axis a bit, and is rotated slightly around the X axis to look slightly downwards.

​然后我们定义一个相机，它指定如何将3D场景的内容投影到2D曲面上。在这个例子中，我们使用PerspectiveCamera，它给我们一个透视投影。正交投影也可以通过正交摄影机类型进行。摄影机的默认方向使其前向矢量指向负Z轴，使其上向矢量指向正Y轴。该示例将摄影机移回Z轴上的300。此外，它在Y轴上向上移动一点，并围绕X轴稍微旋转以稍微向下看。

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

Lights

灯光

The scene also needs a light source in order to be able to see the models in our scene. A DirectionalLight, which can be thought of as a distant sun shining from a certain direction, is added to the scene. There are two other light sources available, namely SpotLight and PointLight, see Qt Quick 3D - Lights Example.

​场景还需要一个光源，以便能够看到场景中的模型。将向场景中添加DirectionalLight，它可以被认为是从某个方向照射的遥远的太阳。还有另外两种光源可用，即聚光灯和点光源，请参见Qt Quick 3D-Lights示例。

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

Animation

动画

Finally, we are also going to animate the sphere. We do this by applying a SequentialAnimation on the y component, moving the sphere up and down infinitely.

​最后，我们还要设置球体的动画。我们通过在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
    }
}

With all these parts working together we are able to render our 3D scene. This example touches only some of the basic capabilities of Qt Quick 3D. Visit the examples page for further examples.

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

Example project @ code.qt.io

© 2024 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.