Qt Quick Exemple d'éclairage en 3D
Illustre l'utilisation de différents types d'éclairage.
Cet exemple montre comment utiliser trois types d’éclairage différents dans une application.
Configuration des lumières de la scène
Lumière directionnelle
La lumière directionnelle émet de la lumière dans une seule direction à partir d’une source non identifiable située à une distance infinie. Ce phénomène est similaire au fonctionnement de la lumière du soleil dans la réalité. Une lumière directionnelle a une portée infinie et ne s’affaiblit pas.
Nous avons configuré la lumière directionnelle pour qu’elle émette une lumière rouge et nous avons animé sa rotation autour de l’axe x.
DirectionalLight {
id: light1
color: Qt.rgba(1.0, 0.1, 0.1, 1.0)
ambientColor: Qt.rgba(0.1, 0.1, 0.1, 1.0)
position: Qt.vector3d(0, 200, 0)
rotation: Quaternion.fromEulerAngles(-135, -90, 0)
shadowMapQuality: Light.ShadowMapQualityVeryHigh
pcfFactor: 1
visible: directionalLightCheckBox.checked
castsShadow: checkBoxShadows.checked
brightness: directionalLightSlider.value
SequentialAnimation on rotation {
loops: Animation.Infinite
QuaternionAnimation {
to: Quaternion.fromEulerAngles(-45, -90, 0)
duration: 2000
easing.type: Easing.InOutQuad
}
QuaternionAnimation {
to: Quaternion.fromEulerAngles(-135, -90, 0)
duration: 2000
easing.type: Easing.InOutQuad
}
}
}Lumière ponctuelle
La lumière ponctuelle peut être décrite comme une sphère émettant de la lumière avec une intensité égale dans toutes les directions à partir de son centre. Cela ressemble au fonctionnement d’une ampoule.
Nous avons configuré une lumière ponctuelle pour qu’elle émette une lumière verte et nous avons animé sa position selon la coordonnée x.
PointLight {
id: light2
color: Qt.rgba(0.1, 1.0, 0.1, 1.0)
ambientColor: Qt.rgba(0.1, 0.1, 0.1, 1.0)
position: Qt.vector3d(0, 300, 0)
shadowMapFar: 2000
shadowMapQuality: Light.ShadowMapQualityHigh
visible: pointLightCheckBox.checked
castsShadow: checkBoxShadows.checked
brightness: pointLightSlider.value
SequentialAnimation on x {
loops: Animation.Infinite
NumberAnimation {
to: 400
duration: 2000
easing.type: Easing.InOutQuad
}
NumberAnimation {
to: 0
duration: 2000
easing.type: Easing.InOutQuad
}
}
}Lumière ponctuelle
Le projecteur est similaire à la lumière ponctuelle, à la différence qu’il émet de la lumière sous forme de cône dans une seule direction plutôt que dans toutes les directions. Hormis l’angle du cône, un projecteur présente les mêmes caractéristiques et propriétés que la lumière ponctuelle.
Nous avons configuré un spot pour qu’il émette une couleur chaude et nous avons animé sa rotation selon l’axe y.
SpotLight {
id: light4
color: Qt.rgba(1.0, 0.9, 0.7, 1.0)
ambientColor: Qt.rgba(0.0, 0.0, 0.0, 0.0)
position: Qt.vector3d(0, 250, 0)
eulerRotation.x: -45
shadowMapFar: 2000
shadowMapQuality: Light.ShadowMapQualityHigh
visible: spotLightCheckBox.checked
castsShadow: checkBoxShadows.checked
brightness: spotLightSlider.value
coneAngle: 110
innerConeAngle: 70
PropertyAnimation on eulerRotation.y {
loops: Animation.Infinite
from: 0
to: -360
duration: 10000
}
}Configuration des modèles de la scène
Nous ajoutons d’abord deux modèles rectangulaires qui serviront de sol et de mur arrière à notre scène. Ceux-ci sont utiles pour observer les ombres projetées par la lumière.
Model {
source: "#Rectangle"
y: -200
scale: Qt.vector3d(15, 15, 15)
eulerRotation.x: -90
materials: [
PrincipledMaterial {
baseColor: Qt.rgba(0.8, 0.6, 0.4, 1.0)
}
]
}
Model {
source: "#Rectangle"
z: -400
scale: Qt.vector3d(15, 15, 15)
materials: [
PrincipledMaterial {
baseColor: Qt.rgba(0.8, 0.8, 0.9, 1.0)
}
]
}Ensuite, nous ajoutons notre modèle de logo principal, qui est pivoté autour de l’axe y.
Model {
id: logoDefault
source: "qtlogo.mesh"
scale: Qt.vector3d(5000, 5000, 5000)
property variant material
materials: [ material ]
property bool animate: true
NumberAnimation on eulerRotation.y {
running: logoDefault.animate
loops: Animation.Infinite
duration: 5000
from: 0
to: -360
}
}Nous ajoutons également de petits modèles de cubes pour illustrer la position et la rotation de chaque type de lumière. Ces cubes s'agrandissent lorsque l'utilisateur accède aux curseurs correspondants.
Model {
// Directional Light Marker
property real size: directionalLightSlider.highlight ? 0.2 : 0.1
source: "#Cube"
position: light1.position
rotation: light1.rotation
scale: Qt.vector3d(size, size, size * 2)
materials: [
PrincipledMaterial {
baseColor: light1.color
lighting: PrincipledMaterial.NoLighting
}
]
castsShadows: false
visible: directionalLightCheckBox.checked
}
Model {
// Point Light Marker
source: "#Sphere"
position: light2.position
rotation: light2.rotation
property real size: pointLightSlider.highlight ? 0.2 : 0.1
scale: Qt.vector3d(size, size, size)
materials: [
PrincipledMaterial {
baseColor: light2.color
lighting: PrincipledMaterial.NoLighting
}
]
castsShadows: false
visible: pointLightCheckBox.checked
}
Node {
// Spot Light Marker
position: light4.position
rotation: light4.rotation
property real size: spotLightSlider.highlight ? 0.2 : 0.1
scale: Qt.vector3d(size, size, size)
Model {
source: "#Cone"
castsShadows: false
eulerRotation.x: 90
materials: PrincipledMaterial {
baseColor: light4.color
lighting: PrincipledMaterial.NoLighting
}
}
visible: spotLightCheckBox.checked
}Depuis le panneau de paramètres, l'utilisateur peut ensuite activer les ombres et contrôler séparément la visibilité et la luminosité de chaque source lumineuse.
© 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.
