장난감 커스터마이저

장난감 커스터마이저는 QML로 제작된 대화형 3D 애플리케이션으로, 사용자가 장난감에 3D 액세서리와 얼굴 특징을 실시간으로 부착하여 장난감 캐릭터를 개인화할 수 있습니다. 이 애플리케이션은 Qt Quick 3D 장면과 표준 Qt Quick Controls 장면을 결합하는 방법을 보여줍니다.

예제 실행하기

에서 예제를 실행하려면 Qt Creator에서 Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 Qt Creator: 튜토리얼을 참조하세요 : 빌드 및 실행을 참조하세요.

개요

이 예제에서는 실시간으로 렌더링된 3D 장난감 모델을 Qt Quick 3D. 사용자 인터페이스를 통해 사용자는 다양한 장난감 중에서 선택하고, 다양한 3D 액세서리와 얼굴 아이템을 부착하고, 3D 보기에서 결과물을 보면서 해당 액세서리의 색상을 조정할 수 있습니다.

레이아웃은 세로 및 가로 방향 모두에 맞게 조정되며, 이 예제는 웹어셈블리(WASM) 플랫폼에서도 실행할 수 있습니다(자세한 내용은 웹어셈블리용 Qt를 참조하십시오).

이 예제의 주요 내용은 다음과 같습니다:

• PrincipledMaterial 을 사용하여 장난감 모델의 물리 기반 머티리얼 정의하기.
• 2D QML 컨트롤과 3D 장면 결합하기.
• 재사용 가능한 QML 파일로 컴포넌트를 구성하여 구조를 개선하기.
• 사용자가 3D 장면을 드래그하여 3D 미리 보기에서 장난감을 회전할 수 있도록 합니다.
• Timeline 및 TimelineAnimation 을 사용하여 첫 페이지의 장난감에 짧은 입구 및 춤추는 애니메이션 추가.

애플리케이션 구조

기본 QML 파일인 Main.qml 은 기본 애플리케이션 창을 정의하고 6개 페이지 간의 탐색을 관리합니다.

• 첫 페이지: 장난감들이 시야에 들어와 짧은 댄스 애니메이션을 순서대로 수행합니다.
• 갤러리 페이지: 장난감 그리드가 표시되고 사용자가 장난감을 선택할 수 있습니다.
• 확인 페이지: 선택한 장난감에 대한 자세한 내용을 표시하고 확인을 요청합니다.
• 사용자 지정 페이지: 사용자가 장난감의 액세서리와 이름을 선택합니다.
• 주문 개요 페이지: 주문 완료 전 현재 주문을 요약합니다.
• 최종 페이지: 주문이 완료되었음을 확인하고 사용자가 새 주문을 시작할 수 있도록 합니다.

에셋

에셋이 아직 없는 경우 빌드 시점에 다운로드됩니다. 다운로드가 완료되면 압축된 아카이브가 추출됩니다. 이후 빌드에서 추출된 에셋 파일이 변경된 경우 필요한 모든 에셋을 사용할 수 있는지 확인하고 런타임 오류를 방지하기 위해 아카이브가 다시 추출됩니다. 에셋 문제 또는 업데이트된 에셋 패키지로 인해 빌드가 실패한 경우 클린 빌드를 수행하면 다운로드한 아카이브와 추출된 파일이 모두 제거되므로 다음 빌드를 새로운 상태에서 시작할 수 있습니다.

애니메이션

첫 페이지에는 View3D. Texture 은 3D 장난감에 이미지 기반 조명을 제공하는 HDR light probe 로 사용됩니다. 애니메이션 장난감의 프레임을 구성하고 장면에서 걷거나 춤추는 동작을 강조하기 위해 PerspectiveCamera 및 SpotLight 노드가 추가되었습니다.

캐릭터의 스킨 메시를 구동하는 Skin 컴포넌트가 있고, 부모 Node 는 씬에서 장난감 캐릭터의 위치와 변형을 위한 래퍼 역할을 합니다. 걷기와 춤은 TimelineAnimation 에서 재생되는 Timeline 에 의해 제어됩니다. 애니메이션 데이터는 KeyframeGroup 및 Keyframe 요소를 사용하여 정의되거나 캐릭터의 동작에 대한 키프레임을 제공하는 keyframeSource 를 통해 바이너리 데이터에서 로드됩니다.

또한 이 예제에서는 공유 PrincipledMaterial 를 사용하여 base color, roughness, culling mode, opacity 를 포함한 애니메이션 캐릭터의 물리 기반 모양을 정의합니다. 머티리얼은 기본 색상으로 texture maps 과 모델에서 URL로 제공되고 로드를 위해 Texture 객체에 바인딩되는 normal data 을 사용합니다. AnimationModel.qml 은 애니메이션 장난감의 데이터 모델 역할을 하며 텍스처 및 메시 소스는 물론 각 장난감의 눈 위치 및 회전과 같은 추가 메타데이터를 저장합니다.

반응형 UI

UI는 다양한 창 크기와 orientations 에 반응하도록 설계되었습니다. 장난감 갤러리 페이지(ToyGalleryPage.qml)에서 장난감 grid 은 사용 가능한 너비에 따라 열 수를 자동으로 조정하여 portrait 및 landscape 모드 모두에서 장난감 카드가 명확하게 표시되고 일관된 모양과 느낌을 유지하도록 합니다.

다른 페이지에서는 portrait 및 landscape 보기에 서로 다른 레이아웃이 사용됩니다. landscape 에서는 항목이 나란히 배열되고 portrait 에서는 단일 열 레이아웃이 사용되어 콘텐츠가 세로로 쌓입니다. LayoutItemProxy 은 UI 정의를 중복하지 않고 이러한 레이아웃 내에서 항목을 배치하는 데 사용됩니다.

항목 크기, 여백 및 글꼴과 같은 일부 디자인 값은 다른 기본 해상도에 맞게 지정되므로 이 예제에서는 ApplicationConfig.qml 을 사용하여 실제 화면 해상도에 따라 이러한 값의 크기를 조정합니다. 또한 이 파일은 원래 디자인 사양에서 파생된 타이포그래피 설정, 글꼴 패밀리 및 창 지오메트리 상수를 중앙 집중화합니다.

인터랙티브 3D 보기

사용자 지정 페이지(ToyCustomizePage.qml)에서 3D view 은 선택한 액세서리와 함께 장난감을 표시합니다. 장난감은 별도의 신체 부위가 있는 루트 Node 로 표시되며, 각각은 자체 모델링된 Node 으로 표시됩니다. 3D 보기는 OrbitCameraController.qml 을 통해 대화형이며, 사용자는 장난감을 회전하고 부착된 액세서리 3D models 를 다양한 각도에서 살펴볼 수 있으며, DragHandler 는 회전 제스처를 처리합니다.

소스 파일

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