Qt Quick 3D - Exemple View3D

Démontre l'utilisation de View3D pour montrer une scène à partir de plusieurs caméras.

Quatre vues de la théière avec boutons de sélection de la caméra

Cet exemple montre l'utilisation de quatre sites View3Ddistincts avec différentes caméras dans une application.

Définition des caméras

Nous commençons par définir le site cameras. Nous allons définir plusieurs caméras différentes, même si nous n'ajouterons que 4 vues. En effet, nous voulons pouvoir changer de caméra dans l'une des vues.

Les caméras doivent être définies à l'intérieur de la racine Node. Voici comment les caméras sont définies :

Node {
    id: standAloneScene
    ...
// The predefined cameras. They have to be part of the scene, i.e. inside the root node.
// Animated perspective camera
Node {
    PerspectiveCamera {
        id: cameraPerspectiveOne
        z: 600
    }

    PropertyAnimation on eulerRotation.x {
        loops: Animation.Infinite
        duration: 5000
        to: -360
        from: 0
    }
}

// Stationary perspective camera
PerspectiveCamera {
    id: cameraPerspectiveTwo
    z: 600
}
    ...
    // Stationary orthographic camera viewing from left
    OrthographicCamera {
        id: cameraOrthographicLeft
        x: -600
        eulerRotation.y: -90
    }
}

Ajout des vues

Après avoir défini les caméras, nous pouvons ajouter les vues views. Nous divisons l'écran en quatre parties et ajoutons les vues une par une, comme suit :

// The views
Rectangle {
    id: topLeft
    anchors.top: parent.top
    anchors.left: parent.left
    width: parent.width * 0.5
    height: parent.height * 0.5
    color: "#848895"
    border.color: "black"

    View3D {
        id: topLeftView
        anchors.fill: parent
        importScene: standAloneScene
        camera: cameraOrthographicFront
    }

    Label {
        text: "Front"
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: 10
        color: "#222840"
        font.pointSize: 14
    }
}
    ...

La vue en haut à droite comporte trois boutons. Ces boutons permettent de changer à la volée la caméra utilisée dans cette vue. Le changement se fait simplement en paramétrant la propriété camera :

RoundButton {
    text: "Camera 1"
    highlighted: topRightView.camera == cameraPerspectiveOne
    implicitWidth: controlsContainer.buttonWidth
    onClicked: {
        topRightView.camera = cameraPerspectiveOne
    }
}
    ...

Exemple de projet @ 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.