연습 - MR에서 보기 및 3D로 보기
Easy-Sales 는 쇼핑 환경을 개선하기 위해 빌드된 판매 지향 혼합 현실 애플리케이션입니다. 이 애플리케이션을 사용하는 영업 사원은 고객의 주변 환경을 검사하고 측정하여 공간에서 실현 가능한 제품을 결정할 수 있습니다. 또한 고객이 혼합 현실을 통해 제품을 시각화하는 데 도움이 될 수 있습니다.
3D로 보기와 MR로 보기 기능을 구현하여 Power Apps를 통해 제품을 정확하게 시각화할 것입니다.
SharePoint 목록에 3D 개체 추가
애플리케이션에 필요한 3D 모델 및 이미지는 SharePoint 목록에 저장됩니다. 먼저 이 목록에 필요한 리소스를 추가해 보겠습니다.
Easy Sales라는 SharePoint 목록에서 + 열 추가를 선택한 다음 열 표시/숨기기를 선택합니다.
첨부 파일이 선택되어 있는지 확인한 다음 맨 위에서 적용을 누릅니다.
목록에서 항목을 선택한 다음 첨부 파일 추가를 선택합니다. Power Apps 사용자 지정 폴더에서 3D 모델(.glb 파일) 또는 이미지(.jpg 파일)를 선택합니다. 목록의 모든 항목에 대해 동일한 절차를 따릅니다.
첨부 파일 열 옆의 드롭다운을 선택한 다음, 먼저 첨부 파일 표시를 선택합니다. 우리는 쉽게 액세스 할 수 있도록 먼저 배치되기를 원합니다.
세부 정보 페이지 만들기 및 3D 구성 요소에서 보기 추가
세부 정보 페이지에는 선택한 제품에 대한 모든 세부 정보 및 정보가 포함됩니다. 제품의 특정 기능에 대한 이해를 제공합니다. 이전 섹션에서 디자인한 제품 페이지와 이 섹션에서 만든 세부 정보 페이지를 연결해야 합니다. 여기서는 Power Apps의 3D 보기 구성 요소를 사용하여 캔버스 앱에 3D 콘텐츠를 추가합니다. 더 나은 보기를 위해 3D 개체를 회전하고 확대할 수 있습니다.
두 개의 새 페이지를 만들고 Product_details 이름을 바꾸고 Carpet_details.
> 제품 페이지 및 카펫 페이지에 포함된 갤러리 컨트롤에서 아이콘을 선택합니다. 그런 다음 함수 탭에 각각 다음 줄을 추가하여 OnSelect 속성을 구성 합니다 .
Navigate(Product_details,ScreenTransition.Cover,{content : ThisItem})Navigate(Carpet_details,ScreenTransition.Cover,{content_carpets : ThisItem})
가격, 차원, 두께, 색 및 재질과 같은 몇 가지 레이블을 추가하여 Product_details 페이지 빌드를 시작하겠습니다. 레이블 내의 텍스트를 편집하여 레이블의 Text 속성 내에 원하는 텍스트를 삽입할 수 있습니다. 레이블 이름을 적절하게 바꿉니다.
비고
애플리케이션의 테마, 글꼴 및 색상표를 사용자 지정하여 사용자 환경 및 모양을 향상시킬 수 있습니다.
제품 이름이라는 다른 레이블을 삽입하여 제품 이름을 맨 위에 표시하고 가운데 맞춤을 설정합니다. 다음 줄을 추가하여 레이블의 Text 속성을 구성합니다.
content.'{Name}'
미디어 드롭다운을 선택한 다음 이미지를 선택하여 Product_details 화면에 이미지를 삽입합니다. 다음과 같은 방법으로 Image 속성을 구성합니다.
content.ImageLink
3D에서 보기 구성 요소를 이미지 구성 요소 위에 겹칩니다. 3D 모델이 연결되어 있지 않은 제품은 이미지 구성 요소를 통해 볼 수 있습니다. 3D 구성 요소에서 보기를 추가하려면 미디어 드롭다운을 선택한 다음, 3D에서 보기를 선택합니다.
비고
구성 요소에 기본 셰이프가 포함됩니다. Source 속성을 변경하여 이 셰이프를 다른 셰이프로 변경할 수 있습니다.
이미지에 표시된 것처럼 이미지 구성 요소 위에 구성 요소를 배치하고, SharePoint 목록에서 3D 모델을 연결하려면 다음과 같이 3D 구성 요소에서 View의 원본 속성을 구성합니다.
First(Gallery_products.Selected.Attachments).Value
첨부 파일 열에 저장된 파일 형식에 따라 제품을 쉽게 볼 수 있도록 3D 구성 요소의 이미지 및 보기 모두의 Visible 속성을 변경합니다. 다음과 같이 3D 구성 요소에서 이미지 및 뷰의 Visible 속성을 구성합니다.
이미지 :
If(Gallery_products.Selected.FileType = "Image", true, false)
3D로 보기 :
If(Gallery_products.Selected.FileType = "Model", true, false)
이미지에 표시된 대로 Price, Dimensions, Weight, Color 및 Material 레이블 옆에 빈 레이블을 추가하여 해당 제목 아래에 제품 정보를 표시합니다. 다음과 같이 이러한 레이블의 Text 속성을 구성합니다.
가격 :
content.Price
차원 :
content.Dimensions
무게 :
content.Weight
색 :
content.Color
재질 :
content.PrimaryMaterial
뒤로 아이콘을 추가하여 이전 화면으로 이동합니다. 뒤로 아이콘을 추가하려면 아이콘 드롭다운을 확장하고 뒤로 아이콘을 선택합니다. 뒤로 아이콘을 올바르게 배치하고 다음을 추가하여 OnSelect 속성을 구성합니다.
Navigate('Products',ScreenTransition.Cover)
Carpet_details 동일한 절차를 따릅니다. 그에 따라 Navigate 함수를 사용자 지정합니다.
팁 (조언)
진행률을 저장하려면 맨 위에 있는 파일 탭을 선택하고 저장 옵션을 선택합니다. Ctrl+S를 사용하여 진행률을 저장할 수도 있습니다.
비고
Carpet_details 페이지에 3D 보기 구성 요소를 포함하지 않도록 하십시오. 카펫 범주에는 3D 모델을 사용하지 않습니다.
MR 구성 요소에서 보기
MR의 보기 는 사용자가 실제 환경에 3D 개체 또는 이미지를 배치할 수 있도록 Power Apps에서 제공하는 혼합 현실 기능입니다. 애플리케이션에 필요한 3D 모델 및 이미지는 SharePoint 목록에 저장됩니다. 먼저 SharePoint 목록에 필요한 리소스를 추가해 보겠습니다.
MR 보기 구성 요소를 Product_details 화면에 추가합니다. 삽입 탭을 연 다음 Mixed Reality 드롭다운을 확장한 다음 MR 구성 요소에서 보기를 선택합니다.
MR 구성 요소의 보기에 대한 속성 탭 에서원본 필드를 선택하고 SharePoint 목록에 저장된 3D 모델에 액세스하려면 입력합니다.
First(Gallery_products.Selected.Attachments).Value
비고
MR에서 보기 기능은 카펫 범주에 포함되지 않습니다. 대신 MR 세션에서측정된 면적에 따라 카펫의 가격을 예상합니다.
MR 구성 요소 의 보기에서 제공하는 또 다른 고유한 속성은 개체 크기 조정입니다. 개체 너비, 개체 높이 및 개체 깊이 속성을 변경하여 외부에서 3D 모델의 크기를 편집할 수 있습니다.
이미지에 표시된 대로 속성 창에서 다음 속성을 설정합니다.
- 개체 너비 = 1.5
- 개체 높이 = 1
- 개체 깊이 = 1
- 측정 단위 = 미터
이러한 값은 이 애플리케이션에 포함된 3D 모델에 따라 설정됩니다.
비고
필요에 따라 개체 너비, 개체 높이 및 개체 깊이 에 전달되는 값을 사용자 지정할 수도 있습니다. 전달된 값은 측정 단위에 지정된 단위로 수행됩니다. 드롭다운에서 적절한 측정 단위를 선택하고 나중에 값을 입력합니다.
팁 (조언)
진행률을 저장하려면 맨 위에 있는 파일 탭을 선택하고 저장 옵션을 선택합니다. Ctrl+S를 사용하여 진행률을 저장할 수도 있습니다.
위의 단계를 구현하면 자세한 제품 정보가 포함된 세부 정보 페이지가 있는 애플리케이션이 생성됩니다. 또한 애플리케이션은 3D 구성 요소에 View 를 포함하므로 3D 콘텐츠를 포함할 수 있습니다. MR 구성 요소의 뷰 를 통해 실제 환경에 3D 모델을 배치할 수도 있습니다. 이제 이러한 기능을 구현하는 방법을 배웠으므로 향후 애플리케이션에 통합할 수 있습니다.
