ウィジェットの操作 > 3D > 3D ラベル
  
3D ラベル
このウィジェットの機能
「3D ラベル」ウィジェットにより、3D モデル上のデータと情報を表示することができます。
このウィジェットを使用するケース
AR エクスペリエンスの 3D キャンバスでテキストを追加する場合は、「3D ラベル」を使用します。「3D ラベル」ウィジェットは、1 語や 2 語のシンプルなラベルで使用することも、大量のテキストで使用することもできます。
このウィジェット固有のプロパティ、サービス、イベント、操作
一般的なウィジェットのプロパティ、サービス、イベントのリストについては、共通のウィジェットプロパティ、サービス、イベントを参照してください。
次のテーブルに、このウィジェット固有のプロパティを示します。
プロパティ
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
- フォントのスタイルを設定します (標準、斜体 (italic)、斜体 (oblique) など)
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 カラー」とサーチしてください。
次に、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
フォントの色。色の名前、16 進数値、または RGBA の値を入力します。たとえば、フォントの色を赤にする場合は、以下のいずれかを入力します。
red
#FF0000
rgba(255, 0, 0, 1)
デフォルトでは、黒に設定されています。
フォント輪郭の色
fontOutlineColor
string
フォントの輪郭の色。色の名前、16 進数値、または 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 シーン内のウィジェットジオメトリの深さに関係なく、そのウィジェットジオメトリが別の拡張上にオーバーレイされます。これを「はい」に設定すると、別の拡張によって 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 クラスの実装の詳細については、アプリケーションのスタイルを参照してください。