プロパティ
|
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-color、border-style、border-width を組み合わせます
• padding - イメージの外側にパディングを適用します
たとえば、「プロジェクト」枠の「スタイル」で「アプリケーション」をクリックし、以下のコードをエディタで入力します。
.my-image {
border-color: black; border-style: solid; border-radius: 5px; border-width: 3px; background-color: white padding: 25px 15px 25px 40px; }
次に、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. 必要に応じてキャンバス上のイメージを配置します。
|
|
クラスに一意の名前を付けて、別のクラスや OOTB プロパティと競合しないようにすることをお勧めします。
|
CSS の例
|
外観
|
.ptc-3DImage {
padding: 10px; border: 10px solid black; border-radius: 50px; background: green; } |