Élément 3D

Un élément 3D représente des objets tridimensionnels dans votre projet, y compris des modèles 3D importés, des primitives géométriques de base, des formes extrudées à partir de formes 2D, du texte 3D et des résultats d'opérations booléennes.

Les éléments 3D partagent les champs communs de Élément de base et Élément de vue, tout en introduisant des propriétés supplémentaires spécifiques aux 3D.

Champs de base

Champs de transformation 3D

En plus des propriétés de transformation 2D standard (x, y, rotation, scaleX, scaleY), les éléments 3D prennent en charge des propriétés de transformation supplémentaires pour le positionnement et la rotation tridimensionnels :

Types de géométrie

Le champ geometryType spécifie le type de géométrie 3D de base. Les types disponibles sont organisés par catégorie (spécifiée via le champ category lorsque nodeType est "geometry" ou "primitive"):

Remarque : nodeType: "primitive" est un alias pour "geometry". Les deux sont pris en charge et se comportent de manière identique.

Formes de base (category: "basic"):

• cube - Boîte à six côtés
• sphere - Géométrie sphérique
• cylinder - Géométrie cylindrique
• cone - Géométrie conique
• torus - Géométrie en forme de donut
• capsule - Géométrie en forme de pilule
• disc - Disque circulaire plat

Polyèdres (category: "polyhedron"):

• pyramid - Pyramide à quatre côtés
• octahedron - Polyèdre à huit faces
• icosahedron - Polyèdre à vingt faces
• dodecahedron - Polyèdre à douze faces
• hexPrism - Prisme à six côtés
• triangle - Prisme triangulaire

Types de nœuds paramétriques

Les nœuds paramétriques (nodeType: "parametric") génèrent de la géométrie de manière procédurale :

Extrusion (category: "extrusion"):

• Extrude des formes 2D le long de l'axe Z avec profondeur et biseautage

Tournage (category: "lathe"):

• Fait tourner un profil 2D autour d'un axe pour créer des objets cylindriques

Balayage (category: "sweep"):

• Balaye un profil 2D le long d'un chemin 3D pour créer des formes tubulaires ou basées sur des rails

Types de nœuds de courbe

Les nœuds de courbe (nodeType: "curve") créent des courbes et des chemins 3D :

Hélice (category: "helix"):

• Courbes hélicoïdales avec rayon et pas configurables

Nœud de torus (category: "torusKnot"):

• Courbes de nœud mathématique sur une surface de torus

Personnalisé (category: "custom"):

• Chemins de courbe définis par l'utilisateur

Types de nœuds de topologie

Les opérations de topologie (booléenne, tableau, miroir, composé) sont effectuées dans l'éditeur et produisent une sortie de géométrie standard. Ces opérations sont appliquées au moment de l'édition et ne nécessitent pas de traitement spécial dans l'API de rendu.

Extrusion de forme

Les éléments 3D peuvent être créés en extrudant des formes 2D. Lorsque vous convertissez un élément de forme 2D en 3D dans l'éditeur, cela génère un nouvel élément type: "3D" avec les champs supplémentaires suivants :

Texte 3D

Les éléments 3D peuvent également représenter du texte tridimensionnel avec profondeur et biseautage :

Matériaux et textures

Les éléments 3D utilisent un système de matériau PBR (Physically Based Rendering) avec un support complet des textures :

L'objet material contient :

physicalMaterialData - Propriétés du matériau PBR :

• color (string) - Couleur de base au format hexadécimal, par défaut : '#818cf8'
• roughness (number) - Rugosité de la surface, 0-1, par défaut : 0.4
• metalness (number) - Propriété métallique, 0-1, par défaut : 0.0
• opacity (number) - Opacité du matériau, 0-1, par défaut : 1.0
• transmission (number) - Transmission de la lumière pour les matériaux en verre, 0-1, par défaut : 0.0
• ior (number) - Indice de réfraction, généralement 1.0-2.5, par défaut : 1.5
• clearcoat (number) - Intensité de la couche de vernis, 0-1, par défaut : 0.0
• clearcoatRoughness (number) - Rugosité du vernis, 0-1, par défaut : 0.0
• sheen (number) - Effet de brillance semblable à un tissu, 0-1, par défaut : 0.0
• sheenRoughness (number) - Rugosité de la brillance, 0-1, par défaut : 0.0
• sheenColor (string) - Couleur de teinte de la brillance
• thickness (number) - Épaisseur du matériau pour la transmission

materialXPath (string) - Chemin de préréglage MaterialX optionnel :

• Exemples : 'StandardSurface/standard_surface_gold.mtlx', 'StandardSurface/standard_surface_brass_tiled.mtlx'
• Lorsqu'il est chargé, remplace physicalMaterialData par des valeurs de préréglage

Cartes de texture - L'objet matériau peut contenir des URL de cartes de texture :

• colorMap - Texture de couleur de base/diffuse
• normalMap - Carte normale pour les détails de surface
• roughnessMap - Texture de rugosité
• metalnessMap - Texture de métal
• aoMap - Carte d'occlusion ambiante
• emissiveMap - Texture émissive/lumineuse

Les cartes de texture sont appliquées à l'aide de fonctions TSL (Three.js Shading Language) pour des performances optimales.

Modèles et animations glTF

Les éléments 3D avec nodeType: "model" ou nodeType: "import" représentent des modèles 3D importés :

Remarque : nodeType: "import" est un alias pour "model". Les deux sont pris en charge et se comportent de manière identique.

• Utilisez source.url pour spécifier l'URL du fichier glTF/glb/FBX distant
• Le moteur récupérera et mettra en cache le modèle en utilisant sourceId
• Si le modèle contient des animations, utilisez animation.currentIndex pour sélectionner quelle animation jouer
• Propriétés d'animation : currentIndex (number), speed (number, par défaut 1.0), loop (boolean, par défaut true)
• Les modèles prennent en charge la compression DRACO pour des tailles de fichiers plus petites
• sizeParams contient width, height, depth pour les dimensions du modèle

Exemples

Cube de base

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

Forme extrudée

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

Modèle glTF avec 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
}

Remarques

• Les éléments 3D s'intègrent pleinement dans le pipeline de rendu 2D existant. Vous pouvez mélanger des éléments 2D et 3D dans le même projet.
• La caméra utilise une projection perspective pixel-perfect, garantissant qu'à z=0, une unité du monde équivaut à un pixel.
• Pour les transformations 3D, le système de coordonnées suit les conventions 3D standard : X (droite), Y (haut), Z (vers le spectateur).
• Les propriétés de matériau et de texture sont généralement définies par l'éditeur. Si vous écrivez manuellement du JSON, référez-vous à la documentation des préréglages MaterialX pour les matériaux disponibles.
• L'éditeur peut également générer des éléments Light3D et Particle3D dans des scènes 3D. Ceux-ci sont générés par l'éditeur et n'ont pas besoin d'être construits manuellement.