使用小工具 > 3D > 3D 圖像 (3D Image)
  
3D 圖像 (3D Image)
此小工具的功能為何?
「3D 圖像」小工具,可讓您在 AR 體驗的 3D 畫布上插入 3D 圖像。可支援的檔案格式:
.png
.jpg.jpeg
.svg
.gif
.bmp
使用此小工具的時機?
當您想為使用者顯示 3D 圖像內容或圖片時,即可使用 3D Image。舉例來說,如果您想對服務技術人員工說明骯髒空氣濾清器的樣子,直接提供骯髒空氣濾清器的圖片會比較清楚。
還有任何特殊屬性、服務、事件、動作嗎?
欲檢視通用小工具的屬性、服務、事件,請參閱 共通的小工具屬性、服務、事件
下表是此小工具專屬屬性的清單。
屬性
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-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 colors」。
然後在 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. 將圖像置於畫布上的適當位置。
使用 CSS 對小工具進行樣式化處理
您可使用 CSS 對小工具進行樣式化處理!以下為 CSS 類別範例,您可進行建立並套用︰
* 
請記住,最好為類別指定唯一名稱,從而不與其他類別或 OOTB 屬性相衝突。
CSS 範例
近似外觀
.ptc-3DImage {
padding: 10px;
border: 10px solid black;
border-radius: 50px;
background: green;
}
如需有關實行 CSS 類別的詳細資訊,請參閱 應用程式樣式