Maquette module de personnalisation de voiture PGO

Travail de création et réalisation d’une interface dynamique de personnalisation de véhicule particuliers. A destination du site internet de la marque PGO.
Utilisation de JQUERY, CANVAS, CSS, HTML + outils 3D : modo

Maquette de module de personnalisation - extérieur voiture PGO

Maquette de module de personnalisation – extérieur voiture PGO

Maquette de module de personnalisation - intérieur voiture PGO

Maquette de module de personnalisation – intérieur voiture PGO

Pré-calcul des images 3D

La première étape consiste à modéliser (ou à récupérer les données constructeur CAO-DAO) et à rendre 16 images qui compose la rotation 360° du véhicule. Nous choisissons une peinture et des accessoires blancs sur lesquels nous viendront superposer les différentes couleurs et textures (en mode multiplier comme un calque Photoshop par exemple) et directement dans notre module grâce à CANVAS.


Création du module Javascript

Grâce au préloader nous mettons toutes les images png (gestion de la transparence) en mémoire. Suivant la rotation nous affichons telle ou telle hauteur de calque. Et nous y superposons les personnalisations désirées. Exemple : toute la partie peinture bleue viendra se superposer à la partie peinture blanche et grâce u mode de fusion multiplier nous obtiendrons une peinture bleue tenant compte des détails d’éclairage et de volume.

Partage réseaux sociaux
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn