Qt Quick 3D - Particles 3D Testbed Example
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick3D
import QtQuick3D.Particles3D
Item {
id: mainWindow
readonly property real meterTicksAngle: 300
readonly property bool particleNeedle: checkBoxParticlesNeedle.checked
property real separation: sliderElementSeparation.sliderValue
anchors.fill: parent
Behavior on separation {
SmoothedAnimation {
velocity: 0.2
duration: 1000
}
}
View3D {
id: view3D
anchors.fill: parent
environment: SceneEnvironment {
clearColor: "#161610"
backgroundMode: SceneEnvironment.Color
antialiasingMode: settings.antialiasingMode
antialiasingQuality: settings.antialiasingQuality
}
PerspectiveCamera {
position: Qt.vector3d(0, 100, 600 - separation * 100)
}
PointLight {
position: Qt.vector3d(200, 400, 300)
brightness: 5
ambientColor: Qt.rgba(0.3, 0.3, 0.3, 1.0)
}
// Background
Model {
source: "#Rectangle"
scale: Qt.vector3d(25, 15, 0)
z: -300
materials: PrincipledMaterial {
baseColor: "#505040"
}
}
Node {
id: speedometerComponent
position: Qt.vector3d(0, 100, 0)
eulerRotation.x: 90 - separation * 75
// Light which follows the needle
PointLight {
// Calculates the direction of the needle
function getNeedleAngle(startAngle) {
return Math.sin(startAngle +
(-(180 / 360) +
(-gaugeItem.value * meterTicksAngle / 360) +
(meterTicksAngle / 2 + 180) / 360) * 2 * Math.PI);
}
readonly property real lightRadius: 120
readonly property real posX: getNeedleAngle(Math.PI) * lightRadius
readonly property real posY: getNeedleAngle(Math.PI / 2) * lightRadius
position: Qt.vector3d(posX, 40, -posY)
color: Qt.rgba(1.0, 0.8, 0.4, 1.0)
brightness: sliderNeedleBrightness.sliderValue
quadraticFade: 4.0
}
Model {
y: -4 - separation * 100
source: "meshes/meter_background.mesh"
scale: Qt.vector3d(30, 30, 30)
materials: PrincipledMaterial {
baseColor: "#505050"
metalness: 1.0
roughness: 0.6
normalMap: Texture {
source: "images/leather_n.png"
}
normalStrength: 0.4
}
}
Model {
y: -35 - separation * 100
source: "#Sphere"
scale: Qt.vector3d(1.6, 0.2, 1.6)
materials: PrincipledMaterial {
baseColor: "#606060"
}
}
Model {
y: -separation * 60
source: "#Cylinder"
scale: Qt.vector3d(0.2, 0.8, 0.2)
materials: PrincipledMaterial {
baseColor: "#606060"
}
}
Model {
y: 30 - separation * 60
source: "#Sphere"
scale: Qt.vector3d(0.4, 0.1, 0.4)
materials: PrincipledMaterial {
baseColor: "#f0f0f0"
}
}
// Speedometer labels
Model {
y: 25 + separation * 20
source: "#Rectangle"
scale: Qt.vector3d(4, 4, 4)
eulerRotation.x: -90
materials: PrincipledMaterial {
alphaMode: PrincipledMaterial.Blend
baseColorMap: Texture {
source: "images/speedometer_labels.png"
}
}
}
Model {
y: separation * 60
source: "meshes/meter_edge.mesh"
scale: Qt.vector3d(30, 30, 30)
materials: PrincipledMaterial {
baseColor: "#b0b0b0"
}
}
Node {
id: gaugeItem
property real value: 0
property real needleSize: 180
SequentialAnimation on value {
running: checkBoxAnimateSpeed.checked
loops: Animation.Infinite
NumberAnimation {
duration: 8000
to: 1
easing.type: Easing.InOutQuad
}
NumberAnimation {
duration: 8000
to: 0
easing.type: Easing.InOutQuad
}
}
y: 20 - separation * 60
eulerRotation.z: 90
eulerRotation.y: -meterTicksAngle * value + (meterTicksAngle/2 - 90)
Model {
position.y: gaugeItem.needleSize / 2
source: "#Cylinder"
scale: Qt.vector3d(0.05, gaugeItem.needleSize * 0.01, 0.2)
materials: PrincipledMaterial {
baseColor: "#606060"
opacity: particleNeedle ? 0.0 : 1.0
}
ParticleEmitter3D {
system: psystemGauge
particle: particleSpark
y: 10
scale: Qt.vector3d(0.1, 0.8, 0.1)
shape: ParticleShape3D {
type: ParticleShape3D.Cube
}
particleScale: 2.0
particleScaleVariation: 1.0
particleRotationVariation: Qt.vector3d(0, 0, 180)
particleRotationVelocityVariation: Qt.vector3d(20, 20, 200);
emitRate: 500
lifeSpan: 2000
lifeSpanVariation: 1000
}
// Needle particle system
// This system rotates together with the needle
ParticleSystem3D {
id: psystemNeedle
running: particleNeedle
visible: running
SpriteParticle3D {
id: needleParticle
sprite: Texture {
source: "images/dot.png"
}
maxAmount: 500
fadeInDuration: 50
fadeOutDuration: 200
color: "#40808020"
colorVariation: Qt.vector4d(0.2, 0.2, 0.0, 0.2)
blendMode: SpriteParticle3D.Screen
}
ParticleEmitter3D {
particle: needleParticle
y: -50
scale: Qt.vector3d(0.2, 0.0, 0.2)
shape: ParticleShape3D {
type: ParticleShape3D.Cube
}
particleScale: 4.0
particleScaleVariation: 2.0
particleEndScale: 1.0
particleEndScaleVariation: 0.5
velocity: VectorDirection3D {
direction: Qt.vector3d(0, 110, 0)
directionVariation: Qt.vector3d(10, 10, 10)
}
emitRate: sliderNeedleEmitrate.sliderValue
lifeSpan: 1000
}
}
}
}
// Gauge particle system
ParticleSystem3D {
id: psystemGauge
// Particles coming under the needle
SpriteParticle3D {
id: particleSpark
sprite: Texture {
source: "images/star3.png"
}
maxAmount: 1500
fadeInEffect: SpriteParticle3D.FadeNone
fadeOutDuration: 200
color: "#40ff0000"
colorVariation: Qt.vector4d(0.4, 0.2, 0.2, 0.2)
unifiedColorVariation: true
blendMode: SpriteParticle3D.Screen
}
// Particles rotating the gauge
SpriteParticle3D {
id: particleSpark2
sprite: Texture {
source: "images/star3.png"
}
maxAmount: 30
fadeInDuration: 1000
fadeOutDuration: 1000
color: "#20ffffff"
colorVariation: Qt.vector4d(0.2, 0.2, 0.5, 0.1)
blendMode: SpriteParticle3D.Screen
}
ParticleEmitter3D {
y: 40 + separation * 60
particle: particleSpark2
scale: Qt.vector3d(3.8, 0, 3.8)
shape: ParticleShape3D {
type: ParticleShape3D.Cylinder
}
emitRate: 10
lifeSpan: 3000
particleScale: 4.0
particleScaleVariation: 3.0
particleRotationVariation: Qt.vector3d(20, 20, 180)
particleRotationVelocityVariation: Qt.vector3d(10, 10, 50)
}
Wander3D {
uniqueAmount: Qt.vector3d(10, 0, 10)
uniquePace: Qt.vector3d(0.1, 0.1, 0.1)
fadeInDuration: 2000
}
PointRotator3D {
particles: particleSpark2
magnitude: -20
}
}
}
}
SettingsView {
CustomCheckBox {
id: checkBoxAnimateSpeed
text: "Animate Speed"
checked: true
}
CustomLabel {
text: "Speed"
opacity: !checkBoxAnimateSpeed.checked ? 1.0 : 0.4
}
CustomSlider {
id: sliderSpeedValue
sliderValue: gaugeItem.value
sliderEnabled: !checkBoxAnimateSpeed.checked
fromValue: 0
toValue: 1
onSliderValueChanged: gaugeItem.value = sliderValue;
}
CustomCheckBox {
id: checkBoxParticlesNeedle
text: "Particles Needle"
checked: true
}
CustomLabel {
text: "Needle emitRate"
opacity: checkBoxParticlesNeedle.checked ? 1.0 : 0.4
}
CustomSlider {
id: sliderNeedleEmitrate
sliderValue: 200
sliderEnabled: checkBoxParticlesNeedle.checked
fromValue: 50
toValue: 500
}
CustomLabel {
text: "Needle Brightness"
}
CustomSlider {
id: sliderNeedleBrightness
sliderValue: 10
fromValue: 0
toValue: 50
}
CustomLabel {
text: "Elements Separation"
}
CustomSlider {
id: sliderElementSeparation
sliderValue: 0
fromValue: 0
toValue: 1
}
}
LoggingView {
anchors.bottom: parent.bottom
particleSystems: [psystemGauge, psystemNeedle]
}
}
