Google Ads, Google AdMob, AMP HTML 광고, 동영상 광고 또는 이미지 광고에서는 이 구성요소를 지원하지 않습니다.
3D 모델 뷰어 구성요소를 사용하면 회전, 화면 이동 또는 확대/축소할 수 있는 GLB 형식 3D 모델을 광고에 삽입할 수 있습니다. Google Web Designer의 3D 편집기 내에서 모델을 구성할 수도 있습니다.
3D Model Editor - Car configurator and hyper-casual game tutorial in Google Web Designer
브라우저 호환성
Microsoft Edge는 3D 모델 뷰어 구성요소를 지원하지 않습니다.
프로젝트에 3D 모델 뷰어 구성요소를 추가하는 방법:
- 구성요소 패널을 연 다음, 그래픽 및 효과 폴더를 엽니다.
- 3D 모델 뷰어 구성요소를 스테이지로 드래그합니다.
- 속성 패널의 3D 모델 뷰어 섹션에 소스로 사용할 GLB 파일을 입력합니다. 찾아보기
버튼을 클릭하여 파일 시스템에서 파일을 선택합니다.
- 스테이지의 구성요소를 더블클릭하여 3D 편집기 대화상자를 열고 모델을 구성합니다. 완료되면 저장을 클릭합니다.
Google Web Designer 환경설정을 조정하여(수정 > 환경설정... > 구성요소) GLB 파일을 스테이지로 드래그할 때 3D 모델 뷰어 구성요소가 자동으로 생성되도록 할 수 있습니다.
속성
구성요소 속성은 속성 패널에서 확인할 수 있습니다(3D 편집기를 종료해야 함).
| 속성 | 설명 |
|---|---|
|
이름 |
3D 모델 뷰어 구성요소의 이름입니다. |
| 소스 |
3D 애셋의 GLB 소스 파일입니다. 애셋 파일의 크기는 3MB 이하여야 합니다. 추가 가이드라인은 3D 애셋 가이드를 참조하고 Khronos glTF Validator를 사용하여 GLB 파일이 유효한지 확인하세요. |
고급 속성
| 속성 | 설명 |
|---|---|
|
동작 큐 아이콘 |
사용자가 모델과 상호작용하도록 3D 모델 위에 표시할 이미지입니다. 동작 큐는 애니메이션 제한에 도달할 때까지 사용자의 시선을 사로잡기 위해 조금씩 움직이다가 사용자가 모델과 상호작용하기 시작하면 사라집니다.동적 데이터에 결합될 수 있습니다. |
|
동작 큐 텍스트 |
동작 큐 아이콘 아래에 표시할 텍스트입니다. 동작 큐 아이콘이 지정된 경우에만 적용됩니다.동적 데이터에 결합될 수 있습니다. |
|
애니메이션 제한 설정 |
동작 큐 애니메이션이 지속되는 시간을 제한하려면 이 체크상자를 선택하고 초 단위로 설정합니다.동적 데이터에 결합될 수 있습니다. |
3D 편집기
3D 편집기 대화상자를 열려면 다음을 수행하세요.
- 스테이지에서 3D 모델 뷰어 구성요소를 더블클릭합니다.
그러면 회전하고 확대/축소할 수 있는 3D 모델의 미리보기가 표시됩니다. 핫스팟으로 상호작용할 수도 있습니다.
오른쪽 패널을 사용하여 모델을 구성하세요. 구성은 GLB와 구성요소라는 두 가지 기본 탭으로 이루어집니다.
GLB 탭
GLB 탭에서 변경하는 사항은 애셋 폴더의 모델 소스 파일에 저장됩니다. 여기에는 질감으로 사용되는 이미지 파일이 포함되어 있습니다. 이러한 이미지 파일은 GLB 파일과 함께 보관됩니다. 사용되지 않은 질감을 자동으로 삭제하도록 Google Web Designer 환경설정을 설정할 수 있습니다.
|
|
|---|---|
|
소스 |
3D 모델의 GLB 소스 파일입니다. 이 필드는 읽기 전용 항목입니다. 소스 파일을 변경하려면 3D 편집기 대화상자를 종료하고 속성 패널에서 구성요소 소스 속성을 수정합니다. |
|
세부정보 |
크기 - 소스 파일 크기입니다. |
|
|
|
소재 |
한 번에 하나의 소재만 구성할 수 있습니다.
|
|
기본 색상 |
현재 소재에 사용할 시작 색상과 질감입니다. |
|
금속성/거칠기 |
금속성 및 거칠기 속성에 따라 소재에 빛이 반사되는 정도가 달라집니다.
|
|
일반 매핑 |
소재에 돌출 및 표면 세부정보를 추가하는 질감을 선택합니다. |
|
발광 |
소재의 발광 효과를 나타내는 색상과 질감을 선택합니다. |
|
오클루전 |
주변 조명에 따른 음영을 나타내는 질감을 선택합니다. |
| 기타 |
소재에 대한 추가 옵션을 설정합니다.
|
구성요소 탭
구성요소 탭에서 변경하는 사항은 기본 GLB 소스 파일이 아닌, 3D 모델 뷰어 구성요소에 반영됩니다.
HDR 파일
3D 모델 뷰어 구성요소의 배경 및 환경 조명에 HDR(High Dynamic Range) 이미지 파일을 사용할 수 있습니다. 각 HDR 파일은 크기가 150KB 미만이어야 합니다. 이 제한을 넘지 않도록 큰 HDR 파일의 크기를 256x128로 조절하는 것이 좋습니다.
|
|
|---|---|
|
배경 |
이미지 - 배경으로 사용할 이미지 또는 환경(HDR 파일)을 선택합니다.동적 데이터에 결합될 수 있습니다. |
|
주변광(HDR) |
이미지 기반 조명을 사용하여 실제 환경을 기반으로 한 세밀한 조명을 제공할 수 있습니다.
|
|
애니메이션 |
GLB 소스 파일에 애니메이션이 포함되어 있는 경우 애니메이션이 자동재생되도록 설정할 수 있습니다. 3D 편집기에서는 현재 애니메이션 만들기를 지원하지 않습니다.
|
|
|
|
초기 카메라 뷰 |
초기 카메라 뷰에 따라 구성요소가 로드될 때의 카메라 설정이 달라집니다. 아래에 설정된 모든 카메라 회전 제한 및 카메라 확대/축소 제한이 적용됩니다.
|
|
궤도 중심축 |
궤도 중심축은 3D 공간에서 카메라가 기준으로 삼고 회전하는 지점입니다. 이는 기본적으로 3D 모델의 중심으로 설정됩니다.
|
|
시야 |
카메라의 수직 시야입니다.
|
| 카메라 회전 제한 |
사용자가 모델을 회전할 수 있는 범위를 제한하려면 요 또는 피치 체크박스를 선택하고 최소 및 최대 각도를 설정합니다.
|
|
카메라 확대/축소 제한 |
|
|
|
|
핫스팟 |
핫스팟은 3D 모델에서 사용자가 상호작용할 수 있는 지점입니다. 클릭된 핫스팟에 대한 응답으로 정보 카드를 표시하거나 이벤트를 설정할 수 있습니다.
|
|
이미지 |
여러 상태의 이미지를 지정하여 핫스팟의 모양을 맞춤설정할 수 있습니다. 모든 핫스팟에서는 동일한 이미지 집합을 사용합니다.
|
|
정보 카드 스타일 |
색상을 지정하여 정보 카드의 모양을 맞춤설정합니다.
|
이벤트 및 동작
이벤트이벤트를 사용하여 광고에서 다른 동작을 트리거할 수 있습니다. 3D 모델 뷰어 구성요소는 다음과 같은 이벤트를 전송합니다.
| 이벤트 | 설명 |
|---|---|
| 3D 장면 렌더링됨 | 3D 모델 장면이 처음 렌더링된 후 전송됩니다. |
| 카메라 변경됨 | 3D 카메라 속성이 변경되면 전송됩니다. 사용자가 카메라를 조정하면 event.detail 객체에 source: user-interaction 속성이 포함됩니다. |
| 핫스팟 클릭됨 | 3D 편집기에서 설정한 핫스팟이 클릭되면 전송됩니다. event.detail 객체에는 클릭된 핫스팟의 이름, 장면의 핫스팟 목록에 있는 핫스팟의 색인, 핫스팟의 X 및 Y 화면 좌표가 포함되어 있습니다. |
| 상호작용 시작됨 | 사용자가 3D 모델과 상호작용을 시작할 때 전송됩니다. |
| 상호작용 종료됨 | 사용자가 3D 모델과 상호작용을 중지하면 전송됩니다. |
이벤트 대화상자에서 이러한 이벤트 중 하나를 선택하려면 3D 모델 뷰어 구성요소를 타겟으로 설정합니다.
다음과 같은 3D 모델 뷰어 구성요소 동작은 다른 이벤트에 대한 응답으로 트리거될 수 있습니다.
| 이벤트 | 설명 | 구성 옵션 |
|---|---|---|
| 요 설정 | 모델을 지정된 요(수직 축을 기준으로 회전)로 변경하고 휴면 상태의 애니메이션을 일시중지합니다. |
|
| 목표 요 설정 | 모델을 지정된 요로 부드럽게 회전합니다. |
|
| 목표 피치 설정 | 모델을 지정된 피치로 부드럽게 회전합니다(세로 축을 따라 회전). |
|
| 목표 피치 증가 | 지정된 양만큼 모델을 목표 피치 방향으로 부드럽게 회전합니다. 모델이 이미 목표 피치에 도달한 경우 효과가 없습니다. |
|
| 목표 확대/축소 설정 | 지정된 확대/축소 수준으로 부드럽게 확대/축소합니다. |
|
| 목표 확대/축소 증가 | 목표 확대/축소를 증가시킵니다(미터 단위). |
|
| 목표 피봇 설정 | 회전의 기준점을 변경하고 기준점을 중심으로 주위를 돌 수 있는 위치로 카메라를 부드럽게 이동합니다. |
|
| 목표 로컬 팬 | 카메라를 새로운 위치로 부드럽게 이동합니다. |
|
| 소재 색상 설정 | 소재 색상을 설정합니다. |
|
| 애니메이션 재생 | 지정한 애니메이션을 재생합니다. |
|
| 애니메이션 일시중지 | 지정된 애니메이션을 일시중지합니다. |
|
| 애니메이션 시간 설정 | 애니메이션 실행 중에 지정된 시간을 찾습니다. |
|
이벤트 대화상자에서 이러한 동작 중 하나를 선택할 때 3D 모델 뷰어 구성요소를 수신자로 설정하세요.
맞춤 코드를 사용하여 추가 메서드를 사용할 수 있습니다.
getCameraDetails()
현재 카메라 설정에 대한 세부정보가 있는 객체를 반환합니다.
반환된 객체의 속성:
- yaw - 세로 축을 기준으로 회전한 각도입니다.
- pitch - 가로 축을 기준으로 회전한 각도입니다.
- zoom - 확대/축소 수준입니다(미터 단위).
- x - 카메라 궤도 중심축을 기준으로 한 x 위치입니다(미터 단위).
- y - 카메라 궤도 중심축을 기준으로 한 y 위치입니다(미터 단위).
- z - 카메라 궤도 중심축을 기준으로 한 z 위치입니다(미터 단위).
고급 사용자는 https://modelviewer.dev의 문서를 참고할 수도 있습니다.
미리보기
3D 모델 뷰어 구성요소는 3D 편집기 또는 브라우저에서 오른쪽 상단에 있는 미리보기 버튼을 클릭하여 미리 볼 수 있습니다.