dokuwiki

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Documentation modélisateur Three JS ======

Comment, quels fichier et quelle magie le configurateur utilise-t-il pour générer des canapés aussi beau ?

La colonnes vertébrale du modélisateur est le ficher configurateurLibrary/src/js/View.js, ce fichier appelle l'un après l'autre d'autre fichier ayant chacun sa foncitonnalité.

Le tout se passe en deux grande partie :

1 - Contruction de l'instance de vue, qui va initialiser pas mal de variable et faire quelques test

2 - la fonction **loadConfig(c)** qui va charger la config c dans la vue, ce chargement se fera en plusieurs étapes voici comment out se passe dans l'ordre :

==== 1 - checkConfig(c) ====

Fait dans **View.js **directement, Méthode qui va vérifier quelques élément de la configuration passée en paramètre.

==== 2 - parseConfig() ====

Via le fichier **ViewParse.js**, cela va modifier la config en ajoutant des infos calculés (par exemple la taille des assises et de la base, pour deux assises de 800 la base sera de 1600) mais qui va aussi :

   * Récupérer les infos du catalogue (catalog-dev.js)
  * Récupérer le nombre de dossier (structure et coussins) nécessaire
  * Calculer le nombre et la place des accoudoirs (si le module est en fin de chaine il ne peut avoir qu'un accourdoit à droite par exemple)
  * Calculer et placer les pieds qu'il faut

==== 3 - initScene() ====

Fait dans **View.js **directement, méthode qui va vider la scene three js et recréer les axes, les lumières, la caméra,...

==== 4 - loadMaterials() ====

Fait dans **View.js **directement, méthode qui va charger tout les revetements avec leur image, leur bumpmap, etc et les enregistrer dans le tableau **this.config.materials[materialName]**

==== 5 - loadModules() ====

Fait dans **View.js **directement, methode qui va charger tout les modèles 3D des éléments des modules ainsi que leur revetement et va les enregistrer et ajouter dans un groupe Three js

==== 6 - dispatchModules() ====

Via le fichier **ViewDispatchModule.js, **Grosse partie qui va placertout les modules entre eux en prenant en copte la taille de chaque élément ainsi que les offset indiqués dans le catalog-dev.js.

Ce fichier marche comme ceci :

  - Pour chaque module :
      - Pour chaque élément du module
        - On récupère certaines infos qu'on stocke, comme la taille des éléments et leur nom
      - On place la base du module
      - On place les assises en foncion de si le module est une méridenne ou non (meridienne pas encore fait), et donc pour chaque assise :
        - On place **l'assise**  en fonction de la **base**
        - On place le **support de dossier**  en fonciton de la **base**
        - On place le **coussin du dossier**  en fonction de l'**assise**et du** support de dossier**
        - On ajout** l'assise, le support de dossier et le coussin**  dans un groupe et on les suffixe avec _{n° de l'assise}
      - On place le ou les accoudoirs si il y en à en fonction des infos des accoudoirs qui ont été calculés dans **ViewParse.js**
        - On place **l'accoudoir gauche**  en fonction du **support de dossier**  et on le suffixe de /0
        - On place** l'accoudoir droit**  en fonction du **support de dossier**  et on le suffixe de /1
      - On place les pieds en fonction des infos des pieds qui ont été calculés dans **ViewParse.js** \\ Dans l'ordre on place le pied **LF, LB, RF, RB**  (L = left = gauche, R = right = droite, F = front = devant et B = back = derrière) en fonction de la **base et du support de dossier**
      - Puis on décale le module pour le mettre à la suite de l'autre
  - Finalement pour le **canapé entier**, on le centre au milieu de la scene Three JS et on crée un objet de type Plane sous le canapé avec un revetement de type ShadowMaterial pour avoir l'ombre du canapé

==== 7 - fitCamera() ====

Fait dans **View.js **directement, cette méthode va tenter de bouger et zoomer/dézoomer la caméra pour que le canapé rentre dans la vue de la caméra

====== Informations sur le catalogue ======

Le catalogue contient plein d'informations sur tout et sur rien sur les modules des canapés.

Tout en haut la version du catalogue est indiqué.

Tout les modèles sont récupérés dans le dossierconfigurateurLibrary/src/copy/catalog/versionDuCatalog.

Sa structure est la suivante :

  * **module **: les différents modules possible pour les canapés
      * **nomDuModule **: Les **seules clés**  possibles pour les nom de modules
        * dock : pas encore utilisé, permet de savoir si un module peut être attaché à un aure à droite ou a gauche
        * accourdoirs : le nombre d'accoudoirs max du module (0, 1 ou 2)
        * size : la taille des **assises**  (à ne pas confondra avec la taille de la **base**  étant la taille des assies * le nombre d'assise)
        * version : Les versions disponible de ce module, pleine et haute
        * nDossier : pas encore utilisé, le jnombre de dossier
        * nAssise : Le nombre d'assise du module
        * largeBase : si largeBase true, alors le module n'aura qu'une seule base pour toute ses assises (ex: base de 1800 pour deux assies 900). Si false, chaque assise aura sa base \\
  * **base **: les bases possible avec leur modèle
      * **haute / pleine**  : type de la base
        * **taille de la base**
          * model : lien du fichier glb du modèle 3D de l'élément voulu
          * offset : à vérifier si utilisé dans ViewDispatchModule, permet de décaler la base en fonction des valeurs présente
            * x : décale l'élémént de gauche a droite
            * y : déplace l'élémént de haut en bas
            * z : déplace l'élémént de devant à derrière \\
  * **accoudoir **: Les types d'accoudoirs
      * **N° du type d'accoudoir**
        * **bas / haut**  : Rappel, l'accoudoir 6 haut ne peut être placé que sur des bases haute et l'accoudoir 6 bas ne peut être placé que sur des bases pleines
          * model : lien du fichier glb du modèle 3D de l'élément voulu
          * offset :Permet de décaler l'élément en fonction des valeurs présente
            * x : décale l'élémént de gauche a droite
            * y : déplace l'élémént de haut en bas
            * z : déplace l'élémént de devant à derrière \\
  * **assise**  : Les types d'assises
      * **type de l'assise**  : (exemple Ass1)
        * **taille de l'assise**  : Fait référence à l'attribut size dans les module
          * model : lien du fichier glb du modèle 3D de l'élément voulu
          * offset :Permet de décaler l'élément en fonction des valeurs présente
            * x : décale l'élémént de gauche a droite
            * y : déplace l'élémént de haut en bas
            * z : déplace l'élémént de devant à derrière \\
  * **'dossier-structure'**
      * **haute / pleine**
        * **haut / bas**
          * **taille de la structure de dossier:**  Fait référence à l'attribut size dans les module
            * model : lien du fichier glb du modèle 3D de l'élément voulu
            * offset :Permet de décaler l'élément en fonction des valeurs présente
              * x : décale l'élémént de gauche a droite
              * y : déplace l'élémént de haut en bas
              * z : déplace l'élémént de devant à derrière \\
  * '**dossier-coussin'**
      * **N° du type de coussin de dossier**
        * **taille de du coussin de dossier**: Fait référence à l'attribut size dans les module
          * model : lien du fichier glb du modèle 3D de l'élément voulu
          * offset :Permet de décaler l'élément en fonction des valeurs présente
            * x : décale l'élémént de gauche a droite
            * y : déplace l'élémént de haut en bas
            * z : déplace l'élémént de devant à derrière \\
  * **pied**
      * **nom du pied**
        * model : lien du fichier glb du modèle 3D de l'élément voulu
        * offset :Permet de décaler l'élément en fonction des valeurs présente
          * x : décale l'élémént de gauche a droite
          * y : déplace l'élémént de haut en bas
          * z : déplace l'élémént de devant à derrière
        * tailleAssise : à quelle type d'assise le pied est il lié
        * material : metal ou bois \\
  * **material **: les différents materiaux
      * **Clé **: de type nomMateriau_couleur ou nomMateriau_nomSousMateriaux_couleur si material pour le canapé, pour els pieds on met le nom qu'on veut
        * texture : Fichier avec l'image du material
        * bumpMap : fichier avec le bumpmap dur revetement
        * bumpScale : Puissance de la bumpmap sur le material
        * displacementMap : fichier avec la displacementMap dur revetement
        * displacementScale : Puissance de la displacementScale sur le material
        * typeMateriauPied : si c'est un material pour le pied indiqué à metal ou bois

Dans la pluspart des fichier js, l'accès au catalogue se fait via une méthode **catalog()**  qui prend en argument n'importe quel nombre de string s1, s2, s3, ..., sx et qui va chercher dans le catalogue la valeur de catalog-dev[s1][s2][s3][...][sx]