Qt Quick 3D - クイックアイテムの例

クイック 3D シーンでの Qt クイックアイテムの使用例です。

この例では、Quick 3D シーンでの Qt Quick 2D アイテムの使い方を説明します。

クイック 3D シーンでのクイックアイテム

Qt Quick 2DItemは、すべての子アイテムと一緒に、Quick 3D シーンに追加することができます。3DシーンでQt Quickタイプを使用する場合、いくつかの注意点があります：

Item がNode の中にある場合、その左上隅はノードの原点に配置されます。つまり、Node の原点がItem の中心点になるように、anchors.centerIn: parent を指定することがよくあります。
3D 変換は親Node から継承されます。複数のItem が同じトランスフォームの影響を受ける場合、これらのアイテムはNode の下にある共通の親Item の下にまとめることができます。
Qt 6.0 では、アイテムはMouseArea などのタッチ/マウス・イベントを受け取らないので、非インタラクティブであるべきです。
クイックアイテムはライトやシャドウの影響を受けません。
Clipping そのため、クイックアイテムはライトやシャドウの影響を受けません。

以前の Qt バージョンや他の 2D-in-3D 埋め込みアプローチとは異なり、Qt Quick 3D ノードに Qt Quick アイテムを親にすることは、テクスチャを作成し、そこに 2D コンテンツをレンダリングし、テクスチャ付きの四角形を描画することを意味しません。むしろ、Qt 6.0は、3Dシーンと同じレンダーパス内で2Dコンテンツをレンダリングすることをサポートしています。これは、実際に大きなパフォーマンス改善をもたらす可能性があります。例えば、layer.enabled が true に設定されていたり、ShaderEffectSource である場合などです。

テストシーン

この例で重要なのは、View3D 要素のシーンコンテンツです。

まず、カメラから最も遠いレイヤーを追加します。このレイヤーには、Rectangle 、Text 、Image 要素が含まれています。レイヤー内の要素が正しく配置されるように、それらは共通の親Item の下にグループ化されています。すべてのコンテンツはこのルートアイテムの内側でクリップされるので、適切なサイズにする必要があることに注意してください。

Node {
    position: Qt.vector3d(0, 100, -120)
    Item {
        width: 400
        height: 400
        anchors.centerIn: parent
        Rectangle {
            anchors.fill: parent
            opacity: 0.4
            color: "#202020"
            radius: 10
            border.width: 2
            border.color: "#f0f0f0"
        }
        Text {
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 20
            color: "#e0e0e0"
            style: Text.Raised
            text: qsTr("Background Item")
        }
        Image {
            anchors.centerIn: parent
            source: "Built_with_Qt_RGB_logo_vertical"
        }
    }
}

次に、Node とそのアイテムは、もう少しカメラ寄りに配置されます。これには3つのRectangle アイテムがあり、x位置と回転の両方をアニメーションします。クイックItem のコンテンツは静止したままですが、アニメーションは親Node で行われることに注意してください。パフォーマンスの観点から、これはより複雑なアイテムでは良いアプローチです。

Node {
    position: Qt.vector3d(0, 150, 100)
    SequentialAnimation on x {
        loops: Animation.Infinite
        NumberAnimation {
            to: -200
            duration: 1500
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            to: 200
            duration: 1500
            easing.type: Easing.InOutQuad
        }
    }
    NumberAnimation on eulerRotation.z {
        loops: Animation.Infinite
        from: 0
        to: 360
        duration: 4000
        easing.type: Easing.InOutBack
    }
    Item {
        width: 400
        height: 400
        anchors.centerIn: parent
        // This allows rendering into offscreen surface and caching it.
        layer.enabled: true
        Rectangle {
            x: 150
            y: 100
            width: 100
            height: 100
            radius: 50
            color: "#80808020"
            border.color: "black"
            border.width: 2
        }
        Rectangle {
            x: 90
            y: 200
            width: 100
            height: 100
            radius: 50
            color: "#80808020"
            border.color: "black"
            border.width: 2
        }
        Rectangle {
            x: 210
            y: 200
            width: 100
            height: 100
            radius: 50
            color: "#80808020"
            border.color: "black"
            border.width: 2
        }
    }
}

この例の 3 番目のアイテムレイヤーには、不透明度アニメーションを持つText アイテムが 1 つ含まれています。テキストアイテムは、自動的に親アイテムNode の中央に配置されます。

Node {
    position: Qt.vector3d(0, 80, 250)
    Text {
        anchors.centerIn: parent
        width: 300
        wrapMode: Text.WordWrap
        horizontalAlignment: Text.AlignJustify
        font.pixelSize: 14
        color: "#e0e0e0"
        style: Text.Raised
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod " +
              "tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim " +
              "veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea " +
              "commodo consequat."
        SequentialAnimation on opacity {
            loops: Animation.Infinite
            NumberAnimation {
                to: 0
                duration: 1500
                easing.type: Easing.InOutQuad
            }
            NumberAnimation {
                to: 1
                duration: 1500
                easing.type: Easing.InOutQuad
            }
        }
    }
}

上記のクイックアイテムレイヤーのz-orderingを視覚化するために、3Dレッキングボールのモデルもセットアップします。これは、一番上のNode を中心とした回転をアニメーションさせ、球体を他のレイヤーの中を移動させます。

Node {
    position: Qt.vector3d(0, 800, 0)
    SequentialAnimation on eulerRotation.x {
        loops: Animation.Infinite
        NumberAnimation {
            to: 20
            duration: 3500
            easing.type: Easing.InOutQuad
        }
        NumberAnimation {
            to: -20
            duration: 3500
            easing.type: Easing.InOutQuad
        }
    }
    Model {
        source: "#Cylinder"
        y: -300
        scale: Qt.vector3d(0.1, 6.1, 0.1)
        materials: DefaultMaterial {
            diffuseColor: Qt.rgba(0.9, 0.9, 0.9, 1.0)
        }
    }
    Model {
        source: "#Sphere"
        y: -700
        scale: Qt.vector3d(2, 2, 2)
        materials: DefaultMaterial {
            diffuseColor: Qt.rgba(0.4, 0.4, 0.4, 1.0)
        }
    }
}

サンプルプロジェクト @ code.qt.io

Qt Quick 3D Scenes with 2D Contentも参照してください。

©2024 The Qt Company Ltd. 本書に含まれるドキュメントの著作権は、それぞれの所有者に帰属します。ここで提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。