3D Element

องค์ประกอบ 3D แสดงถึงวัตถุสามมิติในโปรเจกต์ของคุณ รวมถึงโมเดล 3D ที่นำเข้า รูปทรงเรขาคณิตพื้นฐาน รูปร่างที่ถูกขยายจากรูปทรง 2D ข้อความ 3D และผลลัพธ์จากการดำเนินการทางพีชคณิต

องค์ประกอบ 3D มีฟิลด์ทั่วไปจาก Basic Element และ View Element ในขณะที่ยังแนะนำคุณสมบัติที่เฉพาะเจาะจงสำหรับ 3D เพิ่มเติม

Basic Fields

3D Transform Fields

นอกเหนือจากคุณสมบัติการแปลง 2D มาตรฐาน (x, y, rotation, scaleX, scaleY) องค์ประกอบ 3D รองรับคุณสมบัติการแปลงเพิ่มเติมสำหรับการจัดตำแหน่งและการหมุนสามมิติ:

Geometry Types

ฟิลด์ geometryType ระบุประเภทของเรขาคณิต 3D พื้นฐาน ประเภทที่มีให้จะถูกจัดระเบียบตามหมวดหมู่ (ระบุผ่านฟิลด์ category เมื่อ nodeType เป็น "geometry" หรือ "primitive"):

หมายเหตุ: nodeType: "primitive" เป็นนามแฝงสำหรับ "geometry" ทั้งสองได้รับการสนับสนุนและทำงานเหมือนกัน

Basic Shapes (category: "basic"):

• cube - กล่องหกด้าน
• sphere - เรขาคณิตทรงกลม
• cylinder - เรขาคณิตทรงกระบอก
• cone - เรขาคณิตทรงกรวย
• torus - เรขาคณิตทรงโดนัท
• capsule - เรขาคณิตทรงแคปซูล
• disc - แผ่นกลมแบน

Polyhedrons (category: "polyhedron"):

• pyramid - ปิรามิดสี่ด้าน
• octahedron - โพลีเฮดรอนแปดหน้า
• icosahedron - โพลีเฮดรอนยี่สิบหน้า
• dodecahedron - โพลีเฮดรอนสิบสองหน้า
• hexPrism - ปริซึมหกด้าน
• triangle - ปริซึมสามเหลี่ยม

Parametric Node Types

โหนดพารามิเตอร์ (nodeType: "parametric") สร้างเรขาคณิตโดยกระบวนการ:

Extrusion (category: "extrusion"):

• ขยายรูปทรง 2D ตามแกน Z ด้วยความลึกและการทำขอบ

Lathe (category: "lathe"):

• หมุนโปรไฟล์ 2D รอบแกนเพื่อสร้างวัตถุทรงกระบอก

Sweep (category: "sweep"):

• กวาดโปรไฟล์ 2D ตามเส้นทาง 3D เพื่อสร้างรูปทรงท่อหรือรูปทรงที่ใช้ราง

Curve Node Types

โหนดโค้ง (nodeType: "curve") สร้างโค้งและเส้นทาง 3D:

Helix (category: "helix"):

• โค้งเกลียวที่มีรัศมีและความสูงที่ปรับได้

Torus Knot (category: "torusKnot"):

• โค้งที่เป็นปมทางคณิตศาสตร์บนพื้นผิวของทอรัส

Custom (category: "custom"):

• เส้นทางโค้งที่ผู้ใช้กำหนด

Topology Node Types

การดำเนินการทางทอพอโลยี (boolean, array, mirror, compound) จะดำเนินการภายในโปรแกรมแก้ไขและผลิตผลลัพธ์เรขาคณิตมาตรฐาน การดำเนินการเหล่านี้จะถูกนำไปใช้ในเวลาที่แก้ไขและไม่ต้องการการจัดการพิเศษใน API การเรนเดอร์

Shape Extrusion

องค์ประกอบ 3D สามารถสร้างได้โดยการขยายรูปทรง 2D เมื่อคุณแปลงองค์ประกอบรูปทรง 2D เป็น 3D ในโปรแกรมแก้ไข มันจะสร้างองค์ประกอบใหม่ type: "3D" พร้อมฟิลด์เพิ่มเติมดังต่อไปนี้:

3D Text

องค์ประกอบ 3D ยังสามารถแสดงข้อความสามมิติที่มีความลึกและการทำขอบ:

Materials and Textures

องค์ประกอบ 3D ใช้ระบบวัสดุ PBR (Physically Based Rendering) ที่มีการสนับสนุนพื้นผิวอย่างครบถ้วน:

วัตถุ material ประกอบด้วย:

physicalMaterialData - คุณสมบัติของวัสดุ PBR:

• color (string) - สีพื้นฐานในรูปแบบฮีซ, ค่าเริ่มต้น: '#818cf8'
• roughness (number) - ความหยาบของพื้นผิว, 0-1, ค่าเริ่มต้น: 0.4
• metalness (number) - คุณสมบัติของโลหะ, 0-1, ค่าเริ่มต้น: 0.0
• opacity (number) - ความโปร่งใสของวัสดุ, 0-1, ค่าเริ่มต้น: 1.0
• transmission (number) - การส่งผ่านแสงสำหรับวัสดุที่เหมือนแก้ว, 0-1, ค่าเริ่มต้น: 0.0
• ior (number) - ดัชนีการหักเห, โดยทั่วไป 1.0-2.5, ค่าเริ่มต้น: 1.5
• clearcoat (number) - ความเข้มของชั้นเคลือบใส, 0-1, ค่าเริ่มต้น: 0.0
• clearcoatRoughness (number) - ความหยาบของเคลือบใส, 0-1, ค่าเริ่มต้น: 0.0
• sheen (number) - เอฟเฟกต์เงาเหมือนผ้า, 0-1, ค่าเริ่มต้น: 0.0
• sheenRoughness (number) - ความหยาบของเงา, 0-1, ค่าเริ่มต้น: 0.0
• sheenColor (string) - สีเงา
• thickness (number) - ความหนาของวัสดุสำหรับการส่งผ่าน

materialXPath (string) - เส้นทางการตั้งค่า MaterialX ที่เลือกได้:

• ตัวอย่าง: 'StandardSurface/standard_surface_gold.mtlx', 'StandardSurface/standard_surface_brass_tiled.mtlx'
• เมื่อโหลด จะทำการแทนที่ physicalMaterialData ด้วยค่าที่ตั้งไว้

Texture Maps - วัตถุวัสดุสามารถประกอบด้วย URL แผนที่พื้นผิว:

• colorMap - แผนที่สีพื้นฐาน/แผนที่กระจาย
• normalMap - แผนที่ปกติสำหรับรายละเอียดพื้นผิว
• roughnessMap - แผนที่ความหยาบ
• metalnessMap - แผนที่โลหะ
• aoMap - แผนที่การปิดกั้นแสง
• emissiveMap - แผนที่เรืองแสง/แสง

แผนที่พื้นผิวจะถูกนำไปใช้โดยใช้ฟังก์ชัน TSL (Three.js Shading Language) เพื่อประสิทธิภาพที่ดีที่สุด

glTF Models and Animations

องค์ประกอบ 3D ที่มี nodeType: "model" หรือ nodeType: "import" แสดงถึงโมเดล 3D ที่นำเข้า:

หมายเหตุ: nodeType: "import" เป็นนามแฝงสำหรับ "model" ทั้งสองได้รับการสนับสนุนและทำงานเหมือนกัน

• ใช้ source.url เพื่อระบุ URL ของไฟล์ glTF/glb/FBX ระยะไกล
• เอนจินจะดึงและแคชโมเดลโดยใช้ sourceId
• หากโมเดลมีการเคลื่อนไหว ให้ใช้ animation.currentIndex เพื่อเลือกการเคลื่อนไหวที่จะเล่น
• คุณสมบัติการเคลื่อนไหว: currentIndex (number), speed (number, ค่าเริ่มต้น 1.0), loop (boolean, ค่าเริ่มต้น true)
• โมเดลสนับสนุนการบีบอัด DRACO เพื่อลดขนาดไฟล์
• sizeParams ประกอบด้วย width, height, depth สำหรับขนาดของโมเดล

Examples

Basic Cube

 
{
  "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
    }
  }
}

Extruded Shape

 
{
  "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
  }
}

glTF Model with Animation

 
{
  "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
}

Notes

• องค์ประกอบ 3D รวมเข้ากับท่อการเรนเดอร์ 2D ที่มีอยู่ได้อย่างสมบูรณ์ คุณสามารถผสมผสานองค์ประกอบ 2D และ 3D ในโปรเจกต์เดียวกัน
• กล้องใช้การฉายภาพที่สมบูรณ์แบบตามพิกเซล ทำให้แน่ใจว่าเมื่อ z=0 หนึ่งหน่วยโลกเท่ากับหนึ่งพิกเซล
• สำหรับการแปลง 3D ระบบพิกัดจะปฏิบัติตามแนวทางมาตรฐาน 3D: X (ขวา), Y (ขึ้น), Z (ไปยังผู้ชม)
• คุณสมบัติของวัสดุและพื้นผิวมักจะถูกตั้งค่าโดยโปรแกรมแก้ไข หากคุณกำลังเขียน JSON ด้วยมือ ให้ดูเอกสารการตั้งค่า MaterialX สำหรับวัสดุที่มีให้
• โปรแกรมแก้ไขอาจสร้างองค์ประกอบ Light3D และ Particle3D ภายในฉาก 3D ซึ่งเป็นองค์ประกอบที่สร้างโดยโปรแกรมแก้ไขและไม่จำเป็นต้องสร้างด้วยตนเอง