• QtitanRibbon |下載試用：遵循Microsoft Ribbon UI Paradigm for Qt技術的Ribbon UI組件，研究為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart |下載試用：是一個C++庫，代表一組，這些控件使您可以快速地為應用程序提供漂亮而豐富的圖形。并且支持所有主要的桌

Qt 3D 線框渲染說明了如何使用一組自定義著色器繪制單個實體（三葉結）以實現單通道線框渲染方法。

運行示例

要從Qt Creator運行示例，請打開歡迎模式并從示例中選擇示例。有關更多信息，請訪問構建和運行示例。

創建實體

渲染器方面尋找具有一些幾何體、材質和可選的變換的實體。這些都是以 QComponent 的子類的形式指定的，這些子類已經以Mesh、Material和Transform的形式導出到 QML 引擎中。我們使用這些組件在TrefoilKnot.qml 中創建自定義 QML 項。

我們首先導入Qt3D 2.0提供實體類型和值類型助手的模塊，例如 Qt.vector3d()。我們還導入了Qt3D.Renderer提供渲染器方面選取的組件和其他類型的模塊：

import Qt3D.Core 2.0
import Qt3D.Render 2.0

要使用其他方面的組件，我們也需要導入相應的 QML 模塊。

然后，我們使用實體類型作為自定義 QML 類型的根元素，公開一些自定義屬性，就像在 QML 中使用任何其他類型一樣：

Entity {
    id: root

    property real x: 0.0
    property real y: 0.0
    property real z: 0.0
    property real scale: 1.0
    property real theta: 0.0
    property real phi: 0.0
    property Material material

除了聚合組件之外，Entity類型還可用于將子對象組合在一起。這類似于Qt Quick 2 中Item類型的使用方式。

指定轉換

我們實例化一個Transform組件和一個Mesh組件。該變換部件指定當繪制與OpenGL的管線渲染器應該如何改變的幾何形狀。我們將一組有序的轉換組合成一個單一的Transform組件。這些信息將通過標準命名的統一變量自動提供給我們的著色器：

 Transform {
        id: transform
        translation: Qt.vector3d(root.x, root.y, root.z)
        rotation: fromEulerAngles(theta, phi, 0)
        scale: root.scale
    }

加載動態 Per-Vertex 數據

該網格組件是非常簡單的。我們使用它的 source 屬性從 Wavefront Obj 格式的文件中加載一組靜態幾何體（例如頂點位置、法線向量和紋理坐標）。此數據是從 Blender 應用程序導出的。 

 Mesh {
        id: mesh
        source: "assets/obj/trefoil.obj"
    }

除了Mesh元素，Qt 3D 還支持通過基于任務的引擎調用的 C++ 鉤子動態生成每個頂點的屬性數據。

聚合組件

然而，僅僅實例化組件是不夠的。為了讓它們在實體上注入特殊行為，實體必須通過它的 components 屬性聚合組件：

components: [ transform, mesh, root.material ]

這允許在多個實體之間非常容易地共享組件。在這個例子中，我們有包含在 TrefoilKnot 自定義類型中的變換和網格組件。Material類型的最終組件由 TrefoilKnot 自定義類型的屬性提供。我們稍后將自定義實體的外觀。

從相機渲染

我們使用 main.qml 中的 TrefoilKnot 自定義類型在屏幕上繪制三葉結。

我們使用與TrefoilKnot.qml 中相同的導入語句，并為動畫所需的 Qt Quick 模塊添加命名空間導入：

import QtQuick 2.1 as QQ2
import Qt3D.Core 2.0
import Qt3D.Render 2.0

我們使用實體類型作為根類型只是為了充當其子項的父項。從這個意義上說，Entity類型很像Item類型：

import Qt3D.Input 2.0
import Qt3D.Extras 2.0

Entity {
    id: root

RendererSettings 組件使用ForwardRenderer類型來完全配置渲染器，而無需觸及任何 C++ 代碼：

 // Render from the mainCamera
    components: [
        RenderSettings {
            activeFrameGraph: ForwardRenderer {
                id: renderer
                camera: mainCamera
            }
        },
        // Event Source will be set by the Qt3DQuickWindow
        InputSettings { }
    ]

BasicCamera 類型是對表示虛擬相機的內置Camera類型的簡單包裝。它具有諸如近平面和遠平面、視野、縱橫比、投影類型、位置和方向等屬性：

  BasicCamera {
        id: mainCamera
        position: Qt.vector3d( 0.0, 0.0, 15.0 )
    }

的配置類型提供了一種用于當正在完成其使用的方面和部件適當執行具有照相機的鼠標控制臨時解決方法：

 FirstPersonCameraController { camera: mainCamera }

使用多個相機并使用幀圖在它們之間進行選擇是微不足道的，以進行全部或部分場景渲染。

映射材料

Qt 3D 有一個強大且非常靈活的材料系統，允許多層次的定制。我們使用 WireframeMaterial 自定義類型來包裝Material類型：

WireframeMaterial {
        id: wireframeMaterial
        effect: WireframeEffect {}
        ambient: Qt.rgba( 0.2, 0.0, 0.0, 1.0 )
        diffuse: Qt.rgba( 0.8, 0.0, 0.0, 1.0 )

然后我們實例化 TrefoilKnot 類型并在其上設置材質：

 TrefoilKnot {
        id: trefoilKnot
        material: wireframeMaterial
    }

Qt 3D 引擎與渲染器方面現在有足夠的信息來最終使用我們指定的材質渲染我們的網格。

使用動畫元素

我們使用 Qt Quick 2 提供的動畫元素為 TrefoilKnot 和 WireframeMaterial 類型的屬性設置動畫。使用 QML 屬性綁定機制更新類型的組件的屬性：

 QQ2.SequentialAnimation {
            loops: QQ2.Animation.Infinite
            running: true

            QQ2.NumberAnimation {
                target: wireframeMaterial;
                property: "lineWidth";
                duration: 1000;
                from: 0.8
                to: 1.8
            }

            QQ2.NumberAnimation {
                target: wireframeMaterial;
                property: "lineWidth";
                duration: 1000;
                from: 1.8
                to: 0.8
            }

            QQ2.PauseAnimation { duration: 1500 }
        }

QNode基類會注意到屬性更新，并自動發送到渲染器方面中的相應對象。然后渲染器負責將屬性更新轉換為 GLSL 著色器程序中統一變量的新值。

運行示例以查看線框線寬度脈沖的三葉結。所有繁重的工作都由 GPU 完成。CPU 只需運行屬性動畫并將場景圖和幀圖轉換為原始 OpenGL 調用。

也可以通過自定義著色器程序和材質在 GPU 上制作動畫。

 ================================================== ==

想要了解或購買Qt正版授權的朋友，歡迎

Qt技術交流交流群開通，QQ搜索群號“765444821”或者掃描二維碼加入