Qt Quick 3D - 소개

이 예제에서는 간단한 예제 코드를 통해 기본 Quick 3D 기능에 대한 소개 개요를 제공합니다.

씬 설정하기

main.qml 파일에서 전체 씬을 설정합니다.

QtQuick3D 모듈의 유형을 사용하려면 해당 모듈을 임포트해야 합니다:

import QtQuick
import QtQuick3D

3D 씬을 그리려면 Qt Quick 씬 내에 3D 뷰포트가 필요합니다. 이는 View3D 클래스에서 제공하며 여기에서 씬을 정의합니다. 하나의 애플리케이션에서 여러 개의 뷰를 가질 수도 있습니다( Qt Quick 3D - View3D 예제 참조).

먼저 씬의 환경을 정의하는 것으로 시작합니다. 이 예제에서는 skyblue 으로 배경색을 지우고 SceneEnvironment 에서 뷰의 environment 속성을 지정합니다. SceneEnvironment 에서는 톤 매핑 설정, 이미지 기반 조명을 위한 광원 프로브 설정, 배경 모드 또는 앰비언트 오클루전 매개변수 등 장면의 환경과 관련된 다양한 속성에 대해 설명합니다. 또한 안티앨리어싱을 제어할 수도 있습니다( Qt Quick 3D - 안티앨리어싱 예제 참조). 이 예제에서는 clearColor 및 backgroundMode 속성을 설정하여 파란색 배경을 얻었습니다.

environment: SceneEnvironment {
    clearColor: "skyblue"
    backgroundMode: SceneEnvironment.Color
}

메시

이제 장면을 좀 더 재미있게 만들기 위해 메시를 추가하겠습니다. Quick 3D에는 편의를 위해 구, 큐브, 원뿔 또는 원통과 같은 여러 가지 기본 제공 메시가 있습니다. 모델 노드의 소스 속성에서 #Sphere, #Cube,#Rectangle 와 같은 특수 식별자를 사용하여 참조할 수 있습니다. 기본 제공 프리미티브 외에도 .mesh 파일을 지정할 수 있습니다. FBX 또는 glTF2 에셋에서 .mesh 파일을 생성하려면 Balsam 에셋 임포트 툴을 사용하여 에셋을 처리해야 합니다. 아래는 파란색 구와 빨간색 납작한 원통을 추가하는 코드를 보여줍니다:

Model {
    position: Qt.vector3d(0, -200, 0)
    source: "#Cylinder"
    scale: Qt.vector3d(2, 0.2, 1)
    materials: [ DefaultMaterial {
            diffuseColor: "red"
        }
    ]
}

Model {
    position: Qt.vector3d(0, 150, 0)
    source: "#Sphere"

    materials: [ DefaultMaterial {
            diffuseColor: "blue"
        }
    ]

    SequentialAnimation on y {
        loops: Animation.Infinite
        NumberAnimation {
            duration: 3000
            to: -150
            from: 150
            easing.type:Easing.InQuad
        }
        NumberAnimation {
            duration: 3000
            to: 150
            from: -150
            easing.type:Easing.OutQuad
        }
    }
}

메시를 추가하기 위해 두 개의 모델 노드( #Sphere 및 #Cylinder )와 source 을 사용하여 빌트인 메시를 로드합니다. 모델에 색상을 지정하려면 먼저 머티리얼을 지정해야 합니다. 이 경우 빨간색과 파란색의 확산 색상이 있는 DefaultMaterial 을 사용합니다. 서로 다른 속성을 가진 세 가지 머티리얼, 즉 DefaultMaterial, PrincipledMaterial 및 CustomMaterial( Qt Quick 3D - 기본 머티리얼 예제 및 프로그래밍 가능한 머티리얼, 효과, 지오메트리 및 텍스처 데이터 참조)을 사용할 수 있습니다. Model 에 의해 로드된 메시에는 여러 개의 하위 메시가 있을 수 있으며, 각 하위 메시에는 지정된 머티리얼이 있어야 합니다. 이 예제에서는 빌트인 메시만 사용되었으며, 이 메시에는 각각 하나의 서브 메시만 있으므로 materials 목록에 하나의 DefaultMaterial을 지정하는 것으로 충분합니다.

Model 은 Node 이므로 관련 변환이 있습니다. 변환을 적용하려면 position 프로퍼티를 사용합니다. eulerRotation 속성을 설정하여 모델을 회전할 수도 있습니다. 원통을 접시처럼 보이게 하려면 scale 속성을 적절히 설정합니다.

카메라

그런 다음 3D 씬의 콘텐츠가 2D 표면에 투사되는 방식을 지정하는 카메라를 정의합니다. 이 예제에서는 원근 투영을 제공하는 PerspectiveCamera 을 사용합니다. OrthographicCamera 유형을 통해 직교 투영도 가능합니다. 카메라의 기본 방향은 음의 Z축을 따라 순방향 벡터가, 양의 Y축을 따라 상방향 벡터가 가리키도록 설정되어 있습니다. 이 예에서는 카메라를 Z축에서 300으로 다시 이동합니다. 또한 Y축을 약간 위로 이동하고 X축을 중심으로 약간 회전하여 약간 아래쪽을 바라보도록 합니다.

PerspectiveCamera {
    position: Qt.vector3d(0, 200, 300)
    eulerRotation.x: -30
}

조명

씬에서 모델을 볼 수 있으려면 씬에도 광원이 필요합니다. 특정 방향에서 멀리 떨어진 태양이 비추는 것으로 생각할 수 있는 DirectionalLight 이 씬에 추가됩니다. SpotLight 및 PointLight, Qt Quick 3D - 조명 예제를 참조하세요.

DirectionalLight {
    eulerRotation.x: -30
    eulerRotation.y: -70
}

애니메이션

마지막으로 구체에 애니메이션을 적용합니다. y 컴포넌트에 SequentialAnimation 을 적용하여 구를 위아래로 무한히 움직입니다.

SequentialAnimation on y {
    loops: Animation.Infinite
    NumberAnimation {
        duration: 3000
        to: -150
        from: 150
        easing.type:Easing.InQuad
    }
    NumberAnimation {
        duration: 3000
        to: 150
        from: -150
        easing.type:Easing.OutQuad
    }
}

이 모든 부분이 함께 작동하면 3D 장면을 렌더링할 수 있습니다. 이 예제에서는 Qt Quick 3D 의 기본 기능 중 일부만 다루었습니다. 더 많은 예제를 보려면 예제 페이지를 방문하세요.

예제 프로젝트 @ code.qt.io