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

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

この例では、クイック 3D シーンでのQt Quick 2D アイテムの使用をデモします。

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

Qt Quick 2D は、すべての子アイテムと一緒に、クイック 3D シーンに追加できます。3Dシーンでタイプを使用する場合、いくつかの注意点があります：Item 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 アイテムをQt Quick 3D ノードに親展することは、テクスチャを作成し、そこに 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位置と回転の両方をアニメーションします。アニメーションは親のNode で行われ、クイックItem のコンテンツは静止したままであることに注意してください。パフォーマンスの観点から、これはより複雑なアイテムでは良いアプローチです。

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オーダーを視覚化するために、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も参照してください 。

© 2025 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.

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

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

テストシーン

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