Qt Quick 3D - Quick Items の例

Quick 3DシーンでのQt Quick アイテムの使用例を示します。

Qtのロゴやテキストなど、2Dの要素が重なり合った3Dの球体

この例では、Quick 3D シーンでの「Qt Quick 」2D アイテムの使用方法を示しています。

Quick 3D シーン内の Quick Items

Qt Quick 2DのItemは、そのすべての子アイテムとともに、Quick 3Dシーンに追加することができます。3DシーンでQt Quick タイプを使用する際、以下の点に注意してください：

Item がNode 内にある場合、その左上隅はNodeの原点に配置されます。つまり、Node の原点がItem の中心点となるようにするため、多くの場合、anchors.centerIn: parent を指定する必要があります。
Item 3D変換は親のNode から継承されます。同じ変換の影響を受けるItem が複数ある場合は、Node 配下の共通の親の下に、これらのアイテムをグループ化することができます。
Qt 6.0では、MouseArea などのアイテムはタッチ/マウスイベントを受信しないため、非インタラクティブである必要があります。
Quick アイテムは、光や影の影響を受けません。
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 とそのアイテムは、カメラに少し近い位置に配置されています。これには、x座標と回転の両方をアニメーション化する3つのRectangle アイテムが含まれています。アニメーションは親要素であるNode に対して行われる一方で、QuickItem のコンテンツは静的なままである点に注意してください。パフォーマンスの観点から、これはより複雑なアイテムを扱う際に有効なアプローチです。

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 アイテムが含まれています。このTextアイテムは、親の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
            }
        }
    }
}

上記のQuick ItemレイヤーのZ順序を可視化するために、3Dの解体用ボール（wrecking ball）のモデルも設定します。このモデルは、最上部の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: PrincipledMaterial {
            baseColor: Qt.rgba(0.9, 0.9, 0.9, 1.0)
        }
    }
    Model {
        source: "#Sphere"
        y: -700
        scale: Qt.vector3d(2, 2, 2)
        materials: PrincipledMaterial {
            baseColor: Qt.rgba(0.4, 0.4, 0.4, 1.0)
        }
    }
}

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

「Qt Quick 2D コンテンツを含む 3D シーン」も参照してください 。

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