屬性
|
JavaScript
|
類型
|
描述
|
||
資源
|
src
|
string
|
針對 3D 圖像所使用的資源。
欲納入圖像,您可執行下列動作之一: • 按一下欄位旁的 以新增新圖像檔案。 • 可直接輸入或貼上圖像網址至此欄位中。 • 從下拉式功能表中選取圖像。 |
||
高度
|
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 場景中的幾何結構為何,將小工具配置覆蓋於場景中的任何其他增強功能之上。若設為「是」,則不會由其他增強功能所隱藏。
|
||
透明度 (1 不透明 - 0 透明)
|
opacity
|
number
|
以數字 0 與 1 來控制物件的透明度。0 為完全透明;1 則為完全不透明。
|
||
樞紐
|
pivot
|
boolean
|
決定圖像的樞紐點:
• 左上
• 正上
• 右上
• 左中
• 正中
• 右中
• 左下
• 正下
• 右下
|
使用所必須的最少步驟
|
近似外觀
|
1. 拖曳「3D 圖像」小工具至畫布上。
2. (選用) 選取「詳細資訊」窗格中的「告示牌」核取方塊。
3. 在「資源」欄位中,選取現有的圖像、新增新的圖像,或輸入您要顯示圖像的網址。
4. 將圖像置於畫布上的適當位置。
|
|
請記住,最好為類別指定唯一名稱,從而不與其他類別或 OOTB 屬性相衝突。
|
CSS 範例
|
近似外觀
|
.ptc-3DImage {
padding: 10px; border: 10px solid black; border-radius: 50px; background: green; } |