Qt Quick 3D - HelloCube の例

Qt Quick 3Dで2Dと3Dのオブジェクトを一緒にレンダリングする方法を示します。

HelloCubeは、Qt Quick 3Dで2Dアイテムを使って3Dキューブをレンダリングする方法を示します。

2Dアイテムの描画

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

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

import QtQuick3D

シンプルなQtQuick アイテムを定義し、イメージとテキストを矩形に配置します。

Image {
    anchors.fill: parent
    source: "qt_logo.png"
}
Text {
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    color: "white"
    font.pixelSize: 17
    text: qsTr("The Future is Written with Qt")
}

この単純な長方形には、縦に反転するアニメーションが2つあります。

transform: Rotation {
    id: rotation
    origin.x: qt_logo.width / 2
    origin.y: qt_logo.height / 2
    axis { x: 1; y: 0; z: 0 }
}

PropertyAnimation {
    id: flip1
    target: rotation
    property: "angle"
    duration: 600
    to: 180
    from: 0
}
PropertyAnimation {
    id: flip2
    target: rotation
    property: "angle"
    duration: 600
    to: 360
    from: 180
}

3D立方体を描く

立方体を描くのはとても簡単です。Camera とLight を定義した後、組み込みのModel で立方体を作成します。この例では、この立方体の表面に、前の2D長方形を拡散Texture としてレンダリングします。Rectangleでは、layer.enabled をtrue に設定する。

layer.enabled: true

このプロパティを有効にすると、2Dアイテムがオフスクリーン・サーフェスにレンダリングされ、キューブのテクスチャとして使用されます。

id: cube
source: "#Cube"
materials: DefaultMaterial {
    diffuseMap: Texture {
        sourceItem: qt_logo
    }
}
eulerRotation.y: 90

プロジェクト例 @ code.qt.io

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