- Qt 6.7
- Qt Quick 3D
- Qt Quick 3D Examples and Tutorials
- Qt Quick 3D - Reflection Probes Example
- Qt Quick 3D | Commercial or GPLv3

# Qt Quick 3D - Reflection Probes Example

     // Copyright (C) 2021 The Qt Company Ltd.
     // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

     import QtQuick
     import QtQuick.Controls

     Item {
         id: root
         width: settingsDrawer.width
         height: parent.height

         property int timeSlicingIndex: timeSlicingComboBox.currentIndex
         property int refreshModeIndex: refreshModeComboBox.currentIndex
         property int qualityIndex: qualityComboBox.currentIndex
         property vector3d probeSize: Qt.vector3d(probeSizeXSlider.value, probeSizeYSlider.value, probeSizeZSlider.value)
         property vector3d probePosition: Qt.vector3d(probePositionXSlider.value, probePositionYSlider.value, probePositionZSlider.value)
         property bool probeParallaxCorrection: parallaxCheckBox.checked
         property real sphereRoughness: materialRoughnessSlider.value
         property bool sphereReceivesReflection: sphereReceivesReflectionsCheckBox.checked
         property bool floorReceivesReflection: floorReceivesReflectionsCheckBox.checked
         property bool spriteParticlesEnabled: particleSystemSpriteCheckBox.checked
         property bool modelParticlesEnabled: particleSystemModelCheckBox.checked

         property real iconSize: 50

         Button {
             x: settingsDrawer.visible ? (settingsDrawer.x + settingsDrawer.width) : 0
             anchors.top: parent.top
             width: root.iconSize
             height: width
             icon.width: width * 0.3
             icon.height: height * 0.3
             icon.source: "res/icon_settings.png"
             icon.color: "transparent"
             background: Rectangle {
                 color: "transparent"
             }
             onClicked: {
                 settingsDrawer.visible = !settingsDrawer.visible;
             }
         }

         Drawer {
             id: settingsDrawer
             edge: Qt.LeftEdge
             interactive: false
             modal: false

             enter: Transition {
                 NumberAnimation {
                     property: "position"
                     to: 1.0
                     duration: 400
                     easing.type: Easing.InOutQuad
                 }
             }

             exit: Transition {
                 NumberAnimation {
                     property: "position"
                     to: 0.0
                     duration: 400
                     easing.type: Easing.InOutQuad
                 }
             }

             ScrollView {
                 anchors.fill: parent
                 ScrollBar.vertical.policy: ScrollBar.AlwaysOn
                 padding: 10
                 background: Rectangle {
                     color: "white"
                 }

                 Flickable {
                     clip: true
                     contentWidth: settingsArea.width
                     contentHeight: settingsArea.height

                     Column {
                         id: settingsArea
                         spacing: 5

                         Text {
                             anchors.horizontalCenter: parent.horizontalCenter
                             text: "Reflection Map"
                             font.pixelSize: 14
                         }

                         Item { width: 1; height: 10 }

                         Text {
                             text: "Time Slicing"
                         }

                         ComboBox {
                             id: timeSlicingComboBox
                             width: 200
                             model: [ "None", "All Faces At Once", "Individual Faces" ]
                         }

                         Text {
                             text: "Refresh Mode"
                         }

                         ComboBox {
                             id: refreshModeComboBox
                             width: 200
                             model: [ "Every Frame", "First Frame" ]
                         }

                         Text {
                             text: "Reflection Map Quality"
                         }

                         ComboBox {
                             id: qualityComboBox
                             width: 200
                             model: [ "Very Low", "Low", "Medium", "High", "Very High" ]
                         }

                         Item { width: 1; height: 10 }

                         Text {
                             anchors.horizontalCenter: parent.horizontalCenter
                             text: "Floor Reflection Probe"
                             font.pixelSize: 14
                         }

                         Item { width: 1; height: 10 }

                         CheckBox {
                             id: parallaxCheckBox
                             checked: true
                             text: qsTr("Parallax Correction")
                         }

                         Text {
                             text: "Box Size (" + probeSizeXSlider.value + ", " + probeSizeYSlider.value + ", " + probeSizeZSlider.value + ")"
                         }

                         Slider {
                             id: probeSizeXSlider
                             from: 0
                             value: 1000
                             to: 1000
                             stepSize: 1
                         }

                         Slider {
                             id: probeSizeYSlider
                             from: 0
                             value: 950
                             to: 1000
                             stepSize: 1
                         }

                         Slider {
                             id: probeSizeZSlider
                             from: 0
                             value: 650
                             to: 1000
                             stepSize: 1
                         }

                         Text {
                             text: "Position (" + probePositionXSlider.value + ", " + probePositionYSlider.value + ", " + probePositionZSlider.value + ")"
                         }

                         Slider {
                             id: probePositionXSlider
                             from: 0
                             value: 0
                             to: 500
                             stepSize: 1
                         }

                         Slider {
                             id: probePositionYSlider
                             from: 0
                             value: 0
                             to: 500
                             stepSize: 1
                         }

                         Slider {
                             id: probePositionZSlider
                             from: 0
                             value: 0
                             to: 500
                             stepSize: 1
                         }

                         Item { width: 1; height: 10 }

                         Text {
                             anchors.horizontalCenter: parent.horizontalCenter
                             text: "Particles"
                             font.pixelSize: 14
                         }

                         CheckBox {
                             id: particleSystemSpriteCheckBox
                             checked: false
                             text: qsTr("Sprite Particles")
                         }

                         CheckBox {
                             id: particleSystemModelCheckBox
                             checked: false
                             text: qsTr("Model Particles")
                         }

                         Item { width: 1; height: 10 }

                         Text {
                             anchors.horizontalCenter: parent.horizontalCenter
                             text: "Model"
                             font.pixelSize: 14
                         }

                         Item { width: 1; height: 10 }

                         Text {
                             text: "Sphere Roughness : " + materialRoughnessSlider.value.toFixed(2);
                         }

                         Slider {
                             id: materialRoughnessSlider
                             from: 0
                             to: 1.0
                             value: 0.1
                         }

                         CheckBox {
                             id: sphereReceivesReflectionsCheckBox
                             checked: true
                             text: qsTr("Sphere receives reflections")
                         }

                         CheckBox {
                             id: floorReceivesReflectionsCheckBox
                             checked: true
                             text: qsTr("Floor receives reflections")
                         }
                     }
                 }
             }
         }
     }