ウィジェットの操作 > 3D > 3D イメージ
  
3D イメージ
このウィジェットの機能
「3D イメージ」ウィジェットでは、AR エクスペリエンスの 3D キャンバス上に 3D イメージを挿入できます。サポートされているファイルフォーマットは次のとおりです。
.png
.jpg.jpeg
.svg
.gif
.bmp
このウィジェットを使用するケース
ユーザーに対してグラフィカルな 3D コンテンツや画像を表示する場合は、イメージを使用します。たとえば、汚れたエアフィルタがどのような状態になっているかをサービス技術者に説明する場合、汚れたエアフィルタを表示するだけで、フィルタの状態を簡単に伝えることができます。
このウィジェット固有のプロパティ、サービス、イベント、操作
一般的なウィジェットのプロパティ、サービス、イベントのリストについては、共通のウィジェットプロパティ、サービス、イベントを参照してください。
次のテーブルに、このウィジェット固有のプロパティを示します。
プロパティ
JavaScript
タイプ
説明
リソース
src
string
3D イメージで使用されているリソース。
イメージを含めるには、次のいずれかの操作を実行します。
フィールドの横の をクリックして、新しいイメージファイルを追加します。
フィールドに直接イメージの URL を入力するか、コピーして貼り付けます。
イメージをドロップダウンメニューから選択します。
高さ
height
number
3D イメージの高さ (メートル)。最小値は 0.04 メートルです。
width
number
3D イメージの幅 (メートル)。最小値は 0.04 メートルです。
クラス
class
string
ウィジェットに割り当てられているクラス。
現時点では、次の CSS プロパティがサポートされています。
background-color - イメージの塗りつぶしの色を設定します
border-color- イメージを囲む境界線の色を設定します
border-style - イメージを囲む境界線のスタイルを設定します
border-radius - イメージを囲む境界線のコーナーを丸めます
border-width - イメージを囲む境界線のストローク幅を設定します
border - border-colorborder-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」と入力します。この値は、「スタイル」 > 「アプリケーション」で追加されたコンテンツを参照します。
スケール
scale
string
3D イメージのスケール。
X 座標
x
number
X 軸上のイメージの位置。
Y 座標
y
number
Y 軸上のイメージの位置。
Z 座標
z
number
Z 軸上のイメージの位置。
X 回転
rz
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
boolean
イメージのピボット点を決定します。
左上
中央上
右上
中央左
中央
中央右
左下
中央下
右下
動作中のウィジェット
ウィジェットがどのように表示されるか、以下に例を示します。
使用時に必要な最小ステップ
外観
1. 「3D イメージ」ウィジェットをキャンバス上にドラッグアンドドロップします。
2. (オプション) 「詳細」枠で「ビルボード」のチェックボックスを選択します。
3. 「リソース」フィールドで、既存のイメージを選択するか、新しいイメージを追加するか、表示するイメージの URL を入力します。
4. 必要に応じてキャンバス上のイメージを配置します。
CSS でのウィジェットのスタイル設定
CSS を使用して、ウィジェットのスタイルを設定できます。作成および適用できる CSS クラスの例を次に示します。
* 
クラスに一意の名前を付けて、別のクラスや OOTB プロパティと競合しないようにすることをお勧めします。
CSS の例
外観
.ptc-3DImage {
padding: 10px;
border: 10px solid black;
border-radius: 50px;
background: green;
}
CSS クラスの実装の詳細については、アプリケーションのスタイルを参照してください。