ThingWorx Studio 탐색 > 위젯 > 3D > 3D 이미지
  
3D 이미지
이 위젯의 기능은 무엇인가요?
3D 이미지 위젯을 사용하면 3D 이미지를 AR 경험의 3D 캔버스에 삽입할 수 있습니다. 지원되는 파일 유형은 다음과 같습니다.
.png
.jpg, .jpeg
.svg
.gif
.bmp
이 위젯은 언제 사용해야 하나요?
사용자에게 3D 그래픽 컨텐트 또는 그림을 표시하려는 경우 이미지를 사용합니다. 예를 들어 서비스 기술자에게 청결하지 않은 에어 필터의 상태를 설명하려는 경우 그러한 에어 필터의 이미지를 포함시키기만 하면 쉽게 설명할 수 있습니다.
특별한 속성, 서비스, 이벤트 또는 작업이 있나요?
공통적인 위젯 속성, 서비스 및 이벤트 목록을 보려면 공통적인 위젯 속성, 서비스 및 이벤트 항목을 참조하십시오.
다음 테이블은 이 위젯에 한정된 속성 목록입니다.
속성
설명
리소스
3D 이미지에 사용되는 리소스입니다.
이미지를 포함하려면 다음 중 한 가지를 수행하십시오.
필드 옆의 를 클릭하여 새 이미지 파일을 추가합니다.
이미지 URL을 필드에 입력하거나 복사하여 직접 붙여 넣습니다.
드롭다운 메뉴에서 이미지를 선택합니다.
클래스
위젯에 지정된 클래스입니다.
현재 지원되는 CSS 속성은 다음과 같습니다.
background-color—이미지의 색상 채우기 설정
border-color—이미지 주변 테두리의 색상 설정
border-style—이미지 주변 테두리의 스타일 설정
border-radius—이미지 주변 테두리의 코너 둥글게 만들기
border-width—이미지 주변 테두리의 스트로크 너비 설정
borderborder-color, border-styleborder-width 결합
padding—이미지 밖의 패딩 설정
예를 들어 프로젝트 창의 스타일 아래에서 응용 프로그램을 클릭하고 편집기에 다음을 입력합니다.
.my-image {
border-color: black;
border-style: solid;
border-radius: 5px;
border-width: 3px;
background-color: white
padding: 25px 15px 25px 40px;
}
* 
지정된 색상은 CSS 색상이어야 합니다. 올바른 CSS 색상을 알지 못하는 경우 인터넷 검색을 통해 “CSS 색상”을 검색해 보십시오.
그런 다음 3D 이미지의 클래스 필드에 다음을 입력합니다.my-image 이는 스타일 > 응용 프로그램에 추가된 컨텐트를 참조합니다.
배율
3D 이미지의 배율입니다.
X 좌표
x축에서의 이미지 위치입니다.
Y 좌표
y축에서의 이미지 위치입니다.
Z 좌표
z축에서의 이미지 위치입니다.
X 회전
x축에 대한 이미지의 회전입니다.
Y 회전
y축에 대한 이미지의 회전입니다.
Z 회전
z축에 대한 이미지의 회전입니다.
빌보드
항상 뷰어를 마주보도록 중심 주변으로 위젯을 회전합니다. 위젯이 화면에 맞춰 조정됩니다.
폐쇄
선택하면 위젯의 형상이 표시되지 않으며, 동시에 3D 장면에서 위젯 뒤에 다른 모든 증강을 숨깁니다.
그러므로 배경 또는 카메라 피드에 폐쇄 위젯이 있어야 할 위치가 표시됩니다. 이는 주변 3D 형상을 숨겨 일부 증강을 강조하는 데 사용할 수 있습니다.
항상 위에 표시
3D 장면에서 깊이에 관계없이 다른 모든 증강의 위젯 형상을 오버레이합니다. 로 설정하면 다른 증강에 의해 숨겨지지 않습니다. 일반적으로 이는 항상 표시되도록 유지해야 하는 레이블 또는 센서에 사용할 수 있습니다.
불투명도(1 불투명 - 0 투명)
객체의 투명도 레벨을 0 ~ 1 사이로 제어합니다. 0은 완전히 투명이며 1은 완전히 불투명입니다.
피벗
이미지의 피봇 점을 결정합니다.
왼쪽 위
위쪽 가운데
오른쪽 위
가운데 왼쪽
정가운데
가운데 오른쪽
왼쪽 아래
아래쪽 가운데
오른쪽 아래
위젯 작동
본 예는 위젯의 작동 장면입니다.
사용에 필요한 최소 단계
예제에 적용된 옵션 CSS
작동 장면
1. 3D 이미지 위젯을 캔버스로 드래그 앤 드롭합니다.
2. (선택 사항) 세부 정보 창에서 빌보드 확인란을 선택합니다.
3. 리소스 필드에서 기존 이미지를 선택하고, 새 이미지를 추가한 다음 표시하려는 이미지에 대한 URL을 입력합니다.
4. 이미지를 캔버스에 적절하게 배치합니다.
없음
3D