Phần Tử 3D

Một phần tử 3D đại diện cho các đối tượng ba chiều trong dự án của bạn, bao gồm các mô hình 3D nhập khẩu, các hình học nguyên thủy cơ bản, các hình dạng được đùn từ các hình 2D, văn bản 3D và kết quả của các phép toán boolean.

Các phần tử 3D chia sẻ các trường chung từ Phần Tử Cơ Bản và Phần Tử Xem, đồng thời cũng giới thiệu các thuộc tính cụ thể cho 3D bổ sung.

Các Trường Cơ Bản

Các Trường Biến Đổi 3D

Ngoài các thuộc tính biến đổi 2D tiêu chuẩn (x, y, xoay, tỉ lệX, tỉ lệY), các phần tử 3D hỗ trợ các thuộc tính biến đổi bổ sung cho việc định vị và xoay ba chiều:

Các Loại Hình Học

Trường geometryType xác định loại hình học 3D cơ bản. Các loại có sẵn được tổ chức theo danh mục (được chỉ định qua trường category khi nodeType là "geometry" hoặc "primitive"):

Lưu ý: nodeType: "primitive" là một bí danh cho "geometry". Cả hai đều được hỗ trợ và hoạt động giống nhau.

Hình Dạng Cơ Bản (category: "basic"):

• cube - Hình hộp sáu mặt
• sphere - Hình cầu
• cylinder - Hình trụ
• cone - Hình nón
• torus - Hình donut
• capsule - Hình viên thuốc
• disc - Đĩa tròn phẳng

Đa Diện (category: "polyhedron"):

• pyramid - Kim tự tháp bốn mặt
• octahedron - Đa diện tám mặt
• icosahedron - Đa diện hai mươi mặt
• dodecahedron - Đa diện mười hai mặt
• hexPrism - Lăng trụ sáu mặt
• triangle - Lăng trụ tam giác

Các Loại Nút Đối Số

Các nút đối số (nodeType: "parametric") tạo ra hình học theo quy trình:

Đùn (category: "extrusion"):

• Đùn các hình 2D dọc theo trục Z với độ sâu và vát

Quay (category: "lathe"):

• Quay một hồ sơ 2D quanh một trục để tạo ra các đối tượng hình trụ

Quét (category: "sweep"):

• Quét một hồ sơ 2D dọc theo một đường 3D để tạo ra các hình dạng ống hoặc dựa trên đường ray

Các Loại Nút Đường Cong

Các nút đường cong (nodeType: "curve") tạo ra các đường cong và đường đi 3D:

Helix (category: "helix"):

• Các đường cong xoắn ốc với bán kính và độ dốc có thể cấu hình

Nút Torus (category: "torusKnot"):

• Các đường cong nút toán học trên bề mặt torus

Tùy Chỉnh (category: "custom"):

• Các đường đi do người dùng định nghĩa

Các Loại Nút Địa Hình

Các phép toán địa hình (boolean, mảng, gương, hợp chất) được thực hiện trong trình chỉnh sửa và tạo ra đầu ra hình học tiêu chuẩn. Những phép toán này được áp dụng tại thời điểm chỉnh sửa và không yêu cầu xử lý đặc biệt trong API kết xuất.

Đùn Hình Dạng

Các phần tử 3D có thể được tạo ra bằng cách đùn các hình 2D. Khi bạn chuyển đổi một phần tử Hình 2D thành 3D trong trình chỉnh sửa, nó tạo ra một phần tử mới type: "3D" với các trường bổ sung sau:

Văn Bản 3D

Các phần tử 3D cũng có thể đại diện cho văn bản ba chiều với độ sâu và vát:

Vật Liệu và Kết Cấu

Các phần tử 3D sử dụng hệ thống vật liệu PBR (Rendering Dựa Trên Vật Lý) với hỗ trợ kết cấu toàn diện:

Đối tượng material chứa:

physicalMaterialData - Các thuộc tính vật liệu PBR:

• color (string) - Màu sắc cơ bản ở định dạng hex, mặc định: '#818cf8'
• roughness (number) - Độ nhám bề mặt, 0-1, mặc định: 0.4
• metalness (number) - Thuộc tính kim loại, 0-1, mặc định: 0.0
• opacity (number) - Độ trong suốt của vật liệu, 0-1, mặc định: 1.0
• transmission (number) - Độ truyền ánh sáng cho các vật liệu giống như kính, 0-1, mặc định: 0.0
• ior (number) - Chỉ số khúc xạ, thường là 1.0-2.5, mặc định: 1.5
• clearcoat (number) - Cường độ lớp phủ trong suốt, 0-1, mặc định: 0.0
• clearcoatRoughness (number) - Độ nhám của lớp phủ trong suốt, 0-1, mặc định: 0.0
• sheen (number) - Hiệu ứng bóng giống như vải, 0-1, mặc định: 0.0
• sheenRoughness (number) - Độ nhám bóng, 0-1, mặc định: 0.0
• sheenColor (string) - Màu sắc bóng
• thickness (number) - Độ dày vật liệu cho độ truyền

materialXPath (string) - Đường dẫn tùy chọn cho preset MaterialX:

• Ví dụ: 'StandardSurface/standard_surface_gold.mtlx', 'StandardSurface/standard_surface_brass_tiled.mtlx'
• Khi được tải, ghi đè physicalMaterialData bằng các giá trị preset

Bản Đồ Kết Cấu - Đối tượng vật liệu có thể chứa các URL bản đồ kết cấu:

• colorMap - Kết cấu màu cơ bản/khuyếch tán
• normalMap - Bản đồ bình thường cho chi tiết bề mặt
• roughnessMap - Kết cấu độ nhám
• metalnessMap - Kết cấu kim loại
• aoMap - Bản đồ che bóng môi trường
• emissiveMap - Kết cấu phát sáng

Các bản đồ kết cấu được áp dụng bằng cách sử dụng các hàm TSL (Ngôn Ngữ Đổ Bóng Three.js) để tối ưu hóa hiệu suất.

Mô Hình và Hoạt Hình glTF

Các phần tử 3D với nodeType: "model" hoặc nodeType: "import" đại diện cho các mô hình 3D nhập khẩu:

Lưu ý: nodeType: "import" là một bí danh cho "model". Cả hai đều được hỗ trợ và hoạt động giống nhau.

• Sử dụng source.url để chỉ định URL của tệp glTF/glb/FBX từ xa
• Động cơ sẽ lấy và lưu trữ mô hình bằng sourceId
• Nếu mô hình chứa các hoạt hình, sử dụng animation.currentIndex để chọn hoạt hình nào để phát
• Các thuộc tính hoạt hình: currentIndex (number), speed (number, mặc định 1.0), loop (boolean, mặc định true)
• Các mô hình hỗ trợ nén DRACO để giảm kích thước tệp
• sizeParams chứa width, height, depth cho kích thước mô hình

Ví Dụ

Hình Khối Cơ Bản

 
{
  "id": "3d-cube-001",
  "type": "3D",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": 540,
  "y": 540,
  "z": 0,
  "width": 200,
  "height": 200,
  "anchorX": 100,
  "anchorY": 100,
  "rotation": 0,
  "rotationX": 30,
  "rotationY": 45,
  "scaleX": 1,
  "scaleY": 1,
  "scaleZ": 1,
  "alpha": 1,
  "ext": "geometry",
  "nodeType": "geometry",
  "category": "basic",
  "geometryType": "cube",
  "material": {
    "physicalMaterialData": {
      "color": "#4A90E2",
      "roughness": 0.4,
      "metalness": 0.0
    }
  }
}

Hình Dạng Đùn

 
{
  "id": "3d-extrusion-001",
  "type": "3D",
  "start": 0,
  "duration": 5,
  "trackIndex": 0,
  "x": 540,
  "y": 540,
  "z": 0,
  "width": 300,
  "height": 300,
  "anchorX": 150,
  "anchorY": 150,
  "rotation": 0,
  "rotationX": 0,
  "rotationY": 0,
  "scaleX": 1,
  "scaleY": 1,
  "scaleZ": 1,
  "alpha": 1,
  "ext": "parametric",
  "nodeType": "parametric",
  "category": "extrusion",
  "shapeSizeX": 300,
  "shapeSizeY": 300,
  "shapeExtrusion": 100,
  "material": {
    "physicalMaterialData": {
      "color": "#FF6B6B",
      "roughness": 0.3,
      "metalness": 0.1
    }
  },
  "extrusionSource": {
    "shapeType": "SHAPE_STAR",
    "starPoints": 5,
    "starInnerRadius": 0.4
  }
}

Mô Hình glTF với Hoạt Hình

 
{
  "id": "3d-model-001",
  "type": "3D",
  "start": 0,
  "duration": 10,
  "trackIndex": 0,
  "x": 540,
  "y": 540,
  "z": -200,
  "width": 400,
  "height": 400,
  "anchorX": 200,
  "anchorY": 200,
  "rotation": 0,
  "rotationX": 0,
  "rotationY": 0,
  "scaleX": 1,
  "scaleY": 1,
  "scaleZ": 1,
  "alpha": 1,
  "ext": "glb",
  "nodeType": "model",
  "sourceId": "cached-model-123",
  "source": {
    "url": "https://example.com/models/animated_character.glb"
  },
  "animation": {
    "currentIndex": 0,
    "speed": 1.0,
    "loop": true
  },
  "sizeParams": {
    "width": 2,
    "height": 2,
    "depth": 2
  },
  "originalWidth": 2,
  "originalHeight": 2,
  "originalDepth": 2
}

Ghi Chú

• Các phần tử 3D hoàn toàn tích hợp với quy trình kết xuất 2D hiện có. Bạn có thể kết hợp các phần tử 2D và 3D trong cùng một dự án.
• Camera sử dụng phép chiếu phối cảnh chính xác theo pixel, đảm bảo rằng tại z=0, một đơn vị thế giới tương đương với một pixel.
• Đối với các biến đổi 3D, hệ thống tọa độ tuân theo các quy tắc 3D tiêu chuẩn: X (phải), Y (lên), Z (hướng về người xem).
• Các thuộc tính vật liệu và kết cấu thường được thiết lập bởi trình chỉnh sửa. Nếu bạn tự viết JSON, hãy tham khảo tài liệu preset MaterialX để biết các vật liệu có sẵn.
• Trình chỉnh sửa cũng có thể tạo ra các phần tử Light3D và Particle3D trong các cảnh 3D. Những phần tử này được tạo ra bởi trình chỉnh sửa và không cần phải được xây dựng thủ công.