Les ensembles 3D sont des éléments de code qui peuvent être insérés dans la scène à la place d'objets 3D. Ils sont utilisés lorsque l'on souhaite obtenir des éléments composites complexes qui forment une unité et qui doivent réagir comme un modèle unique. Les ensembles 3D peuvent contenir des éléments d'interaction, des animations et des clips audio. En outre, les ensembles 3D peuvent également interagir avec d'autres éléments dans une scène.

Exemple :

• Une plante sur un socle : le socle doit pouvoir être modifié en hauteur. Dans ce cas, il est possible de définir dans le set 3D que le socle peut être modifié en hauteur. La plante se trouve toujours sur le socle et seule une hauteur doit donc être adaptée.
• Un escalier : le nombre de marches et la hauteur des marches peuvent être configurés ici.
• Un auvent : celui-ci peut être composé de plus de dizaines d'éléments dont la position peut dépendre des dimensions de l'auvent.
• Une animation avec des sons : Une animation est présentée dans laquelle une visseuse sans fil serre une vis. Un son est émis.

Les ensembles 3D sont créés avec AFRAME (https://aframe.io) dans le composant neo-code. En plus de toutes les possibilités offertes par AFRAME, de nombreux autres composants fournis par vrdoro peuvent être utilisés.

L'UI avec laquelle les éléments peuvent être adaptés peut être configurée par un attribut EditorConfig ou EditorConfigGlobal à chaque balise a-entity.

La syntaxe de l'EditorConfig est très vaste et est expliquée à l'aide d'exemples.

1. <String> nom: nom du composant néo-code
2. <Boolean> enabled: Active/désactive le composant
3. <String> code: sélecteur sur le bloc de code à exécuter (optionnel)
4. <Array> params: noms des paramètres p0-p14 dans l'ordre séquentiel
5. <String> p0…: valeur du paramètre correspondant
6. <Number> codeRunDelay: délai d'exécution du bloc de code
7. <Boolean> updateShadowMap: Active/désactive une mise à jour de la shadowMap après l'exécution du bloc de code

Le type de paramètre par défaut est Chaîne. L'analyse syntaxique automatique a lieu dans les cas suivants :

1. Valeur : 'true' ou 'false' → Booléen
2. Valeur : '123.45' (valeur numérique unique) → '123.45' → '123.45' → '123.45' → '123.45'. Number
3. Valeur : '0 1' (deux valeurs numériques séparées par un espace) → Number. Vector2
4. Valeur : '0 1 2' (trois valeurs numériques séparées par des espaces) → Vector Vector3
5. Valeur : 'val1, val2, val3' (valeurs séparées par des virgules) ou le nom du paramètre se termine par '[]'. → Tableau

La syntaxe suivante s'applique :

1. La syntaxe générale est la suivante : editorConfig[Global]=`AttributeControl|[AttributeControl]*`
2. Un AttributeControl se présente sous la forme suivante : Attributs=Domaine de valeurs ou ComponentName=Property:Domaine de valeurs
3. Plage de valeurs : de~à ou bool ou color ou select

Les contrôles définis par editorConfigGlobal sont affichés dans la section supérieure 'Paramètres de la scène' de l'interface utilisateur du Room Viewer. Les valeurs editorConfig sont affichées pour chaque élément de la pièce sous Éléments de la pièce.

Les valeurs pour les propriétés telles que Position ou Color sont des valeurs pour les attributs d'entité correspondants. Les attributs peuvent également être des composants qui possèdent à leur tour des attributs. Ceux-ci sont alors appelés (voir les documents AFRAME) Properties. Par exemple, le composant material (défini comme attribut d'une a-entity) a les propriétés src et color.

Grâce aux indications editorConfig, les valeurs configurables et les domaines de valeurs sont en général traités de la même manière pour les attributs et les propriétés. Ainsi, par exemple, une sélection de couleurs sur un a-plane avec color=color ou à la material-avec material=color:color peut être sélectionnée.

Dans la suite du texte, on parle généralement d'attributs, mais en règle générale, les déclarations s'appliquent également aux propriétés de composants.

Il existe différents types de valeurs d'attributs :

1. Valeurs numériques
2. Valeurs booléennes
3. Valeurs de couleur
4. Valeurs fixes dans une liste de sélection

Les valeurs numériques sont configurées à l'aide d'un curseur. La syntaxe est la suivante :

• Nom de l'attribut=minValeur~maxValeur(pasLargeur)La valeur min et la valeur max peuvent également être des vecteurs, donc par ex.
• Nom d'attribut=minValeur_x minValeur_y minValeur_z~minValeur_x minValeur_y minValeur_z

minValeur et maxValeur peuvent aussi être représentées par - peuvent être remplacées, ce qui signifie illimité.

Si minValue et maxValue sont égales (pour les vecteurs, la paire respective), alors aucune sélection n'est possible et la valeur est fixe.

Si la valeur max (impossible pour les vecteurs) est suivie d'une valeur numérique entre parenthèses, cela indique l'incrément. Ainsi, par exemple, signifie count=1~10(1)que seuls les nombres entiers compris entre 1 et 10 sont possibles.

Les valeurs de vérité (True ou False) peuvent être définies par la spécification de bool comme valeur.

Exemple :

• editorConfig=`visible=bool`.

Une case à cocher s'affiche alors dans l'IU.

Les valeurs de couleur peuvent être modifiées en indiquant color comme valeur.

Exemple : la couleur :

• editorConfig=`backgroundcolor=color`.

Un élément de sélection de couleur est alors affiché dans l'UI.

Une liste de sélection peut être créée en indiquant les valeurs entre crochets, séparées par une virgule.

Exemple :

• animation=dur :[20000,10000,5000]
• Avec valeur d'affichage (voir ci-dessous) : animation=dur:[20000~slow,10000~normal*,5000~fast]

Un élément de sélection de couleur est alors affiché dans l'UI.

Les labels pour les éléments UI peuvent être ajoutés après la propriété, séparés par un tilde ('~'). Les labels sont alors indiqués en anglais. Si le dictionnaire contient une traduction pour le label, le mot est alors traduit dans la langue correspondante. Pour les mots séparés par un trait de soulignement ('_'), les différents mots sont traduits séparément et le trait de soulignement est remplacé par un espace.

Exemple : functionName~Info:bouton~show

• functionName : nom de la fonction à appeler
• Info : texte devant le bouton
• button : Type de la définition (peut aussi être un bool ou une plage de valeurs (voir ci-dessous).
• show : texte de l'étiquette sur le bouton

Les noms des labels, s'ils ne sont pas explicitement indiqués, résultent des noms d'attributs indiqués dans l'editorConfig.

La formation des clés suit les règles suivantes (dans les exemples, la clé est indiquée en gras après le ':') :

• Une clé de traduction est le nom de l'attribut à contrôler : editorConfig='colour=colour'
• Une clé peut être spécifiée après '~' après la propriété : editorConfig='colour~primaryColour=colour'
• Les clés des propriétés des composants sont formées de cette manière : light=intensity:0~2 → clé = light-intensity

Si la plage de valeurs est un vecteur (par exemple pour position ou material.repeat), la clé est suivie d'un '-' suivi de x (y,…) est ajouté à la clé afin de pouvoir adresser et contrôler les valeurs individuellement.

Le room viewer vérifie pour chaque étiquette (getTranslationForKey(key)) s'il peut en trouver une traduction. Il existe deux catégories de traductions :

1. contrôleur : Traductions pour les étiquettes de contrôle standard
2. environnement : Traductions pour les étiquettes des éléments de la pièce

Le contrôle est effectué dans l'ordre spécifié. Cela signifie que la traduction des étiquettes de contrôle standard ne peut pas être écrasée par les traductions des éléments.

Note : Les clés de traduction (comme pour ember-intl) doivent être utilisées en respectant la casse.

Les caractères précédés d'un trait de soulignement “_” sont supprimés lors de la recherche d'une traduction. Le trait de soulignement est remplacé par un espace. Cela permet de ne traduire que la première chaîne de caractères.

Exemples (chaîne de caractères) :

• Canopy_1 → Canopy 1 (la numérotation ne fait pas partie du texte à traduire)
• Bed_Whiteline → Bed Whiteline (Whiteline est un nom de produit qui n'est pas traduit)

La clé est d'abord vérifiée dans son intégralité (sans la partie située après “_”), puis raccourcie à partir de la fin jusqu'à “-” pour former une nouvelle clé à vérifier.

Exemple :

• sun-position-x Si une traduction est trouvée, elle est utilisée. Sinon, c'est sun-position qui est utilisé.
• sun-position Si une traduction est trouvée, elle sera utilisée. Elle est complétée par le suffixe manquant (x) pour lequel une traduction est également recherchée.
• Et ainsi de suite jusqu'à ce que la clé ne puisse plus être raccourcie.

Note : Il n'est actuellement pas possible d'ajouter des traductions dans le Visualiseur. Toutefois, les clés existantes peuvent être utilisées.

• wallFlip
  • fonction spéciale permettant de faire pivoter l'objet dans le sens inverse des aiguilles d'une montre afin qu'il s'adapte à l'autre mur.
  • Par conséquent, tous les objets doivent d'abord s'adapter au mur de droite.
• scale

⇒ échelle dans la plage par défaut de '0 0 0~2 2 2'

• scale=0.5 0.5 0.5~2 2 2
  • Ajuste l'échelle de 0 à 2 pour x, y et z.
  • La plage '0.5 0.5 0.5~2 2 2' peut également être écrite comme '0.5~2'.
• scale=0~2
  • Ajuste les valeurs de 0 à 2 pour x, y et z.
• scale|position=0 2
  • Ajuste les valeurs d'échelle (avec les valeurs par défaut) et de position de 0, 0, 0 à 0, 2, 2.
• colour=colour;
  • Ajuste la couleur de l'entité avec un sélecteur de couleur.
• position=0~2|lumière=intensité:0~2;couleur:coloriage
  • Ajuste la position, l'intensité de la lumière et la couleur de la lumière.

Exemple pour contrôler plusieurs valeurs simultanément (commenté dans le code avec 'alias list') :

• editorConfig=“scale[scale.x,scale.y,scale.z]~size=1~20”.

Exemples de changement de matériaux avec le composant modeleffects :

• modeleffects=“materials : Material001~facade={'couleur':'#FFF'},Material002~frame={'couleur':'#FFF'},Material006~glass={'opacité':0.5}”“.
• modeleffects=“materials : Material.015={'emissiveIntensity':0.6|'emissive':'#FF8'}”.