Qt Quick 3D - ライトの例

異なるライトタイプの使用例を示します。

この例では、3つの異なるライトタイプをアプリケーションで使用する例を示します。

シーンライトの設定

指向性ライト

指向性ライトは、無限に遠くにある正体不明の光源から一方向に光を放ちます。これは、現実世界での太陽光の仕組みに似ています。指向性ライトは無限の範囲を持ち、減衰しません。

私たちは、指向性光が赤色に発光するように設定し、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
        }
    }
}

点光源

点光源は球体と表現することができ、光の中心からすべての方向に等しい強さで光を放ちます。これは電球の発光に似ています。

点光源を緑色に発光するように設定し、その位置を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
        }
    }
}

スポットライト

スポット・ライトはポイント・ライトと似ていますが、すべての方向ではなく、ある方向に向かって円錐状に光を放ちます。円錐の角度を除けば、スポットライトはポイントライトと同じ特性を持っています。

スポットライトを暖色系に設定し、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
    }
}

シーンモデルの設定

まず、2つの矩形モデルを追加して、シーンの床と後ろの壁として機能させます。これらは光の影を見るのに便利です。

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)
        }
    ]
}

次に、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
    }
}

また、各ライトタイプの位置と回転を示すために、小さな立方体モデルも追加します。これらのキューブは、ユーザーが関連するスライダーにアクセスすると、より大きく拡大されます。

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
}

設定パネルから、シャドウを有効にしたり、各ライトの可視性と明るさを個別にコントロールしたりできます。

サンプルプロジェクト @ code.qt.io

©2024 The Qt Company Ltd. ここに含まれるドキュメントの著作権は、それぞれの所有者に帰属します。本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。