3D 元素

3D 元素表示您項目中的三維物體,包括導入的 3D 模型、基本幾何原型、從 2D 形狀擠出來的形狀、3D 文本和布林運算的結果。

3D 元素共享來自 基本元素視圖元素 的共同字段,同時還引入了額外的 3D 專用屬性。

基本字段

屬性類型必要範例值範圍描述
typestringtrue-3D元素的類型。對於 3D 元素,這始終是 "3D"。
sourceIdstringfalse--3D 模型或幾何資源的內部標識符。
extstringfalse-glb | gltf | geometry | text3d3D 元素的文件擴展名或幾何類型。
externalUrlstringfalse--加載外部 glTF/glb 模型的可選 URL。引擎將獲取並緩存模型。
nodeCategorystringfalse-basic | polyhedron | extrusion | pathSweep | boolean3D 節點的類別,指示它是如何創建的。
geometryTypestringfalse--基本幾何的類型。請參見下面的 "幾何類型" 部分。
originalWidthnumberfalse--3D 模型在世界單位中的原始寬度。
originalHeightnumberfalse--3D 模型在世界單位中的原始高度。
originalDepthnumberfalse--3D 模型在世界單位中的原始深度。
currentAnimationIndexnumberfalse--當前播放的 glTF 動畫的索引(如果模型包含動畫)。

3D 變換字段

除了標準的 2D 變換屬性(x, y, 旋轉, scaleX, scaleY)外,3D 元素還支持額外的變換屬性以進行三維定位和旋轉:

屬性類型必要範例值範圍描述
znumberfalse--元素在 3D 空間中的深度位置。單位與像素對齊,z=0 對應於畫布平面。
rotationXnumberfalse--圍繞 X 軸的旋轉,以度為單位。
rotationYnumberfalse--圍繞 Y 軸的旋轉,以度為單位。
scaleZnumberfalse-> 0沿 Z 軸的縮放因子。值大於 1 放大,介於 0 和 1 之間的值縮小。

幾何類型

geometryType 字段指定基本 3D 幾何的類型。可用類型按類別組織:

基本形狀 (nodeCategory: "basic"):

  • cube - 六面體
  • sphere - 球形幾何
  • cylinder - 圓柱幾何
  • cone - 圓錐幾何
  • torus - 圈狀幾何
  • capsule - 膠囊形幾何
  • disc - 扁平圓盤

多面體 (nodeCategory: "polyhedron"):

  • pyramid - 四面體金字塔
  • octahedron - 八面體
  • icosahedron - 二十面體
  • dodecahedron - 十二面體
  • hexPrism - 六面體棱柱
  • triangle - 三角形棱柱

擠出形狀 (nodeCategory: "extrusion"):

  • plus - 加號/十字形
  • star - 星形
  • roundedRect - 圓角矩形

路徑掃描 (nodeCategory: "pathSweep"):

  • helix - 螺旋
  • torusKnot - 圈結幾何
  • tricylinder - 三圓柱交集

形狀擠出

3D 元素可以通過擠出 2D 形狀來創建。當您在編輯器中將 2D 形狀元素轉換為 3D 時,它會生成一個新的 type: "3D" 元素,並包含以下額外字段:

屬性類型必要範例值範圍描述
extrusionSourceobjectfalse--用於創建 3D 擠出的原始 2D 形狀數據。包含完整的 ShapeNodeData。
shapeSizeXnumberfalse--擠出形狀的寬度,以像素為單位。
shapeSizeYnumberfalse--擠出形狀的高度,以像素為單位。
shapeExtrusionnumberfalse--沿 Z 軸的擠出深度,以像素為單位。
shapeCornerstringfalse-round | chamfer | straight擠出形狀的角落類型。
shapeRoundnessSmoothnumberfalse-0 - 1圓角的平滑度(0-1)。
shapeRoundnessArcnumberfalse--圓角的弧半徑。
shapeBevelnumberfalse--邊緣的斜切深度。
shapeBevelSidesnumberfalse--斜切邊緣的段數。

3D 文本

3D 元素還可以表示具有深度和斜切的三維文本:

屬性類型必要範例值範圍描述
textContentstringfalse--要在 3D 中渲染的文本內容。
textStyle3Dobjectfalse--文本樣式屬性(字體、大小、粗細等)。重用一些 2D 文本樣式字段。
textDepthnumberfalse--3D 文本的擠出深度。
textBevelSizenumberfalse--文本邊緣的斜切大小。
textBevelSegmentsnumberfalse--文本斜切的段數。
textCurveSegmentsnumberfalse--文本曲線的段數。

材料和紋理

3D 元素支持先進的材料屬性和紋理映射:

屬性類型必要範例值範圍描述
geometryColorstringfalse#FFFFFF-3D 幾何的基本顏色,以十六進制格式表示。
materialTypestringfalse--材料的 MaterialX 預設路徑。示例:"StandardSurface/standard_surface_gold.mtlx"。
texturesobjectfalse--材料的紋理映射(顏色、法線、粗糙度、金屬度、環境遮蔽、發光)。

textures 對象可以包含以下紋理映射屬性:

  • colorMap - 基本顏色/漫反射紋理
  • normalMap - 表面細節的法線圖
  • roughnessMap - 粗糙度紋理
  • metalnessMap - 金屬度紋理
  • aoMap - 環境遮蔽圖
  • emissiveMap - 發光紋理

每個紋理映射可以包括強度參數以控制其效果。

glTF 模型和動畫

具有 ext: "glb"ext: "gltf" 的 3D 元素表示導入的 3D 模型:

  • 使用 externalUrl 指定遠程 glTF/glb 文件的 URL
  • 引擎將使用 sourceId 獲取並緩存模型
  • 如果模型包含動畫,請使用 currentAnimationIndex 選擇要播放的動畫
  • 模型支持 DRACO 壓縮以減小文件大小

範例

基本立方體

cubeElement.json
1 2{ 3 "id": "3d-cube-001", 4 "type": "3D", 5 "start": 0, 6 "duration": 5, 7 "trackIndex": 0, 8 "x": 540, 9 "y": 540, 10 "z": 0, 11 "width": 200, 12 "height": 200, 13 "anchorX": 100, 14 "anchorY": 100, 15 "rotation": 0, 16 "rotationX": 30, 17 "rotationY": 45, 18 "scaleX": 1, 19 "scaleY": 1, 20 "scaleZ": 1, 21 "alpha": 1, 22 "ext": "geometry", 23 "geometryType": "cube", 24 "nodeCategory": "basic", 25 "geometryColor": "#4A90E2" 26} 27

擠出形狀

extrudedShapeElement.json
1 2{ 3 "id": "3d-extrusion-001", 4 "type": "3D", 5 "start": 0, 6 "duration": 5, 7 "trackIndex": 0, 8 "x": 540, 9 "y": 540, 10 "z": 0, 11 "width": 300, 12 "height": 300, 13 "anchorX": 150, 14 "anchorY": 150, 15 "rotation": 0, 16 "rotationX": 0, 17 "rotationY": 0, 18 "scaleX": 1, 19 "scaleY": 1, 20 "scaleZ": 1, 21 "alpha": 1, 22 "ext": "geometry", 23 "nodeCategory": "extrusion", 24 "shapeSizeX": 300, 25 "shapeSizeY": 300, 26 "shapeExtrusion": 100, 27 "geometryColor": "#FF6B6B", 28 "extrusionSource": { 29 "shapeType": "SHAPE_STAR", 30 "starPoints": 5, 31 "starInnerRadius": 0.4 32 } 33} 34

帶動畫的 glTF 模型

gltfModelElement.json
1 2{ 3 "id": "3d-model-001", 4 "type": "3D", 5 "start": 0, 6 "duration": 10, 7 "trackIndex": 0, 8 "x": 540, 9 "y": 540, 10 "z": -200, 11 "width": 400, 12 "height": 400, 13 "anchorX": 200, 14 "anchorY": 200, 15 "rotation": 0, 16 "rotationX": 0, 17 "rotationY": 0, 18 "scaleX": 1, 19 "scaleY": 1, 20 "scaleZ": 1, 21 "alpha": 1, 22 "ext": "glb", 23 "externalUrl": "https://example.com/models/animated_character.glb", 24 "sourceId": "cached-model-123", 25 "currentAnimationIndex": 0, 26 "originalWidth": 2, 27 "originalHeight": 2, 28 "originalDepth": 2 29} 30

注意事項

  • 3D 元素與現有的 2D 渲染管道完全整合。您可以在同一項目中混合 2D 和 3D 元素。
  • 相機使用像素完美的透視投影,確保在 z=0 時,一個世界單位等於一個像素。
  • 對於 3D 變換,坐標系遵循標準 3D 約定:X(右),Y(上),Z(朝向觀察者)。
  • 材料和紋理屬性通常由編輯器設置。如果您手動編寫 JSON,請參考 MaterialX 預設文檔以獲取可用材料。