위젯 작업 > 3D > 3D 레이블
  
3D 레이블
이 위젯의 기능은 무엇인가요?
3D 레이블 위젯을 사용하면 사용자의 3D 모델에 데이터 및 정보를 표시할 수 있습니다.
이 위젯은 언제 사용해야 하나요?
AR 경험의 3D 캔버스에 텍스트를 포함하려는 경우 3D 레이블을 사용합니다. 3D 레이블은 하나 또는 두 개 단어 레이블 또는 더 많은 텍스트 양에도 사용할 수 있습니다.
특별한 속성, 서비스, 이벤트 또는 작업이 있나요?
공통적인 위젯 속성, 서비스 및 이벤트 목록을 보려면 공통적인 위젯 속성, 서비스 및 이벤트 항목을 참조하십시오.
다음 테이블은 이 위젯에 한정된 속성 목록입니다.
속성
JavaScript
유형
설명
텍스트
text
string
위젯에 표시되는 텍스트입니다.
높이
height
number
레이블의 높이입니다. 기본적으로 0.05로 설정됩니다(또는 필드가 비어있음).
너비
width
number
레이블의 너비입니다.
클래스
class
string
위젯에 지정된 클래스입니다.
현재 지원되는 CSS 속성은 다음과 같습니다.
font-family—글꼴 패밀리 설정
color—글꼴/색상 채우기 설정
--text-stroke-colorcolor과(와) 유사하지만 글꼴 스트로크 색상 설정
--text-stroke-width—스트로크의 너비 설정
font-weight—글꼴의 무게 또는 두께 설정
font-style
—글꼴 스타일 설정(일반, 기울임꼴, 불투명도 등)
background-color—레이블의 색상 채우기 설정
text-decoration—밑줄 지원
border-color—레이블 주변 테두리의 색상 설정
border-radius—이미지 주변 테두리의 코너 둥글게 만들기
border-style—레이블 주변 테두리의 스타일 설정
border-width—레이블 주변 테두리의 스트로크 너비 설정
borderborder-color, border-styleborder-width 결합
padding—레이블 텍스트 밖의 패딩 설정
예를 들어 프로젝트 창의 스타일 아래에서 응용 프로그램을 클릭하고 편집기에 다음을 입력합니다.
.my-label {
font-family: Century Gothic;
color: black;
--text-stroke-color: yellow;
--text-stroke-width: 3px;
font-weight: normal;
font-style: italic;
background-color: grey
}
* 
지정된 색상은 CSS 색상이어야 합니다. 올바른 CSS 색상을 알지 못하는 경우 인터넷 검색을 통해 “CSS 색상”을 검색해 보십시오.
그런 다음 3D 레이블의 클래스 필드에 다음을 입력합니다.my-label 이는 스타일 > 응용 프로그램에 추가된 콘텐츠를 참조합니다.
상태 기반 서식 적용 사용
enableStateFormatting
boolean
ThingWorx에서 정의된 상태 정의를 기반으로 하는 위젯의 서식을 지정할 수 있습니다.
확인란을 선택하면 다음 속성이 표시됩니다.
종속 필드
상태 정의
예를 들어 3D 레이블에 error상태 정의 값이 포함되어 있으면 레이블이 빨간색으로 변경됩니다.
ThingWorx의 스타일 및 상태 정의에 대한 자세한 내용은 ThingWorx 도움말 센터에서 스타일 및 상태 정의를 참조하십시오.
종속 필드
stateFormatValue
string
이 속성은 상태 기반 서식 적용 사용 확인란을 선택한 경우 표시됩니다. ThingWorx의 스타일 및 상태 정의에 대한 자세한 내용은 ThingWorx 도움말 센터에서 스타일 및 상태 정의를 참조하십시오.
상태 정의
stateFormat
boolean
이 속성은 상태 기반 서식 적용 사용 확인란을 선택한 경우 표시됩니다. ThingWorx의 스타일 및 상태 정의에 대한 자세한 내용은 ThingWorx 도움말 센터에서 스타일 및 상태 정의를 참조하십시오.
글꼴 패밀리
fontFamily
string
글꼴의 스타일입니다. 올바른 글꼴 패밀리를 Arial, Times New Roman, Century Gothic 등으로 입력합니다. 기본적으로 Arial로 설정됩니다.
글꼴 색
fontColor
string
글꼴의 색입니다. 색상 이름, Hex 값 또는 RGBA 값을 입력합니다. 예를 들어 글꼴 색을 빨간색으로 지정하려면 다음 중 한 가지를 입력합니다.
red
#FF0000
rgba(255, 0, 0, 1)
기본적으로 검정색으로 설정됩니다.
글꼴 윤곽선 색
fontOutlineColor
string
글꼴 윤곽선의 색상입니다. 색상 이름, Hex 값 또는 RGBA 값을 입력합니다. 예를 들어 레이블의 윤곽선을 색상 빨간색으로 지정하려면 다음 중 한 가지를 입력합니다.
red
#FF0000
rgba(255, 0, 0, 1)
기본적으로 흰색으로 설정됩니다.
배율
scale
string
레이블의 배율입니다.
X 좌표
x
number
x축에서의 레이블 위치입니다.
Y 좌표
y
number
y축에서의 레이블 위치입니다.
Z 좌표
z
number
z축에서의 레이블 위치입니다.
X 회전
rx
number
x축에 대한 레이블의 회전입니다.
Y 회전
ry
number
y축에 대한 레이블의 회전입니다.
Z 회전
rz
number
z축에 대한 레이블의 회전입니다.
빌보드
billboard
boolean
항상 뷰어를 마주보도록 중심 주변으로 위젯을 회전합니다. 위젯이 화면에 맞춰 조정됩니다.
가림
occlude
boolean
선택하면 위젯의 형상이 표시되지 않으며, 동시에 3D 장면에서 위젯 뒤에 다른 모든 증강을 숨깁니다.
따라서 배경 또는 카메라 피드에 가려진 위젯이 있어야 할 위치가 표시됩니다. 이는 주변 3D 형상을 숨겨 일부 증강을 강조하는 데 사용할 수 있습니다.
항상 위에 표시
decal
boolean
3D 장면에서 깊이에 관계없이 다른 모든 증강의 위젯 형상을 오버레이합니다. 로 설정하면 다른 증강에 의해 숨겨지지 않습니다. 일반적으로 이는 항상 표시되도록 유지해야 하는 레이블 또는 센서에 사용할 수 있습니다.
불투명도(1 불투명 - 0 투명)
opacity
number
객체의 투명도 레벨을 0 ~ 1 사이로 제어합니다. 0은 완전히 투명이며 1은 완전히 불투명입니다.
피벗
pivot
number
이미지의 피봇 점을 결정합니다.
왼쪽 위
위쪽 가운데
오른쪽 위
가운데 왼쪽
정가운데
가운데 오른쪽
왼쪽 아래
아래쪽 가운데
오른쪽 아래
위젯 작동
본 예는 위젯의 작동 장면입니다.
사용에 필요한 최소 단계
작동 장면
1. 3D 레이블 위젯을 캔버스로 끌어서 놓습니다.
2. (선택 사항) 세부 정보 창에서 빌보드 확인란을 선택합니다.
3. 텍스트 필드에 표시하려는 텍스트를 입력하거나 데이터 속성을 위젯의 텍스트 필드로 바인딩합니다.
CSS를 사용하여 위젯 스타일 적용
CSS를 사용하여 위젯에 스타일을 적용할 수 있습니다! 다음은 사용자가 작성하여 적용할 수 있는 CSS 클래스의 예제입니다.
* 
다른 클래스 또는 기본 제공(OOTB) 속성과 충돌하지 않도록 클래스에 고유한 이름을 지정하는 것이 좋습니다.
CSS 예제
작동 장면
.ptc-3DLabel {
font-family: Century Gothic;
color: black;
--text-stroke-color: yellow;
--text-stroke-width: 3px; /*csslint ignore*/
font-weight: normal;
font-style: italic;
background-color: grey
}
CSS 클래스 구현에 관한 자세한 정보는 응용 프로그램 스타일 항목을 참조하십시오.