3D Element

Een 3D-element vertegenwoordigt driedimensionale objecten in uw project, inclusief geïmporteerde 3D-modellen, basis geometrie-primitieven, geëxtrudeerde vormen van 2D-vormen, 3D-tekst en resultaten van booleaanse bewerkingen.

3D-elementen delen de gemeenschappelijke velden van Basis Element en Bekijk Element, terwijl ze ook extra 3D-specifieke eigenschappen introduceren.

Basis Velden

3D Transform Velden

Naast de standaard 2D-transformatie-eigenschappen (x, y, rotatie, schaalX, schaalY), ondersteunen 3D-elementen extra transformatie-eigenschappen voor driedimensionale positionering en rotatie:

Geometrie Types

Het geometryType-veld specificeert het type basis 3D-geometrie. Beschikbare types zijn georganiseerd per categorie (gespecificeerd via het category-veld wanneer nodeType is "geometry" of "primitive"):

Opmerking: nodeType: "primitive" is een alias voor "geometry". Beide worden ondersteund en gedragen zich identiek.

Basis Vormen (category: "basic"):

• cube - Zeszijdige doos
• sphere - Sferische geometrie
• cylinder - Cilindrische geometrie
• cone - Conische geometrie
• torus - Donut-vormige geometrie
• capsule - Capsule-vormige geometrie
• disc - Vlakke cirkelvormige schijf

Polyhedra (category: "polyhedron"):

• pyramid - Vierzijdige piramide
• octahedron - Achtzijdige polyhedron
• icosahedron - Twintigzijdige polyhedron
• dodecahedron - Twaalfzijdige polyhedron
• hexPrism - Zeszijdige prisma
• triangle - Driehoekige prisma

Parametrische Node Types

Parametrische knooppunten (nodeType: "parametric") genereren geometrie procedureel:

Extrusie (category: "extrusion"):

• Extraheert 2D-vormen langs de Z-as met diepte en afschuining

Draaibank (category: "lathe"):

• Draait een 2D-profiel rond een as om cilindrische objecten te creëren

Sweep (category: "sweep"):

• Veegt een 2D-profiel langs een 3D-pad om buisvormige of rail-gebaseerde vormen te creëren

Curven Node Types

Curve knooppunten (nodeType: "curve") creëren 3D-curven en paden:

Helix (category: "helix"):

• Helicale spiraalcurven met configureerbare straal en spoed

Torus Knoop (category: "torusKnot"):

• Wiskundige knoopcurven op een torusoppervlak

Aangepast (category: "custom"):

• Door de gebruiker gedefinieerde curvepaden

Topologie Node Types

Topologie-operaties (boolean, array, mirror, compound) worden binnen de editor uitgevoerd en produceren standaard geometrie-output. Deze operaties worden toegepast tijdens de bewerkingstijd en vereisen geen speciale behandeling in de render-API.

Vorm Extrusie

3D-elementen kunnen worden gemaakt door 2D-vormen te extruderen. Wanneer u een 2D-vormelement in de editor naar 3D converteert, genereert het een nieuw type: "3D"-element met de volgende extra velden:

3D Tekst

3D-elementen kunnen ook driedimensionale tekst met diepte en afschuining vertegenwoordigen:

Materialen en Texturen

3D-elementen gebruiken een PBR (Physically Based Rendering) materiaal systeem met uitgebreide ondersteuning voor texturen:

Het material-object bevat:

physicalMaterialData - PBR materiaaleigenschappen:

• color (string) - Basis kleur in hex-formaat, standaard: '#818cf8'
• roughness (number) - Oppervlakte-ruwheid, 0-1, standaard: 0.4
• metalness (number) - Metaal eigenschap, 0-1, standaard: 0.0
• opacity (number) - Materiaal-opaciteit, 0-1, standaard: 1.0
• transmission (number) - Lichttransmissie voor glasachtige materialen, 0-1, standaard: 0.0
• ior (number) - Brekingsindex, typisch 1.0-2.5, standaard: 1.5
• clearcoat (number) - Duidelijke coatinglaag intensiteit, 0-1, standaard: 0.0
• clearcoatRoughness (number) - Ruwheid van de heldere coating, 0-1, standaard: 0.0
• sheen (number) - Stofachtige glans effect, 0-1, standaard: 0.0
• sheenRoughness (number) - Glans-ruwheid, 0-1, standaard: 0.0
• sheenColor (string) - Glans tint kleur
• thickness (number) - Materiaal dikte voor transmissie

materialXPath (string) - Optioneel MaterialX preset pad:

• Voorbeelden: 'StandardSurface/standard_surface_gold.mtlx', 'StandardSurface/standard_surface_brass_tiled.mtlx'
• Wanneer geladen, overschrijft het physicalMaterialData met presetwaarden

Textuurkaarten - Het materiaalobject kan URL's voor textuurkaarten bevatten:

• colorMap - Basis kleur/diffuse textuur
• normalMap - Normaal kaart voor oppervlakte detail
• roughnessMap - Ruwheid textuur
• metalnessMap - Metaalheid textuur
• aoMap - Ambient occlusion kaart
• emissiveMap - Emissieve/glow textuur

Textuurkaarten worden toegepast met behulp van TSL (Three.js Shading Language) functies voor optimale prestaties.

glTF Modellen en Animaties

3D-elementen met nodeType: "model" of nodeType: "import" vertegenwoordigen geïmporteerde 3D-modellen:

Opmerking: nodeType: "import" is een alias voor "model". Beide worden ondersteund en gedragen zich identiek.

• Gebruik source.url om de URL van het externe glTF/glb/FBX-bestand op te geven
• De engine zal het model ophalen en cachen met sourceId
• Als het model animaties bevat, gebruik dan animation.currentIndex om te selecteren welke animatie moet worden afgespeeld
• Animatie-eigenschappen: currentIndex (number), speed (number, standaard 1.0), loop (boolean, standaard true)
• Modellen ondersteunen DRACO-compressie voor kleinere bestandsgroottes
• sizeParams bevat width, height, depth voor modelafmetingen

Voorbeelden

Basis Kubus

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

Geëxtrudeerde Vorm

 
{
  "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 met Animatie

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

Opmerkingen

• 3D-elementen integreren volledig met de bestaande 2D-rendering pipeline. U kunt 2D- en 3D-elementen in hetzelfde project combineren.
• De camera gebruikt pixel-perfecte perspectiefprojectie, wat ervoor zorgt dat bij z=0, één wereld eenheid gelijk is aan één pixel.
• Voor 3D-transformaties volgt het coördinatensysteem de standaard 3D-conventies: X (rechts), Y (omhoog), Z (naar de kijker).
• Materiaal- en textuureigenschappen worden doorgaans ingesteld door de editor. Als u JSON met de hand schrijft, raadpleeg dan de MaterialX-presetdocumentatie voor beschikbare materialen.
• De editor kan ook Light3D- en Particle3D-elementen genereren binnen 3D-scènes. Deze zijn door de editor gegenereerd en hoeven niet handmatig te worden geconstrueerd.