- Qt 6.6
- Qt Quick 3D
- Qt Quick 3D Examples and Tutorials
- Qt Quick 3D - Particles 3D Testbed Example
- Qt Quick 3D | Commercial or GPLv3

# Qt Quick 3D - Particles 3D Testbed Example

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

     import QtQuick
     import QtQuick3D
     import QtQuick3D.Particles3D
     import QtQuick.Controls
     import QtQuick.Timeline
     import QtQuick.Layouts

     Item {
         id: mainWindow

         property real cubeRotation: 0

         anchors.fill: parent

         Timeline {
             id: timeline
             enabled: true
             startFrame: 0
             endFrame: 100
             animations: [
                 TimelineAnimation {
                     id: timelineAnimation
                     running: true
                     duration: (100 - timeline.currentFrame) * 100 //10000
                     from: timeline.currentFrame
                     to: 100
                 }
             ]
             keyframeGroups: [
                 KeyframeGroup {
                     target: mainWindow
                     property: "cubeRotation"
                     Keyframe { frame: 0; value: 0 }
                     Keyframe { frame: 100; value: 360 }
                 },
                 KeyframeGroup {
                     target: psystem1
                     property: "time"
                     Keyframe { frame: 0; value: 3001 }
                     Keyframe { frame: 50; value: 0; easing.type: Easing.OutQuad }
                     Keyframe { frame: 55; value: 0 }
                     Keyframe { frame: 80; value: 3001 }
                 },
                 KeyframeGroup {
                     target: psystem2
                     property: "time"
                     Keyframe { frame: 50; value: 0; easing.type: Easing.InQuad }
                     Keyframe { frame: 80; value: 5000 }
                 },
                 KeyframeGroup {
                     target: qtCube
                     property: "opacity"
                     Keyframe { frame: 60; value: 0 }
                     Keyframe { frame: 70; value: 0.99 }
                     Keyframe { frame: 90; value: 0.99 }
                     Keyframe { frame: 100; value: 0.0 }
                 }
             ]
         }

         View3D {
             id: view3D
             anchors.fill: parent

             environment: SceneEnvironment {
                 clearColor: "#202020"
                 backgroundMode: SceneEnvironment.Color
                 antialiasingMode: AppSettings.antialiasingMode
                 antialiasingQuality: AppSettings.antialiasingQuality
             }

             PerspectiveCamera {
                 id: camera
                 position.z: 600
             }

             PointLight {
                 position: Qt.vector3d(200, 400, 200)
                 brightness: 10
                 ambientColor: Qt.rgba(0.2, 0.2, 0.2, 1.0)
             }

             // Particle models
             Component {
                 id: dotParticleComponent
                 Model {
                     source: "#Cube"
                     scale: Qt.vector3d(0.02, 0.02, 0.02)
                     materials: DefaultMaterial {
                         lighting: DefaultMaterial.NoLighting
                     }
                 }
             }
             Component {
                 id: smokeParticleComponent
                 Model {
                     source: "#Rectangle"
                     scale: Qt.vector3d(6, 6, 6)
                     materials: DefaultMaterial {
                         diffuseMap: Texture { source: "images/smoke.png" }
                         lighting: DefaultMaterial.NoLighting
                     }
                     opacity: 0.2
                 }
             }

             Component {
                 id: starParticleComponent
                 Model {
                     source: "#Rectangle"
                     scale: Qt.vector3d(0.5, 0.5, 0.5)
                     materials: DefaultMaterial {
                         diffuseMap: Texture { source: "images/star.png" }
                         lighting: DefaultMaterial.NoLighting
                         cullMode: DefaultMaterial.NoCulling
                     }
                     opacity: 0.2
                 }
             }

             Node {
                 eulerRotation: Qt.vector3d(20, -40 + mainWindow.cubeRotation, -10 + mainWindow.cubeRotation)

                 Model {
                     id: qtCube
                     source: "#Cube"
                     scale: Qt.vector3d(2.0, 2.0, 2.0)
                     opacity: 0
                     materials: DefaultMaterial {
                         diffuseMap: Texture { source: "images/qt_logo.png" }
                     }
                 }

                 ParticleSystem3D {
                     id: psystem1
                     // We animate this system time manually
                     running: false

                     ModelParticle3D {
                         id: particleWhite
                         delegate: dotParticleComponent
                         maxAmount: 2000
                         color: "#ffffff"
                         colorVariation: Qt.vector4d(0, 0, 0, 0.8)
                         fadeInEffect: ModelParticle3D.FadeNone
                         fadeOutEffect: ModelParticle3D.FadeOpacity
                         fadeOutDuration: 3000
                     }

                     ParticleEmitter3D {
                         id: emitter1
                         particle: particleWhite
                         scale: Qt.vector3d(2.0, 2.0, 2.0)
                         shape: ParticleShape3D {
                             type: ParticleShape3D.Cube
                             fill: false
                         }
                         velocity: TargetDirection3D {
                             magnitude: -0.6
                             magnitudeVariation: 0.4
                         }
                         lifeSpan: 3000
                         emitBursts: [
                             EmitBurst3D {
                                 time: 0
                                 amount: 2000
                             }
                         ]
                     }

                     Wander3D {
                         uniqueAmount: Qt.vector3d(40.0, 40.0, 40.0)
                         uniquePace: Qt.vector3d(0.2, 0.2, 0.2)
                         uniqueAmountVariation: 0.5
                         uniquePaceVariation: 0.5
                         fadeInDuration: 1000
                     }
                 }
             }

             ParticleSystem3D {
                 id: psystem2

                 // We animate this system time manually
                 running: false

                 ModelParticle3D {
                     id: smokeParticle
                     delegate: smokeParticleComponent
                     maxAmount: 20
                     color: "#ffffff"
                     colorVariation: Qt.vector4d(0, 0, 0, 0.5)
                     fadeInEffect: ModelParticle3D.FadeScale
                     fadeOutEffect: ModelParticle3D.FadeOpacity
                     fadeOutDuration: 2000
                 }
                 ModelParticle3D {
                     id: starParticle
                     delegate: starParticleComponent
                     maxAmount: 50
                     color: "#ffff00"
                     colorVariation: Qt.vector4d(0.4, 0.6, 0, 0.1)
                     unifiedColorVariation: true
                     fadeInEffect: ModelParticle3D.FadeScale
                     fadeOutEffect: ModelParticle3D.FadeOpacity
                     fadeOutDuration: 2000
                 }

                 ParticleEmitter3D {
                     id: emitter2
                     particle: smokeParticle
                     scale: Qt.vector3d(0.1, 0.1, 0.1)
                     shape: ParticleShape3D {
                         type: ParticleShape3D.Sphere
                     }
                     particleRotationVariation: Qt.vector3d(20, 20, 180)
                     particleRotationVelocityVariation: Qt.vector3d(0, 0, 100)
                     velocity: TargetDirection3D {
                         normalized: true
                         magnitude: -200.0
                         magnitudeVariation: 0.5
                     }
                     lifeSpan: 4000
                     emitBursts: [
                         EmitBurst3D {
                             time: 400
                             amount: 20
                             duration: 600
                         }
                     ]
                 }
                 ParticleEmitter3D {
                     id: emitter3
                     particle: starParticle
                     scale: Qt.vector3d(0.1, 0.1, 0.1)
                     shape: ParticleShape3D {
                         type: ParticleShape3D.Sphere
                     }
                     particleScale: 2.0
                     particleScaleVariation: 1.0
                     particleEndScale: 5.0
                     particleEndScaleVariation: 3.0
                     particleRotationVariation: Qt.vector3d(0, 0, 180)
                     particleRotationVelocityVariation: Qt.vector3d(0, 0, 200)
                     velocity: TargetDirection3D {
                         normalized: true
                         magnitudeVariation: 150
                     }
                     lifeSpan: 2500
                     emitBursts: [
                         EmitBurst3D {
                             time: 1
                             amount: 50
                         }
                     ]
                 }
             }
         }

         Frame {
             id: toolbar
             anchors.left: parent.left
             anchors.leftMargin: 20
             anchors.right: parent.right
             anchors.rightMargin: 20
             anchors.bottom: parent.bottom
             anchors.bottomMargin: 20
             height: 60
             padding: 0
             background: Rectangle {
                 color: "#ffffff"
                 radius: 4
                 opacity: 0.2
             }

             RowLayout {
                 anchors.fill: parent
                 Button {
                     id: playButton
                     Layout.leftMargin: 14
                     Layout.minimumHeight: toolbar.height - 10
                     Layout.minimumWidth: Layout.minimumHeight
                     background: Rectangle {
                         color : "transparent"
                     }
                     icon.source: timelineAnimation.running ? "qrc:/images/icon_pause.png" : "qrc:/images/icon_play.png"
                     icon.width: Layout.minimumWidth
                     icon.height: Layout.minimumHeight
                     icon.color: "transparent"
                     onClicked: {
                         // If we are close to end, start from the beginning
                         if (timeline.currentFrame >= timeline.endFrame - 1.0)
                             timeline.currentFrame = 0;

                         timelineAnimation.running = !timelineAnimation.running;
                     }
                 }

                 CustomSlider {
                     id: sliderTimelineTime
                     Layout.fillWidth: true
                     sliderValue: timeline.currentFrame
                     sliderEnabled: !timelineAnimation.running || timelineAnimation.paused
                     fromValue: 0.0
                     toValue: 100.0
                     onSliderValueChanged: timeline.currentFrame = sliderValue;
                 }
             }
         }

         LoggingView {
             anchors.bottom: toolbar.top
             anchors.bottomMargin: 8
             particleSystems: [psystem1, psystem2]
         }
     }