Table des matières

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© 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 :

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 :

  1. Pour chaque module :
    1. Pour chaque élément du module
      1. On récupère certaines infos qu'on stocke, comme la taille des éléments et leur nom
    2. On place la base du module
    3. 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 :
      1. On place l'assise en fonction de la base
      2. On place le support de dossier en fonciton de la base
      3. On place le coussin du dossier en fonction de l'assiseet du support de dossier
      4. On ajout l'assise, le support de dossier et le coussin dans un groupe et on les suffixe avec _{n° de l'assise}
    4. On place le ou les accoudoirs si il y en à en fonction des infos des accoudoirs qui ont été calculés dans ViewParse.js
      1. On place l'accoudoir gauche en fonction du support de dossier et on le suffixe de /0
      2. On place l'accoudoir droit en fonction du support de dossier et on le suffixe de /1
    5. 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
    6. Puis on décale le module pour le mettre à la suite de l'autre
  2. 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 :

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]