Qt Quick 3D - 概要

この例では、簡単な例のコードを解説しながら、Quick 3Dの基本機能の概要を紹介します。

シーンの設定

シーン全体はmain.qmlファイルで設定します。

QtQuick3D モジュールの型を使用するには、そのモジュールをインポートする必要があります。

import QtQuick
import QtQuick3D

3Dシーンを描画するには、Qt Quick シーン内に3Dビューポートが必要です。これはView3D クラスによって提供され、ここでシーンを定義します。1つのアプリケーション内に複数のビューを持つことも可能です。詳細は「Qt Quick 3D - View3D Example」を参照してください。

まず、シーンの環境を定義することから始めます。この例では、skyblue を使用して背景色をクリアしますが、これはビューのenvironment プロパティに対してSceneEnvironment で指定します。SceneEnvironment には、トーンマッピングの設定、画像ベースライティング用のライトプローブ設定、背景モード、アンビエントオクルージョンパラメータなど、シーンの環境に関連するさまざまなプロパティが記載されています。 また、アンチエイリアシングの制御も可能です。詳細は「Qt Quick 3D - Antialiasing Example」を参照してください。この例では、青い背景を得るために、clearColor およびbackgroundMode プロパティを設定しています。

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

メッシュ

シーンをもう少し面白くするために、ここでいくつかのメッシュを追加します。Quick 3D には、利便性のために球体、立方体、円錐、円柱など、多数の組み込みメッシュが用意されています。これらは、Model ノードの source プロパティで、#Sphere 、#Cube 、#Rectangle といった特別な識別子を使用して参照します。 組み込みのプリミティブに加え、.mesh ファイルを指定することも可能です。FBXやglTF2アセットから.mesh ファイルを生成するには、Balsam Asset Import Toolを使用してアセットを処理する必要があります。以下は、青い球体と赤い扁平な円柱を追加するコードの例です：

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

メッシュを追加するには、2つのModelノードを使用し、組み込みメッシュを読み込むためのsource として#Sphere と#Cylinder を指定します。モデルに色を付けるには、まずマテリアルを指定する必要があります。この例では、赤と青のベースカラーを持つPrincipledMaterial を使用します。 利用可能なマテリアルには、それぞれ異なる特性を持つPrincipledMaterial 、SpecularGlossyMaterial 、CustomMaterial の3種類があります。詳細は、Qt Quick 3D - Principled Material ExampleおよびProgrammable Materials, Effects, Geometry, and Texture data を参照してください。Model によって読み込まれるメッシュは複数のサブメッシュを持つことがあり、各サブメッシュにはマテリアルを指定する必要があります。この例では組み込みのメッシュのみが使用されており、それらはそれぞれ1つのサブメッシュしか持たないため、materials リストに1つのPrincipledMaterial を指定するだけで十分です。

Model はNode の一種であるため、関連付けられた変換を持っています。平行移動を適用するには、position プロパティを使用します。また、eulerRotation プロパティを設定することで、モデルを回転させることも可能です。円柱を板のように見せるには、scale プロパティを適切に設定します。

カメラ

次に、3Dシーンの内容が2D平面にどのように投影されるかを指定するカメラを定義します。この例では、PerspectiveCamera を使用し、透視投影を行います。OrthographicCamera 型を使用することで、正投影を行うことも可能です。 カメラのデフォルトの向きでは、前方ベクトルは負のZ軸に沿い、上方ベクトルは正のY軸に沿っています。この例では、カメラをZ軸方向に300だけ後方に移動させます。さらに、Y軸方向に少し上方へ移動させ、X軸を中心にわずかに回転させて、やや下向きに見えるようにしています。

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

ライト

シーン内のモデルを視認するためには、光源も必要です。特定の方向から輝く遠くの太陽のようなものと考えられるDirectionalLight がシーンに追加されます。他にも、SpotLight とPointLight という2つの光源が利用可能です。詳細は「Qt Quick 3D - Lights Example」を参照してください。

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