使用小工具 > 3D > 3D 標籤 (3D Label)
  
3D 標籤 (3D Label)
此小工具的功能為何?
「3D 標籤」小工具,可於您的 3D 模型上顯示資料與資訊。
使用此小工具的時機?
當要在 AR 體驗的 3D 畫布上納入文字時,可使用「3D 標籤」。「3D 標籤」可用於簡單一或兩個字的標籤,亦可用於大量文字的標籤。
還有任何特殊屬性、服務、事件、動作嗎?
欲檢視通用小工具的屬性、服務、事件,請參閱 共通的小工具屬性、服務、事件
下表是此小工具專屬屬性的清單。
屬性
JavaScript
類型
描述
「文字」
text
string
小工具上顯示的文字。
高度
height
number
標籤的高度。預設值 (或該欄位空白時) 為 0.05。
寬度
width
number
標籤的寬度。
類別
class
string
指派至小工具的類別。
目前支援下列 CSS 屬性:
font-family - 設定字型系列
color - 設定字型/填充顏色
--text-stroke-color - 類似 color,但設定字型描邊顏色
--text-stroke-width - 設定描邊的寬度
font-weight - 設定字型的重量,或可稱為粗細
font-style
- 設定字型樣式,如正常、斜體、斜角等
background-color - 設定標籤的填充顏色
text-decoration - 支援底線
border-color - 設定標籤周圍的邊界顏色
border-radius - 圖像周圍的角落四周
border-style - 設定標籤周圍的邊界樣式
border-width - 設定圖像周圍的邊界描邊寬度
border - 合併 border-colorborder-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 colors」。
然後在 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
字型的顏色。輸入顏色名稱、十六進位值或 RGBA 值。以紅色字型為例,您可輸入下列之一:
red
#FF0000
rgba(255, 0, 0, 1)
預設值為黑色。
字型輪廓色彩
fontOutlineColor
string
字型輪廓的顏色。輸入顏色名稱、十六進位值或 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 類別的詳細資訊,請參閱 應用程式樣式