このページでは

Qt Quick 3D - モーフィングの例

Qt Quick 3D でのモーフィングアニメーションの制御方法を示します。

口、耳、およびキュービファイ用のモーフィングスライダーを備えた3Dヘッドモデル

この例では、外部ツールからインポートされたモデル上でモーフィングアニメーションを制御する方法を示します。

メッシュの作成

モデルのメッシュは、3Dモデリングツール「Blender」を使用して作成されました。このメッシュには、基本形状に加えて、3つのモーフィングターゲット(Blenderでは「シェイプキー」と呼ばれます)が含まれています。

サルの頭部のモデルとシェイプキーのコントロールが表示されたBlenderのインターフェース

BlenderからglTFファイルとしてエクスポートされ、balsamを使用してインポートされました。

モーフターゲットの制御

通常、モーフィングはタイムラインアニメーションまたはプロパティアニメーションによって制御されます。この例では、代わりにスライダーを使用し、さまざまな重みを自由に組み合わせて試せるようにしています:

            Label { text: "Mouth:"; }
            RealSlider {
                id: mouthSlider
                from: 0.0
                to: 1.0
            }
            Label { text: "Ears and eyebrows:" }
            RealSlider {
                id: earSlider
                from: 0.0
                to: 1.0
            }
            Label { text: "Cubify:" }
            RealSlider {
                id: cubeSlider
                from: 0.0
                to: 1.0
            }

(RealSlider は、浮動小数点値を提供するシンプルなスライダーです。これはエフェクトの例から借用したものです。)

メッシュ内の各ターゲットに対して、MorphTarget を定義します。モーフターゲットとは、モーフィングを制御するためにバインドするオブジェクトのことです。通常はアニメーションが適用されますが、この例ではスライダーの値にバインドします:

        MorphTarget {
            id: morphtarget0
            weight: mouthSlider.value
            attributes: MorphTarget.Position | MorphTarget.Normal
        }
        MorphTarget {
            id: morphtarget1
            weight: earSlider.value
            attributes: MorphTarget.Position | MorphTarget.Normal
        }
        MorphTarget {
            id: morphtarget2
            weight: cubeSlider.value
            attributes: MorphTarget.Position | MorphTarget.Normal
        }

最後に、モデルを作成し、モーフターゲットをメッシュ内のターゲットにバインドします:

        Model {
            source: "suzanne.mesh"
            morphTargets: [
                morphtarget0,
                morphtarget1,
                morphtarget2
            ]
            materials: PrincipledMaterial {
                baseColor: "#41cd52"
                roughness: 0.1
            }
            SequentialAnimation on eulerRotation.y {
                NumberAnimation { from: -45; to: 45; duration: 10000 }
                NumberAnimation { from: 45; to: -45; duration: 10000 }
                loops: Animation.Infinite
            }
        }

ターゲットはリスト内の位置によって対応付けられる点に注意してください。名前は重要ではありません。

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

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