3D-Element

Ein 3D-Element repräsentiert dreidimensionale Objekte in Ihrem Projekt, einschließlich importierter 3D-Modelle, grundlegender geometrischer Primitiven, extrudierter Formen aus 2D-Formen, 3D-Text und Ergebnissen von booleschen Operationen.

3D-Elemente teilen sich die gemeinsamen Felder von Basis-Element und Ansichts-Element, während sie auch zusätzliche 3D-spezifische Eigenschaften einführen.

Grundlegende Felder

3D-Transformationsfelder

Zusätzlich zu den standardmäßigen 2D-Transformations Eigenschaften (x, y, Rotation, scaleX, scaleY) unterstützen 3D-Elemente zusätzliche Transformations Eigenschaften für dreidimensionale Positionierung und Rotation:

Geometrietypen

Das Feld geometryType gibt den Typ der grundlegenden 3D-Geometrie an. Verfügbare Typen sind nach Kategorie organisiert (angegeben über das Feld category, wenn nodeType "geometry" oder "primitive" ist):

Hinweis: nodeType: "primitive" ist ein Alias für "geometry". Beide werden unterstützt und verhalten sich identisch.

Grundformen (category: "basic"):

• cube - Sechseitiger Würfel
• sphere - Sphärische Geometrie
• cylinder - Zylindrische Geometrie
• cone - Kegelige Geometrie
• torus - Donut-förmige Geometrie
• capsule - Kapsel-förmige Geometrie
• disc - Flacher kreisförmiger Diskus

Polyeder (category: "polyhedron"):

• pyramid - Vierseitige Pyramide
• octahedron - Achtflächiges Polyeder
• icosahedron - Zwanzigflächiges Polyeder
• dodecahedron - Zwölfflächiges Polyeder
• hexPrism - Sechseitiges Prisma
• triangle - Dreieckiges Prisma

Parametrische Knotentypen

Parametrische Knoten (nodeType: "parametric") erzeugen Geometrie prozedural:

Extrusion (category: "extrusion"):

• Extrudiert 2D-Formen entlang der Z-Achse mit Tiefe und Fase

Drehbank (category: "lathe"):

• Dreht ein 2D-Profil um eine Achse, um zylindrische Objekte zu erstellen

Sweep (category: "sweep"):

• Fährt ein 2D-Profil entlang eines 3D-Pfades, um röhren- oder schienenbasierte Formen zu erstellen

Kurvenknotentypen

Kurvenknoten (nodeType: "curve") erstellen 3D-Kurven und -Pfad:

Helix (category: "helix"):

• Helikale Spiralkurven mit konfigurierbarem Radius und Steigung

Torus-Knoten (category: "torusKnot"):

• Mathematische Knotenkurven auf einer Torusoberfläche

Benutzerdefiniert (category: "custom"):

• Benutzerdefinierte Kurvenpfade

Topologie-Knotentypen

Topologieoperationen (boolesch, Array, Spiegelung, Verbindung) werden im Editor durchgeführt und erzeugen standardmäßige Geometrieausgaben. Diese Operationen werden zur Bearbeitungszeit angewendet und erfordern keine spezielle Behandlung in der Render-API.

Formextrusion

3D-Elemente können durch Extrusion von 2D-Formen erstellt werden. Wenn Sie ein 2D-Formelement im Editor in 3D umwandeln, wird ein neues type: "3D"-Element mit den folgenden zusätzlichen Feldern generiert:

3D-Text

3D-Elemente können auch dreidimensionalen Text mit Tiefe und Fase darstellen:

Materialien und Texturen

3D-Elemente verwenden ein PBR (Physically Based Rendering) Materialsystem mit umfassender Texturunterstützung:

Das material-Objekt enthält:

physicalMaterialData - PBR-Materialeigenschaften:

• color (string) - Basisfarbe im Hex-Format, Standard: '#818cf8'
• roughness (number) - Oberflächenrauhigkeit, 0-1, Standard: 0.4
• metalness (number) - Metallische Eigenschaft, 0-1, Standard: 0.0
• opacity (number) - Materialopazität, 0-1, Standard: 1.0
• transmission (number) - Lichtdurchlässigkeit für glasähnliche Materialien, 0-1, Standard: 0.0
• ior (number) - Brechungsindex, typischerweise 1.0-2.5, Standard: 1.5
• clearcoat (number) - Intensität der Klarlackschicht, 0-1, Standard: 0.0
• clearcoatRoughness (number) - Rauheit des Klarlacks, 0-1, Standard: 0.0
• sheen (number) - Stoffähnlicher Glanz-Effekt, 0-1, Standard: 0.0
• sheenRoughness (number) - Glanzrauhigkeit, 0-1, Standard: 0.0
• sheenColor (string) - Glanztönfarbe
• thickness (number) - Materialdicke für Transmission

materialXPath (string) - Optionaler MaterialX-Voreinstellungs-Pfad:

• Beispiele: 'StandardSurface/standard_surface_gold.mtlx', 'StandardSurface/standard_surface_brass_tiled.mtlx'
• Beim Laden überschreibt es physicalMaterialData mit voreingestellten Werten

Texturkarten - Das Materialobjekt kann URLs für Texturkarten enthalten:

• colorMap - Basisfarbe/diffuse Textur
• normalMap - Normalmap für Oberflächendetails
• roughnessMap - Rauheitstextur
• metalnessMap - Metallizitätstextur
• aoMap - Ambient Occlusion Map
• emissiveMap - Emissive/glühende Textur

Texturkarten werden mit TSL (Three.js Shading Language) Funktionen für optimale Leistung angewendet.

glTF-Modelle und Animationen

3D-Elemente mit nodeType: "model" oder nodeType: "import" repräsentieren importierte 3D-Modelle:

Hinweis: nodeType: "import" ist ein Alias für "model". Beide werden unterstützt und verhalten sich identisch.

• Verwenden Sie source.url, um die URL der externen glTF/glb/FBX-Datei anzugeben
• Die Engine wird das Modell abrufen und mit sourceId zwischenspeichern
• Wenn das Modell Animationen enthält, verwenden Sie animation.currentIndex, um auszuwählen, welche Animation abgespielt werden soll
• Animations Eigenschaften: currentIndex (number), speed (number, Standard 1.0), loop (boolean, Standard true)
• Modelle unterstützen DRACO-Kompression für kleinere Dateigrößen
• sizeParams enthält width, height, depth für die Modellabmessungen

Beispiele

Grundwürfel

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

Extrudierte Form

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

Hinweise

• 3D-Elemente integrieren sich vollständig in die bestehende 2D-Rendering-Pipeline. Sie können 2D- und 3D-Elemente im selben Projekt mischen.
• Die Kamera verwendet eine pixelgenaue perspektivische Projektion, die sicherstellt, dass bei z=0 eine Welt-Einheit einem Pixel entspricht.
• Für 3D-Transformationen folgt das Koordinatensystem den standardmäßigen 3D-Konventionen: X (rechts), Y (oben), Z (zum Betrachter).
• Material- und Textureigenschaften werden typischerweise vom Editor festgelegt. Wenn Sie JSON manuell schreiben, beziehen Sie sich auf die MaterialX-Voreinstellungsdokumentation für verfügbare Materialien.
• Der Editor kann auch Light3D- und Particle3D-Elemente innerhalb von 3D-Szenen generieren. Diese werden vom Editor generiert und müssen nicht manuell erstellt werden.