Création D'un Site de E-Commerce Et Application de Réalité Augmentée en Utilisant Prestashop Avec Intégration de Modèles 3D

.
Université de JENDOUBA Ministère de l’Enseignement Supérieur Institut Supérieur des Etudes

et de la Recherche Scientifique Appliquées en Humanités
El KEF
Département Arts Multimédia & Web
Rapport de Stage
Création d'un site de e-commerce et application de

réalité augmentée en utilisant prestashop avec
intégration de modèles 3D
CYBERMEDIA SERVICES
Elaboré par : Wertani Saber & Tibi Majed
Encadré par : - Institut : Ben Azouz Zeineb

- Organisme : Mansouri Bilel
Période : du 01/02/2013 au 30/03/2013

Année Universitaire : 2012/2013
1
Rapport de stage Année universitaire 2012/2013
Le prix de la réussite est le travail acharné, le

dévouement à la tâche à accomplir, et la
détermination que si nous gagnons ou perdons, nous
avons appliqué le meilleur de nous-mêmes à la tâche
à accomplir.
Vince Lombardi.
RÉSUMÉ:
Ce projet est effectué au sein de pour l’obtention de la licence appliquée en
Arts de multimédia et web.
Notre projet vise à fusionner les techniques multimédia avec celles du web afin de
créer un site e-commerce avec prestashop destiné à vendre des modèles 3d en le
représentant eux même en 3d
MOTS CLES : x3d, blender, modèle 3d, réalité augmentée, uml
Dédicaces
A mes parents
A mon cher père et ma belle mère
2
A ma famille
A mes amis,
A ceux qui m’aiment,
A ceux que J’aime
A ceux qui sont là aujourd’hui et ceux qui nous ont
quitté
A mon cher partenaire
Pour vos sacrifices….
MERCI infiniment
SABER
Dédicaces
EKTEB ECH T7EB YA MAJED
Majed
3
Remerciements
Nous tenons à remercier Mr Mansouri Bilel pour nous avoir accueillis au

sein de son entreprise.
Nous adressons particulièrement nos remerciements à Mlle Ben Azouz

Zeineb pour nous avoir aidés et suivis lors du développement du site.
Nous souhaitons également remercier nos deux familles et spécialement

nos deux pères pour leurs sacrifices...
En fin, veuillez accepter, mesdames et messieurs les membres du jury,
toutes nos reconnaissances.
Sommaire
Introduction
Chapitre 1 : Cadre général du projet et étude de l’existant
I-Introduction
1. Présentation de Cyber Media Services
4
1.1 Coordonnées…….....…..…..12
1.2 Présentation du projet :
A-Objectif :
B- Analyse de l’existant :
C- Limites de la solution actuelle :
III-Solution proposée :
IV-Conclusion :
Chapitre 2 : Spécification des besoins et élaboration du cahier des charges
Introduction
I-Identification des acteurs du système :
II. Elaboration du cahier de charges
II.1- Besoins fonctionnels:
II.2- Besoins non fonctionnels:
Chapitre 3 : ETUDE Conceptuelle
I-Choix de langage de modélisation :
II. Identification des cas d’utilisations :
1-Diagramme de Cas d’utilisation général :
A-SITE WEB
1) Partie administrateur
2) Partie client
3) Partie visiteur
B-Application réalité augmentée
2) Partie client
III- Diagramme de classe
Chapitre 4 : Réalisation
A-Travail réalisé
I-Environnement du travail :
5
I.1 Environnement matériel :

I.2 Environnement logiciel :
B-Premier Projet : site web
1-L’export du modèle en format (.x3d)
2-L’export du modèle du format (.x3d) au format (.html)
a-Méthode en ligne
2-Méthode hors ligne
C- PROJET 2-Réalité augmentée
1-Introduction générale
2-Historique et Avantages :
A / Historique
B / Avantages
3-fonctionnement
4-Integration dans le site
Chapitre 5 : Acquis et points forts
I) Site web
II) l’application de réalité augmentée
Table des figures
Figure 1 : Diagramme de cas d’utilisation général
Figure 2 : Diagramme de séquences relatif au cas <<ajouter un utilisateur>>
Figure 3 : Diagramme de séquences relatif au cas <<supprimer un utilisateur>>
Figure 4 : Diagramme de séquences relatif au cas <<modifier un utilisateur>>
Figure 5 : Diagramme de séquences relatif au cas <<ajout d’un produit>>
Figure 6 : Diagramme de séquences relatif au cas <<suppression d’un produit>>
Figure 7 : Diagramme de séquences relatif au cas <<modification d’un produit>>
Figure 8 : Diagramme de séquences relatif au cas <<Télécharger d’un produit>>
6
Figure 9 : Diagramme de séquences relatif au cas <<affichage du modèle 3d dans le site>>
Figure 10 : Diagramme de séquences relatif au cas <<acheter un modèle 3d dans le site>>
Figure 11 : Diagramme de séquences relatif au cas <<s’inscrire>>
Figure 12 : Diagramme de séquences relatif au cas << visualiser un modèle 3d dans le site >>…..48
Figure 13 : Diagramme des cas d’utilisation de l’application
Figure 14 : Diagramme de séquences relatif au cas <<ajout d’un modèle à l’application>>
Figure 15 : Diagramme de séquences relatif cas <<modifier d’un modèle dans l’application>>.
Figure 16 : Diagramme de séquences relatif cas <<suppression d’un modèle de l’application>>
Figure 17 : Diagramme de séquences relatif cas <<lancer l’application>>
Figure 18 : Diagramme de classes général
Figure 19: Blueprint du modèle Camaro 2013
Figure 20-21: création du modèle
Figure 22-23: Rendering du modèle
Figure 24: export en .x3d
Figure 25 : code original du fichier x3d
Figure 27: conversion en ligne du modèle du format x3d à html
Figure 28 : conversion en ligne du modèle du format x3d à html
Figure 29 : conversion en ligne du modèle du format x3d à html
Figure 30 : affichage du modèle converti
Figure31 : affichage du modèle avec instant reality
Figure32:conversion avec l’invite des commandes
Figure 33 : Utilisation de la fonction "aopt-h"
Figure34 : intégration du modèle dans le site web
Figure35 : fonctionnement de l’application
Figure 36: téléchargement des applications à travailler avec
Figure 37: lancement et capture du marqueur via l’ARToolkit marker genertaor
Figure 38-téléchargement de la bibliothèque des fichiers nécessaires
7
Figure 39 : Ajout des fichiers au projet sous adobe Flex
Figure 40 : création du code
Figure 41 : test de l’application
Figure 42: Google sketchup 3d warehouse
8
Introduction
Durant trois années d’études au sein de notre institut l’ISEAH du Kef, nous avons pu accumuler
des connaissances théoriques qui nous ont permis de se construire une première idée sur le
domaine du multimédia et du web.
Ces connaissances nous seront certes très utiles pour notre vie professionnelle, mais malgré tous
ces avantages qu’offre une telle formation théorique notre sentiment est que ne nous sommes pas
encore prêts à commencer une véritable expérience professionnelle, pour ces raisons il semble
judicieux d’effectuer un stage de fin d’étude au sein d’une entreprise qui nous permettra d’une part
de mettre en pratique notre savoir théorique, et d’autre part s’initier au travail en groupe et
d’apprécier la complexité de ce métier.
Cette expérience nous permettra, aussi de découvrir une autre facette de notre métier futur, soit
l’interaction avec les clients.
Dans ce cadre, nous présentons notre projet de fin d’études qui s’intitule « Création d'un site de
e-commerce et application de réalité augmentée en utilisant prestashop avec

intégration de modèles 3D» élaboré au sein de Cyber Media Services. Sachant que
l’affichage des produits dans un site e-commerce sont « statiques », il nous a été demandé créer une
méthode on rend l’affichage des produits plus interactif et attirant. Et qui consiste à réaliser un site
web e-commerce contenant des modèles 3D à télécharger/visualiser/acheter et aussi une application
de réalité augmentée qui permet au client de visualiser le modèle qu’il souhaite avoir en monde réel
dans le temps réel. Nous avons amenées dans le cadre de ce travail à manipuler le langage html et
java et x3d ainsi que le langage de modélisation UML.
9
Pour ce faire, nous avons réparti notre rapport en cinq chapitres :
1. Le premier chapitre intitulé « cadre général du projet et étude de l’existant » est consacré à

la présentation de l’entreprise Cyber Media Services ainsi que la présentation du cadre
général de notre projet.
2. Le deuxième chapitre intitulé « spécifications des besoins et élaboration du cahier des

charges »présentera les spécifications des besoins des différents utilisateurs de site et de
l’application.
3. La conception de notre travail sera élaborée ensuite dans le troisième chapitre intitulé
« étude conceptuelle » Ce chapitre recouvre toutes les étapes liées à l’analyse et la
conception du projet, il est formé de deux parties : l’analyse et la conception du système et
la conception de la base de données.
4. Le quatrième chapitre intitulé « réalisation » c’est où nous préciserons les détails matériels

et logiciels nécessaires à l’élaboration de notre travail. Aussi nous terminerons de chapitre
avec les interfaces graphiques de notre site e-commerce et de notre application de réalité
augmentée
5. <<Acquis et points forts>> : est le dernier chapitre qu’avec nous terminerons ce projet, ce
chapitre contient les acquis qu’on a eu avec les points forts des techniques qu’on a travaillé
avec.
10
Chapitre 1 :
Cadre général du projet

et étude de l’existant
11
I-Introduction
Dans ce chapitre, nous avons commencé tout d’abord par la présentation de la banque (BTL), nous
donnons ensuite une présentation de notre projet.
1. Présentation de Cyber Media Services
Pour conclure notre programme d'études nous a été demandé d’effectuer un stage ; nous avons
donc choisit l’entreprise CYBER media Services où nous avons passé une période de deux mois
compté depuis le début du mois de Février.
1.1 Coordonnées
Adresse : CYBER- PARC DU KEF RUE D’ALGER 7100 LE KEF
 Tél : +216 23 52 75 97
 Fax : +216 78 20 53 09
Adresse mail : bilelmansouri@yahoo.fr
Effectif total : 03
1.2 Présentation
Cyber media services est une boite de développement dirigée par Mr Mansouri Bilel diplômée de
l’Ecole nationale des ingénieurs de Tunis. Cette boite de développement a pour objectif le
développement et web design, logiciel graphique, projet de communication clé en main qui fait la :
 Conception des logos
 Conception des cartes de visite
 Habillage de stand
 Impression numérique sur tout support et format
12
 Habillage des véhicules
 Conception web : Cette agence développe aussi les sites web clé en main
 Infographie : On réalise les maquettes des affiches publicitaires, logo marque, papiers
entêtes, lettres personnalisées, et tous les objets de communications présents sur le marché
(agenda, stylos, porte-clefs, mini papier....)
II-Présentation du projet :
A-Objectif :
Ce projet consiste à créer un site web dynamique e-commerce comportant une qualité spécifique
qui est la fusion entre le multimédia (la création 3d) et le web , pour cela on a désigné comme
objectif créer un site web qui au lieu d’avoir un affichage de deux dimensions il aura un affichage
en trois dimensions qui permettra à l’utilisateur de manipuler le modèle visionné en toute liberté
dans tous les sens au lieu d’avoir un affichage simple stable offrant l’utilité de télécharger les
modèles simples et d’acheter ceux qui sont complexes dans un espace client où le client peut
sélectionner les produits(modèles) dans un panier .ce n’est que la première étape , mais la
deuxième c’est une application de réalité augmentée qui permettra au client de visualiser le modèle
directement via son webcam sur un plan naturel dans un temps réel pour avoir plus d’interactivité
pas seulement avec l’administrateur mais aussi avec le produit lui-même .
Les travaux présentés dans ce chapitre sont réalisés via des logiciels spécialisés, nous citons
essentiellement Blender, Adobe Flex, Autodesk 3ds max, Google sketchup, x3dom instant
reality...etc. Ce projet est donc devisé en deux parties : un site web et une application
B- Analyse de l’existant :
CYBER media Services est une agence de communication et de publicité, nous avons noté qu’elle
fournit des maquettes et des habillages pour des produits tel que les voitures mais en 2d notant
l’absence des produits qu’avec on y travaille.
13
C- Limites de la solution actuelle :
La présente solution est trop limitée et plus précisément on n’a qu’à afficher le travail graphique
réalisé sans avoir le produit ni en 2d ni en 3d. Nous avons choisi d’établir l’affichage en trois
dimensions des produits qui sont eux même des modèles en 3d.
III-Solution proposée :
On va précéder à afficher des modèles 3d de quelques produits qu’on crée en utilisant la méthode
comme x3d et en passant par le même modèle à un affichage en réalité avec l’application pour
avoir une interactivité plus attirante et plus adéquate avec le produit sélectionné.
IV-Conclusion :
Nous avons essayé dans ce chapitre de donner une vue claire sur le projet pour avoir faire l’analyse
des services que ce site et que l’application doit offrir et les contraintes sous lesquelles ces derniers
fonctionnent.
14
Chapitre 2 :
Spécification des
besoins et élaboration
du cahier des charges
15
Introduction
Le processus qui consiste à déterminer les services que ce site l’offre et les contraintes sous
lesquelles il doit fonctionner sont appelées "Capture et analyse des besoins". Le résultat de cette
analyse constitue la spécification des besoins.
La réussite de toute étude dépend de la qualité de son départ. De ce fait, l'étape de spécification des
besoins constitue la base de départ de notre travail. En outre, l'adéquation de tout site à réaliser, aux
besoins des utilisateurs et aux traitements envisagés au niveau de ses opérations assurera la réussite
du site et son utilité future.
Dans ce chapitre on essayera de présenter les différents acteurs de notre site ainsi que évoquer leurs
besoins fonctionnels et non fonctionnels.
I-Identification des acteurs du système :

Nous allons présenter dans ce qui suit les fonctionnalités qu'offrira notre site aux différents acteurs.
Un administrateur est l'acteur qui va gérer les comptes, affecter les équipements ou les réaffecter.
Il réalise les tâches suivantes :
 Créer des modèles
 Convertir les modèles
 S'identifier
 Gérer les utilisateurs
o Ajouter un nouvel utilisateur
o Modifier un utilisateur
o Supprimer un utilisateur
 Gérer les modèles
o Ajouter des modèles
o Modifier des modèles
o Supprimer des modèles
 Gérer l’application
o Ajouter des modèles à l’application
o Modifier des modèles
16 16
o Supprimer des modèles
Le client est l'acteur qui va utiliser les fonctionnalités offertes par le site après l’étape de
l’inscription.
Il effectue les tâches suivantes :
 S'identifier
 Visualiser les modèles en 3D
 Télécharger les modèles gratuits
 Acheter les modèles complexes
 Lancer l’application
Le visiteur est l’acteur passif lors de son utilisation du site. C’est à lui d’effectuer les tâches
suivantes :
 S’identifier
 Visualiser les modèles en 3D
II- Elaboration du cahier de charges
II.1- Besoins fonctionnels :
Dans cette partie on a le but de fixer les objectifs que nous avons déterminé à partir d'une vue
claire des différents besoins de tous les acteurs de notre application.
 Créer des modèles : l’administrateur doit créer les modèles en 3d sous Blender afin de les
afficher en tant que des produits à vendre/afficher/télécharger dans le site
 Convertir les modèles : l’administrateur doit convertir les modèles du format 3d en
d’autres formats que Prestashop et notre navigateur peut les afficher
 S’identifier : l’administrateur doit s’identifier avant d’accéder au site en tapant son login et
son mot de passe.
 Gérer les utilisateurs : l’administrateur peut ajouter un nouveau compte pour l’un des
utilisateurs inscrits du site et ce en acceptant toutes les informations qui le concernent
17 17
(Nom, Prénom, login, mot de passe, etc.). Il peut également supprimer ou modifier un
compte en donnant son identifiant.
 Gérer les modèles : l’administrateur peut ajouter un nouveau modèle au site afin de
l’afficher/ mettre en vente/ l’introduire à l’application en introduisant toutes les
informations qui le concernent (Nom, référence, récapitulatif, description, fichiers joints,
lien de l’affichage 3d, etc.). Il peut également le supprimer ou le modifier
 Gérer l’application RA (réalité augmentée) : l’administrateur peut ajouter un nouveau
modèle à l’application afin de l’afficher / l’introduire à l’application ajoutant le modèle au
dossier spécifique de l’application et en ajutant son lien au site. Il peut également le
supprimer ou le modifier
II.2- Besoins non fonctionnels:
Il s’agit de présenter les contraintes que devra respecter notre site et application. Parmi ces
contraintes, nous citons :
 La rapidité de la création 3d  Ergonomie des interfaces.
 La rapidité de la conversion de  Sécuriser les traitements
3d en (x3d/ collada)  Effectuer des mises à jour en
 Fiabilité du site temps réel
 Fiabilité de l'application  Disponibilité des produits
 Confidentialité des  Facilité d’utilisation
informations  Simplicité d’affichage et
 Facilité des traitements d’interpolation
Conclusion :
La spécification des besoins procure une vision plus claire du sujet et une compréhension plus
profonde des tâches à réaliser. Elle mène également à prévoir les problèmes à rencontrer et
chercher les solutions permettant de les contourner. Par conséquent, on doit spécifier et chercher les
moyens possibles pour mettre en place ces solutions afin de réaliser une bonne conception du
travail. C’est pourquoi on a essayé tout au long de chapitre de bien présenter les besoins
18 18
fonctionnels et non fonctionnels du sujet. Ces besoins vont être la base sur laquelle on va s’appuyer
pour réaliser la conception de notre système. Cette conception sera l’objet du chapitre suivant.
Chapitre 3 :
ETUDE
Conceptuelle
19 19
ETUDE CONCEPTUELLE
Introduction
Ce chapitre recouvre toutes les étapes liées à l’analyse et la conception du projet, il est formé de
l’analyse et la conception du système.
Pour les besoins de notre étude, nous avons choisi de nous baser sur le langage de modélisation
UML
I-Choix de langage de modélisation :
Pour les besoins de notre étude, nous avons choisi de nous baser sur le langage de modélisation
UML. Ce langage permet de décrire le système d’information à l’aide de trois représentations
différentes :
 Un mode de représentation fonctionnel, qui s’appuie exclusivement sur un diagramme de cas
d’utilisation qui est comportemental qui montre un ensemble de cas d’utilisation et d’acteurs ainsi
que leurs relations.
 Un mode de représentation statique ou structurel qui est constitué d’un diagramme de classe qui
présente le point central dans un développement orienté objet. Il a pour but de décrire la structure
des entités manipulées par les utilisateurs.
 Un mode de représentation dynamique ou comportemental, qui s’appuie sur le diagramme de
séquences qui montre une interaction et met l’accent sur l’ordre chronologique des messages.
 UML est un ensemble de modèle qui facilite la compréhension, il contient des

connaissances essentielles de sujet avec divers points de vue.
Les points forts d’UML :
20
 UML est un langage formel et normalisé puisqu’il assure :

 Un gain de précision
 Un gage de stabilité
 UML est un support de communication performant :
 Il cadre l’analyse
 Il facilite la compréhension de représentations abstraites complexes.
UML ne suit pas une démarche.
II. Identification des cas d’utilisations :
Le diagramme de cas d’utilisation nous montre d’une manière expressive les différentes
fonctionnalités du site et de l’application et leurs relations avec les principaux acteurs qui sont
notamment :
 L’administrateur
 Le client (utilisateur inscrit actif)
 Le visiteur (utilisateur ordinaire passif)
21
Figure 1 : Diagramme de cas d’utilisation général
22
2) Diagrammes de séquences
A-SITE WEB
Description détaillée du cas d’utilisation « créer un modèle »
<<Include>>
Administrateur Creer un modèle convertir le

modéle
 Sommaire d’identification
Titre : Créer un modèle

But : création du modèle en 3d
Résumé : c’est la première étape dont on crée le modèle sous Blender.
Acteurs : Administrateur
 Description des enchaînements

Pré condition :
 L’administrateur va créer le modèle en 3d qu’il va le convertir en html après
Enchaînement :
 L’administrateur fait/télécharge une Blueprint (plan) du modèle
 Il crée le modèle 3d et l’enregistre sous le format .3ds pour le site et sous le format collada (.dae)
pour l’application
23
Description détaillée du cas d’utilisation « convertir un modèle »
<<Extends>>
Administrateur Convertir UN modèle Gérer le

modéle
Titre : Convertir un modèle

But : Conversion du modèle de 3d en x3d
Résumé : c’est la fait de convertir en ligne/hors ligne le modèle de format 3d en format x3d.

Pré condition :
 L’administrateur va convertir le modèle de 3den x3d suivant la méthode en ligne ou la méthode
hors ligne
Enchaînement
L’administrateur va convertir le modèle du format 3d en format x3d suivant la méthode en ligne
ou la méthode hors ligne
EN LIGNE
 L’administrateur ouvre le modèle créé sous Blender
 Il l’exporte en format x3d
 Il l’ouvre sous bloc-notes et copie tout le fichier
 Sous le site www.x3dom.org on sélectionne le convertisseur en ligne et on colle le contenu et on
choisit sous quelle forme on va l’exporter
 On ré sélectionne le code converti et on le crée sous forme d’un fichier html
 On ouvre le fichier et on modifie la hauteur, la largeur et la coloration dans le code HTML créé
24
HORS LIGNE
NB : Cette méthode elle-même fonctionne en deux méthodes : la méthode normale et la méthode
<inline>
Il faut noter qu’on doit avoir
1-Téléchargé le convertisseur hors ligne
2-Travailler avec wamp/xamp server
3-Téléchargé les fichiers x3d.js et x3d.css
Méthode normale

 On ouvre le convertisseur téléchargé (instant Player) pour pré visualiser le modèle
 On exécute l’invite des commandes
 On sélectionne le format et le dossier auquel on désire convertir le modèle avec la fonction aopt
 Après avoir converti le modèle, on ouvre le code source et on intègre les fichiers JavaScript x3d.js
et le fichier de style x3d.css
Méthode <inline>
 On crée un fichier html dont on fait appel au fichier x3d en intégrant les fichiers x3d.js et x3d.css
25
Description détaillée du cas d’utilisation « Ajouter un utilisateur »
<<Include>>
Administrateur Ajouter UN utilisateur Gérer les

utilisateurs
Titre : Ajouter un utilisateur

But : Ajout d’un utilisateur au site
Résumé : c’est l’étape dont on ajoute un utilisateur au site après qu’il s’inscrit.

Pré condition :
 L’administrateur va afficher le modèle 3d dans le site
Enchaînement :
 L’administrateur sélectionne la méthode qu’avec il a créé le fichier x3d
 Il effectue les changements (en ligne / hors ligne (avec les fichiers x3d.js et x3d.css))
26
Figure 2 : Diagramme de séquences relatif au cas <<ajouter un utilisateur>>
27
Description détaillée du cas d’utilisation « Supprimer un utilisateur »
<<Include>>
Administrateur Supprimer un utilisateur Gérer les

utilisateurs
Titre : Supprimer un utilisateur

But : Suppression d’un utilisateur du site
Résumé : c’est l’étape dont on supprime un utilisateur du site

Pré condition :
 L’administrateur va supprimer le modèle 3d du le site
Enchaînement :
 L’administrateur sélectionne le modèle et le supprime du site
28
Figure 3 : Diagramme de séquences relatif au cas <<supprimer un utilisateur>>
29
Description détaillée du cas d’utilisation «Modifier les utilisateurs »
<<Include>>
Administrateur Modifier les utlisateurs Gérer les

utlisateurs
Titre : mise à jour de la liste des utilisateurs

But : mettre à jour la liste des utilisateurs dans le site
Résumé : c’est l’étape dont on modifie le profil utilisateur à afficher au site.

Pré condition :
 L’administrateur va modifier le modèle 3d dans le site
Enchaînement :
 Il choisit d’ajouter des textures / couleur / taille du modèle sous Blender
 Il le réenregistre sous le même fichier x3d
30
Figure 4 : Diagramme de séquences relatif au cas <<modifier un utilisateur>>
31
Description détaillée du cas d’utilisation « Ajouter un modèle »
<<Include>>
Administrateur Ajouter un modèle gérer les

modéles
Titre : Ajouter un modèle

But : Ajout du modèle 3d au site
Résumé : c’est l’étape dont on ajoute le modèle à afficher au site.

Pré condition :
Enchaînement :
32
Figure 5 : Diagramme de séquences relatif au cas <<ajout d’un produit>>
33
Description détaillée du cas d’utilisation « Supprimer un modèle »
<<Include>>
Administrateur Supprimer un modèle gérer les

modéles
Titre : Supprimer un modèle

But : Suppression du modèle 3d au site
Résumé : c’est l’étape dont on supprime le modèle converti du site.

Pré condition :
 L’administrateur va supprimer le modèle 3d du le site
Enchaînement :
 L’administrateur sélectionne le modèle et le supprime du site
34
Figure 6 : Diagramme de séquences relatif au cas <<suppression d’un produit>>
35
Description détaillée du cas d’utilisation «Modifier un modèle »
<<Include>>
Administrateur Modifier UN modèle Gérer le

modéle
Titre : mise à jour d’un modèle

But : mettre à jour le modèle 3d affiché dans le site
Résumé : c’est l’étape dont on modifie le modèle à afficher au site.

Pré condition :
 L’administrateur va modifier le modèle 3d dans le site
Enchaînement :
36
37
Figure 7 : Diagramme de séquences relatif au cas <<modification d’un produit>>
38
Description détaillée du cas d’utilisation «classer sous catégories »
<<Include>>
Administrateur Classer sous catégories Gérer les

modéles
Titre : classer sous catégories

But : classer les produits sous leurs catégories
Résumé : c’est l’étape dont on classifie le modèle affiché dans le site selon son thème.

Pré condition :
 L’administrateur va classer le modèle 3d dans le site selon son thème
Enchaînement :
39
Description détaillée du cas d’utilisation «Lancer l’application »
<<Include>>
Administrateur Lancer Afficher le

l’application modéle
Titre : lancer l’application

But : afficher le modèle en forme de réalité augmentée
Résumé : c’est l’étape dont on procède à afficher le modèle via l’application.

Pré condition :
 L’administrateur va afficher le modèle 3d dans le site via l’application
Enchaînement :
 L’administrateur sélectionne la modèle 3d
 Il l’ouvre sous blender et l’ajoute en format collada (.dae) et l’enregistre sous le répertoire destiné
de l’application
 Il lance l’application
40
2) Partie client
Description détaillée du cas d’utilisation « Télécharger un

modèle »
<<Include>>
client Télécharger un modéle S’identifier
Gratuit
Titre : télécharger un modèle gratuit

But : télécharger un modèle 3d gratuit
Résumé : c’est le fait de télécharger des modèles offerts gratuitement sur le site.
Acteurs : client

Pré condition :
 Le client sélectionne le modèle qu’il souhaite télécharger el le télécharge
Enchaînement :
 Le client sélectionne la catégorie des modèles 3d
 Il sélectionne ce qu’il veut et le télécharge.
41
Figure 8 : Diagramme de séquences relatif au cas <<Télécharger d’un produit>>
42
Description détaillée du cas d’utilisation « afficher un modèle 3d

dans le site »
<<Include>>
client Afficher un modéle 3d S’identifier

Dans le site
Titre : afficher un modèle 3d dans le site

But : afficher un modèle 3d d’une manière interactive
Résumé : c’est le fait d’afficher le modèle à télécharger/acheter d’une façon plus attirante.
Acteurs : client

Pré condition :
 Le client sélectionne le modèle qu’il souhaite afficher
Enchaînement :
 Il sélectionne ce qu’il veut et le visualiser
 Il inter-réagit avec l’affichage et sélectionne l’acheter / le télécharger s’il est gratuit.
43
Figure 9 : Diagramme de séquences relatif au cas <<affichage du modèle 3d dans le site>>
44
Description détaillée du cas d’utilisation « acheter un modèle 3d

dans le site »
<<Include>>
client acheter un modéle 3d S’identifier
Titre : acheter un modèle 3d

But : acheter un modèle 3d (complexe) affiché dans le site
Résumé : c’est le fait d’acheter le modèle mis dans le site.
Acteurs : client

Pré condition :
 Le client sélectionne le modèle qu’il souhaite acheter
Enchaînement :
 Il sélectionne ce qu’il veut
 Il l’affiche s’il veut et ajoute le modèle au panier.
 Il s’identifie et suit la procédure d‘achat
45
46
Figure 10 : Diagramme de séquences relatif au cas <<acheter un modèle 3d dans le site>>
3) Partie visiteur
Description détaillée du cas d’utilisation « s’inscrire »
<<Include>>
Visiteur S’inscrire S’Identifier
Titre : s’inscrire
But : s’inscrire dans le site
Résumé : c’est le fait de s’inscrire afin de télécharger/visualiser/ acheter des modèles 3d
Acteurs : visiteur

Pré condition :
 L’administrateur établie un espace pour l’inscription des utilisateurs
Enchaînement :
 Le visiteur saisie ses informations
47
 Il s’inscrive
Figure 11 : Diagramme de séquences relatif au cas <<s’inscrire>>
Description détaillée du cas d’utilisation « visualiser un modèle

3d dans le site »
48
<<Include>>
visiteur visualiser un modéle 3d S’identifier
Titre : visualiser un modèle 3d dans le site

But : visualiser un modèle 3d dans le site
Résumé : c’est le fait de voir le modèle 3d sans le télécharger / l’acheter
Acteurs : visiteur

Pré condition :
 Le visiteur sélectionne le modèle qu’il souhaite voir en 3d
Enchaînement :
 Le visiteur sélectionne le modèle
49
 Il l’affiche
Figure 12 : Diagramme de séquences relatif au cas << visualiser un modèle 3d dans le site >>
B-Application réalité augmentée

50
Le diagramme de cas d’utilisation nous montre d’une manière expressive les différentes
fonctionnalités du site et de l’application et leurs relations avec les principaux acteurs qui sont
notamment :
-L’administrateur
-le client
Figure 13 : Diagramme des cas d’utilisation de l’application
1)Partie administrateur
51
Description détaillée du cas d’utilisation « Ajouter un modèle »
<<Include>>
Administrateur Ajouter un modèle Gérer

À l’application la’application
Titre : Ajouter un modèle

But : Ajout du modèle 3d à l’application
Résumé : c’est l’étape dont on ajoute le modèle à afficher au site via l’application RA

Pré condition :
 L’administrateur va afficher le modèle 3d dans le site via l’application
Enchaînement :
 L’administrateur crée un modèle et l’enregistre sous le répertoire sous la forme collada .dae
52
Figure 14 : Diagramme de séquences relatif au cas <<ajout d’un modèle à l’application>>
Description détaillée du cas d’utilisation « modifier un modèle »
53
<<Include>>
Administrateur Editer un modèle Gérer

l’applicattion
Titre : modifier un modèle

But : modification du modèle 3d à afficher dans l’application
Résumé : c’est l’étape dont on ajoute le modèle à afficher au site.

Pré condition :
Enchaînement :
54
Figure 15 : Diagramme de séquences relatif au cas <<modifier d’un modèle dans l’application>>
Description détaillée du cas d’utilisation « modifier un modèle »
55
<<Include>>
Administrateur supprimer un modèle Gérer

l’applicattion
Titre : supprimer un modèle

But : désactiver l’affichage en RA / supprimer le modèle
Résumé : c’est l’étape dont on supprime le modèle

Pré condition :
 L’administrateur va supprimer le modèle / désactiver l’affichage
Enchaînement :
 L’administrateur sélectionne le lien de l’affichage
 Il le supprime de la base de données
56
Figure 16 : Diagramme de séquences relatif au cas <<suppression d’un modèle de l’application>>
2) Partie client
57
Description détaillée du cas d’utilisation «Lancer l’application »
<<Include>>
client S’inscrire Lancer

application
Titre : lancer l’application

But : afficher le modèle en forme de réalité augmentée
Résumé : c’est l’étape dont on procède à afficher le modèle via l’application.
Acteurs : client

Pré condition :
 Le client va afficher le modèle 3d dans le site via l’application
Enchaînement :
 Le client sélectionne la modèle 3D dans le site
58
Figure 17 : Diagramme de séquences relatif au cas <<lancer l’application>>
59
III- Diagramme de classe : Le diagramme de classe représente l'architecture

conceptuelle du système : il décrit les classes que le système utilise, ainsi que leurs liens
Figure 18 : Diagramme de classes général
Chapitre 4 :
60
Réalisation
61
A-Travail réalisé
I-Environnement du travail :
I.1 Environnement matériel :
Un PC Toshiba Satellite L350 avec les configurations suivantes :

Capacité RAM 3Go
Processeur Intel(R) pentium Dual core
Système d’exploitation windows7
I.2 Environnement logiciel :
Pour la réalisation de notre projet nous avons utilisé les outils suivants :
 Adobe Photoshop cs5
Est considéré par le milieu professionnel de l’infographie comme le logiciel référence de traitement
d’images numériques gérées en mode Pixel. Ce logiciel permet bien sûr la création d’images bitmap,
mais il est utilisé principalement pour le photomontage et la retouche d’images bitmap. Photoshop est
devenu avec le temps un outil indispensable aux différentes chaînes de création numérique (imprimerie,
vidéo, DVD, 3D, effets spéciaux…). C’est tout simplement un incontournable.
 Blender 2.64 / 2.65
Blender est un logiciel de modélisation et d'animation 3D. Voici quelques-uns de ses qualités et défauts:
Points forts
* Gratuit
* Performant
* Très léger (environ 10 Mo)
* Multi plates-formes (Windows, Linux, Mac OS X...)
62
Points faibles
* En anglais
* Difficile d'utilisation au début
 Autodesk 3ds max 2009
Le logiciel est issu du programme 3D Studio qui a tourné sous DOS jusqu'à sa version 4. Les
programmeurs de Kinetix (une division d'Autodesk rebaptisée maintenant Autodesk Media and
Entertainment) ont mis au point un logiciel entièrement nouveau et repensé.
3dsmax est ainsi conçu sur une architecture modulaire, compatible avec de multiples plug-
ins (extensions) et les scripts écrits dans un langage sous licence appelé (maxscript). Le logiciel 3ds max
s'est développé rapidement, en étant utilisé principalement dans le cadre du jeu vidéo. Il a également
été utilisé dans d'autres domaines, notamment le film d'animation avec Kaena, la prophétie. 3D Studio
Max est également utilisé dans un nombre croissant de films dont : X-Men II, Bulletproof Monk, The
Core, Final Destination II, Jason vs. Freddy et récemment utilisé pour le film 2012 lors du tremblement
de terre à L.A (Los Angeles) et bien d'autres
 X3dom instant Player
La plate-forme InstantReality offre à ses utilisateurs des outils pour les aider à mieux comprendre et
optimiser leurs (peut-être grand) ensembles de données 3D. Un tel outil est aopt que (entre autres
choses) peut vous aider de différentes manières pour optimiser des modèles 3D avec un accent
particulier sur les données de scène graphique.
 Google Sketchup
Le logiciel de Google, Google SketchUp, pourrait bientôt vous permettre de voir le monde en 3D via
Google Earth. Comment ? Utilisant des outils de modélisation simples, Google SketchUp offre de
grandes possibilités dans la construction 3D sur ordinateur que ça soit pour l'animation ou pour réaliser
des modèles d'architecture. Qu'est ce qui fait que Google SketchUp n'est pas comme les autres logiciels
basiques de modélisation 3D ? C'est surtout sur le système de l'inférence que Google SketchUp est
différents des autres logiciels. Avec Google SketchUp, il devient alors possible d'élaborer une face et de
la diviser ou la couper selon vos directives. Pour un rendu aussi proche que possible de la réalité, Google
SketchUp retransmet les ombres mais aussi les matières. SketchUp, devenu Google SketchUp en 2006,
intervient donc dans la modélisation des villes pour Google Earth. Si vous souhaitez vous initier à Google
SketchUp, sachez que de nombreux didacticiels sont à votre disposition pour vous guider dans la
modélisation 3D.
63
 Wampserver
WampServer (anciennement WAMP5) est une plateforme de développement Web de type WAMP,

permettant de faire fonctionner localement (sans se connecter à un serveur externe) des scripts PHP.
WampServer n'est pas en soi un logiciel, mais un environnement comprenant deux serveurs (Apache et
MySQL), un interpréteur de script (PHP), ainsi que phpMyAdmin pour l'administration Web des bases
MySQL.
Il dispose d'une interface d'administration permettant de gérer et d'administrer ses serveurs au travers
d'un tray icon (icône près de l'horloge de Windows).
La grande nouveauté de WampServer 2 réside dans la possibilité d'y installer et d'utiliser n'importe
quelle version de PHP, Apache ou MySQL en un clic. Ainsi, chaque développeur peut reproduire
fidèlement son serveur de production sur sa machine locale.
 Notepad ++
Notepad++ est un éditeur de texte générique codé en C++, qui intègre la coloration syntaxique de code
source pour les langages et fichiers C, C++, Java, C#, XML, HTML, PHP, JavaScript, ainsi que pour tout
autre langage informatique, car ce logiciel propose la possibilité de créer ses propres colorations
syntaxiques pour un langage quelconque.
Ce logiciel, basé sur la composante Scintilla, a pour but de fournir un éditeur léger (aussi bien au niveau
de la taille du code compilé que des ressources occupées durant l’exécution) et efficace. Il est également
une alternative au bloc-notes de Windows (d’où le nom). Le projet est sous licence GPL.
Il ne bloque pas le fichier en cours d'édition et détecte toute modification apportée à celui-ci par un
autre programme (il propose de le recharger).
 Yed graph editor
YEd est une application de bureau puissant qui peut être utilisé pour générer rapidement et
efficacement des diagrammes de grande qualité. Créer des diagrammes manuellement ou importer vos
données externes pour l'analyse. Nos algorithmes de mise en page automatique organisent même de
grands ensembles de données avec une simple pression sur un bouton.
 Prestafhop
Prestashop est une plateforme e-commerce open source. Un site Prestahop est un CMS (système à
gestion de contenu).C'est un site internet préconçu et modulaire. Il est composé de deux parties
distinctes: Le front office, qui est la partie visible (l'interface frontale) par les internautes sur le web. Le
back office, appelé aussi interface d'administration est uniquement visible par l'administrateur du site.
Celle-ci permet de gérer le contenu du site.
64
B-Premier Projet : site web

 Création 3D
Dans cette première étape (figure 1) nous présentons le premier pas de la création des
modèles 3d des voitures qui est le choix du plan (blueprint)
Figure 19: Blueprint du modèle Camaro 2013
65
Figure 20-21: création du modèle
66
Les figures suivantes (figure4/5) montrent l’étape finale de la création qui est l’affichage du
modèle
Figure 22-23: Rendering du modèle
Après la création du modèle, on n’a qu’une visualisation en 2d de ce dernier, et nous devons

procéder à l’afficher en 3d dans le site web, pour cela on doit convertir ce modèle de l’extension
(.3ds) ou (.obj) ou (.max) à un format que notre navigateur comprend, pour ça on doit passer par
deux étapes :
67
1-L’export du modèle en format (.x3d )
Figure 24: export en .x3d
2-L’export du modèle du format (.x3d) au format (.html)
Dans cette étape, on peut convertir le fichier de deux méthodes : en ligne via le site
www.x3dom.com ou hors ligne via le convertisseur Instant Play et l’invite des commandes, les
figures suivantes présentent la conversion :
68
a-Méthode en ligne
Après convertir le modèle en x3d, il faut le reconvertir en html, pour ça il faut ouvrir le
fichier .x3d dans le bloc-notes
Après ça, on sélectionne tout le contenu ouvert dans le bloc-notes et on le copie pour l’ouvrir
dans le site x3dom.org
69
70
Code converti
figure 27: conversion en ligne du modèle du format x3d à html
figure 28 : conversion en ligne du modèle du format x3d à html
71
figure 29 : conversion en ligne du modèle du format x3d à html
On ré-sélectionne le code produit dans la page et on le remplace dans le document qu’on a

créé en changeant l’extension à .html
(Le fichier fonctionne quand on est en ligne, mais quand on

n’est pas connecté à internet le fichier ne fonctionne pas dû à
deux fichiers qui sont x3d.css et x3d.js ; pour cela il faut les
copier dans deux nouveaux documents en les remplaçant dans
le fichier html)
72
Résultat obtenu
Figure 30 : affichage du modèle converti
73
2-Méthode hors ligne
Cette méthode est plus simple que la première, elle fait appel à un convertisseur qu’on télécharge
depuis le même site suivant la compatibilité du processeur de la machine et aussi elle utilise
l’invite des commandes, on converti le modèle avec la commande (aopt)
Figure31 : affichage du modèle avec instant reality
Figure32:conversion avec l’invite des commandes
74
Figure 33 : Utilisation de la fonction "aopt-h"
Utilisation de la fonction "aopt-h"
Exécuter "aopt-h" pour obtenir une liste complète des commandes. Pour cette conversion, les
plus importants sont: Convertir VRML X3D-XML aopt-i foo.wrl-x foo.x3d
 Convertir VRML ou X3D-XML en HTML aopt-i foo.x3d-N foo.html
 Convertir VMRL ou X3D-XML à XHTML aopt-i foo.x3d-M foo.xhtml
75
 Optimisation et construire DEF / UTILISATION réutilise lors de la conversion avec "-u"

aopt-i foo.x3d-u-N foo.html
Résultat obtenu
Figure34 : intégration du modèle dans le site web
C- PROJET 2-Réalité augmentée
76
1-Introduction générale
La réalité augmentée est la superposition d'images 2D ou 3D (Vidéo, images de synthèse, ...) en
temps réel sur une image réelle. A titre d'exemple, cette technologie permet d'afficher sur l'écran
de votre mobile ou de votre tablette, un bâtiment en 3D ou une vidéo au survol d'une plaquette,
d'une affiche, d'une carte de visite
La technologie insère des images de synthèse sur les images du monde réel grâce à l'appareil
photo d'un téléphone portable ou à des lunettes vidéo spéciales. De petites caméras situées au
milieu et à l'extérieur de chaque verre envoient des images vidéo en continu à deux écrans à
cristaux liquides sur la face interne des lunettes par l'intermédiaire d'un processeur mobile. Une
fois reliées à un smartphone ou à un ordinateur, les lunettes combinent les données informatiques
avec ce qui est filmé en direct, créant un champ de vision stéréoscopique unique sur l'écran LCD,
où les images de synthèse fusionnent avec celles du monde réel.
2-Historique et Avantages :
A / Historique
1968 : Ivan Sutherland créé le premier système de Réalité augmentée
1992 : le terme "réalité augmentée"
1993 : Industrie du cinéma
1996 : Apparition des marqueurs 2D
1997 : le premier système de Réalité Augmentée portable
1999 : 1er logiciel libre : ARToolkit
2006 : modèle de tracking hybride pour de la Réalité Augmentée extérieure
2009 : Multi-supports
2010 : Multi-technologie (GPS, instruments de mesure)
B / Avantages
77
Pour quels usages ?
 - Améliorer l'expérience client

- Attirer et séduire le consommateur
- Aider à comprendre l'utilisation d'un produit
- Aider à la décision d'achats
- Former ses salariés et franchisés
- Contrôler la qualité des produits
Image :
 Surprend la clientèle, permet le repositionnement
 Nouveauté, haut de gamme
Client :
 Nouvelle expérience : interactive et stimulante
 Service complémentaire (largeur de la gamme, personnalisation, niveau d’information

accru)
 Fidélisation (personnalisation)
 Prolonge l’expérience de visualisation
Site Web :
 Attire les internautes
 Augmente le temps passé en ligne
Qualités :
 Impact plus fort
 Créativité
 Dynamise la stratégie marketing
78
3-fonctionnement
La réalité augmentée est interdisciplinaire et s'appuie sur le traitement du signal, la vision
artificielle, la synthèse d'images, les interfaces homme-application, les technologies portables...
 Le tracking
La caméra (webcam) filme un environnement réel. Au lieu d’avoir un logiciel de tracking cette
application repère les propriétés géométriques et physiques de l'environnement et calibre la
scène.
Le calibrage est la mise en cohérence de l'ensemble des capteurs composant le système de réalité
augmentée. Cette mise en cohérence consiste à caractériser ces derniers et à déterminer les
relations mathématiques entre eux et l'environnement. Le calibrage d'un capteur consiste alors à
estimer ses paramètres intrinsèques (géométriques ou physiques) et ses paramètres extrinsèques
(localisation par rapport à un autre capteur/environnement) via un marqueur choisi et enregistré.
Le recalage
Afin d'aligner en permanence et en temps réel le virtuel sur la réalité, l'alignement impose le
calcul récurrent et précis de la localisation (position + orientation) de l'objet réel par rapport au
point de vue.
L'interaction
L'interaction de l'utilisateur avec l'environnement réel ou virtuel permet de créer un lien entre le
réel et le virtuel. L'utilisateur peut ainsi agir sur le virtuel grâce au réel.
79
Figure35 : fonctionnement de l’application
4-Integration dans le site

Notre site a pris pour objet d’intégrer des modèles 3d dans un site web, cette étape a eu succès et
pour cela nous avons pensé à passer à une autre étape qui est l’intégration du modèle dans un
environnement réel, d’où on a passé à créer une application qui prend pour objectif visualiser le
modèle sur un plan (pattern) qui suivant des paramètres fonctionne au lieu du « CAMERA-
TRACKING » qui fusionne un modèle 3d dans une vidéo/image en indiquant les axes x , y et z
qu’avec le logiciel va faire le suivi de la caméra
Au lieu de faire une intégration dans blender du modèle avec la vidéo ou l’image, on a créé cette
application avec :
 Papervision 3d :
80
C’est un Framework très puissant qui permet d’implémenter non seulement des primitives 3D comme
des sphères, cylindres ou autres dans Flash mais aussi d’importer des objets 3D sous forme de classe
AS3.
Pour importer des objets 3D en provenance de 3dstudio par exemple, on conseille Collada, très bien fait
et simple d’utilisation, qui est sous la forme d’un plugin pour Autodesk 3dstudio.
 Turtoise SVN
C'est un logiciel libre distribué selon les termes de la licence GNU GPL.
En s'intégrant dans l'explorateur de Windows, il offre aux utilisateurs de Windows une interface
graphique permettant de réaliser la plupart des tâches qu'offre SVN en ligne de commande.
L'explorateur Windows s'enrichit des fonctionnalités suivantes :
Superposition d'icône aux répertoires et fichiers permettant de visualiser instantanément l'état (à jour,
modifié, en conflit...)
Menu contextuel permettant de commettre ou d'updater, à l'échelle d'un fichier, d'une sélection de
fichiers ou encore d'un répertoire
Possibilité d'ajouter en mode détails de l'explorateur des colonnes de type numéro de révision, état
 Adobe Flex
Flex est une solution de développement créée par Macromedia en 2004 puis reprise par Adobe en 2006,
permettant de créer et de déployer des applications Internet riches (RIA) multiplateformes grâce à la
technologie Flash et particulièrement son lecteur. Son modèle de programmation fait appel à MXML
(basé sur XML) et Action Script 3.0, reposant sur ECMAScript.
La technologie Flex produit un fichier .swf intégré dans une page html. La richesse de l'interface
graphique ainsi créée présente l'inconvénient, comme toute applet, de créer ici un fichier .swf sur le
serveur un peu long à télécharger sur le poste client lors du chargement de la page.
 ARtoolkit Marker Generator
Un générateur de marqueur est un type d’équipement de test qui génère une pluralité de fréquences
d'essai pouvant être utilisés pour aligner un circuit électronique dépendant de la fréquence. Il est
souvent utilisé en combinaison avec un générateur de balayage, le circuit démodulateur, et un
oscilloscope pour générer la courbe de bande passante d'un amplificateur RF ou circuit de filtrage.
Générateur de marqueur lui-même est fondamentalement juste un ensemble d'oscillateurs de
précision, du type habituellement cristal, qui peut être commuté dans ou hors d'une borne de test de
sortie commun.
81
Figure 36: téléchargement des applications à travailler avec
82
Après avoir téléchargé ces applications et après le redémarrage acquis par turtoise SVN, on lance
l’application ARToolkit Marker generator qui est responsable de créer le marqueur imprimé sur
du papier ou n’importe quelle sorte d’outil d’affichage sur laquelle le modèle s’affiche notant
que ce marqueur doit être un carreau blanc dedans un carreau noir pour que le marker generator
le capte
Figure 37: lancement et capture du marqueur via l’ARToolkit marker genertaor
1. On passe à créer un nouveau répertoire (Action Script) dont on extrait le contenu du

PaperVision3D et on fait un clic droit et on sélectionne SVNCheckout pour télécharger
les dossiers du FlarToolKit sur la machine
2. Sous le dossier téléchargé, on copie le dossier (libspark) dedans

FLARToolKit/starterKit/org et on le colle sous le dossier d’Action Script.
3. On ouvre Adobe Flex et on crée un nouveau Action Script Projet en ajoutant le dossier
d’Action Script
4. On procède à importer des fichiers au projet qui sont :
 PaperVision3D/FlartoolKit/starterkit/data/camera_para.dat
 FLARfiles/marker. Pat (le dossier créé par MarkerGenerator)
5. On tape le code nécessaire
83
Figure 38-téléchargement de la bibliothèque des fichiers nécessaires
Figure 39 : Ajout des fichiers au projet sous adobe flex
84
Figure 40 : création du code
85
Figure 41 : test de l’application
86
Chapitre 5 :
Acquis et points forts
87
Durant ce projet, nous avons essayé de mettre en œuvre toutes les expériences qu’on a eu
durant 3 ans d’études à l’iseah du Kef ainsi que nous avons fait une bonne recherche dans le
thème du projet surtout dans la partie 3d surtout que l’acquisition du travail n’était pas assez
profonde mais pour nous comme étant des étudiants c’est une expérience notable surtout que
nous avons arrivé à un niveau comparable avec celui du Google sketchup 3d warehouse
Figure 42: Google sketchup 3d warehouse
I) Site web
88
La visualisation en 3D est une fonctionnalité attendue du web qui se généralisera probablement

d'ici quelques années. Pour l'instant quelques technologies commencent à émerger. Il existe d'une
part des technologies pouvant être qualifiée de réalité virtuelle, comme par exemple le
standard VRML, la solution SCOL de Cryo Interactive ou encore les véritables univers virtuels
réalisés par Origin Systems ou Sony et qui connaissent un certain succès. D'autres éditeurs ont
adopté une approche plus pragmatique et proposent des systèmes permettant de visualiser des
objets en 3D, à l'intérieur de sites web classique. C'est le cas du suédois Cycore et de sa
technologie Cult3D.
Donner du relief aux produits en ligne

La technologie peut permettre par exemple de mettre en place des modélisations en 3D de
produits en vente sur un site de commerce électronique. L'utilisateur peut faire tourner, zoomer
ou déplacer l'objet avec sa souris, ce qui peut être un avantage par rapport à une simple
photographie.
Il faut tout de même télécharger un plug-in pour Internet Explorer (versions 4.0 ou plus) ou
Netscape Navigator/Communicator (versions 3.0 et plus). L'éditeur revendique environ 5
millions de plug-ins téléchargés.
Ces objets 3D peuvent de plus s'intégrer dans les documents Microsoft Office ou dans les
fichiers Adobe Acrobat (pdf).
Pour les concevoir, il est possible d'utiliser le produit Cult3D Designer (téléchargeable
gratuitement), ou encore d'utiliser des modélisations conçues avec 3D Studio Max ou Maya.
Le prix de la licence permettant d'utiliser cette technologie sur un site s'échelonne de 580 euros à
17 400 euros selon le nombre de visiteurs.
La plupart de technologies obligeaient l’internaute à installer un plugin propriétaire sur leurs

machines, avaient des temps de chargement assez longs ou n'étaient tout simplement pas assez
performantes.
Avec l’arrivée du HTML5 et des nouveaux navigateurs, de nouvelles possibilités en matière

d’affichage 3D sont offertes, sans installer le moindre plugin supplémentaire
II) l’application de réalité augmentée

 En pleine croissance.
89
 La communication du future, l’information interactive en temps réel.
 Évolution, un assemblage de diverses technologies (3D, géolocalisation, Smartphones).
 Un bon outil d’aide à la vente (informations, essais).
 Support de communication (impact, buzz).
 Incontournable.
CONCLUSION
En guise en conclusion, il y’a pas mieux que ce stage de perfectionnement à la vie
professionnelle que nous avons eu l’heureuse occasion d’effectuer au sein de Cyber Media
Services nous a permis de vivre sur le quotidien de la vie professionnelle dans le domaine de
l’infographie pour fusionner entre le multimédia et le web.
S’orienter vers les applications de réalité augmentée est devenu une nécessité plus ce qu'un
plaisir que les boutiques en lignes du monde exigent dans leurs fondation. On prévoit que
l'avenir est, sans doute, pour ce mode d'interactivité qui profite des nouvelles technologies de
l’infographie et des nouveaux outils offerts par les nouvelles technologies de communication.
90
Bibliographie
(1)PFE conception et réalisation d’un logiciel de gestion du parc informatique de la BTL
I.S.A.H.K année 2009
(2) – projet réalité augmentée Msc e-commerce Université de Sherbrooke
(3) conférence Introduction to WebGL and Three.js, by James Williams

(4) WebGL et Three.js - HTML5 conférence de 2012
webograpHIE
 http://realiteplusplus.blogspot.com/
 http://www.3dcadbrowser.com/
 http://www.tripwiremagazine.com/2012/07/jquery-360-degree-image-
rotation-plugins.html
 http://www.x3dom.org/
 https://github.com/mrdoob/three.js/issues/298
 http://www.openstudio.fr/-Projets-libres-.html
91
 http://www.1stwebdesigner.com/design/free-3d-modeling-applications/
 http://www.blender.org/
 http://www.3dvia.com/
 http://www.creativeapplications.net/processing/augmented-reality-with-
processing-tutorial-processing/
 http://www.youtube.com/watch?v=i2ajFqGQ_w0
 http://www.blendswap.com/blends/category/cycles/page/35/
 http://www.youtube.com/results?
search_query=webgl&oq=webg&gs_l=youtube.1.1.0l3j0i10j0l2j0i10.13627
84.1366846.0.1370621.7.7.0.0.0.0.774.1739.0j5j1j6-
1.7.0...0.0...1ac.1.vZ3LavJOs6U
92

Création D'un Site de E-Commerce Et Application de Réalité Augmentée en Utilisant Prestashop Avec Intégration de Modèles 3D

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Création D'un Site de E-Commerce Et Application de Réalité Augmentée en Utilisant Prestashop Avec Intégration de Modèles 3D

Transféré par

Droits d'auteur :

Formats disponibles

.

Université de JENDOUBA Ministère de l’Enseignement Supérieur Institut Supérieur des Etudes

Département Arts Multimédia & Web

Création d'un site de e-commerce et application de

Elaboré par : Wertani Saber & Tibi Majed

Encadré par : - Institut : Ben Azouz Zeineb

Période : du 01/02/2013 au 30/03/2013

Le prix de la réussite est le travail acharné, le

Ce projet est effectué au sein de pour l’obtention de la licence appliquée en

Arts de multimédia et web.

MOTS CLES : x3d, blender, modèle 3d, réalité augmentée, uml

EKTEB ECH T7EB YA MAJED

Nous tenons à remercier Mr Mansouri Bilel pour nous avoir accueillis au

Nous adressons particulièrement nos remerciements à Mlle Ben Azouz

Nous souhaitons également remercier nos deux familles et spécialement

I.1 Environnement matériel :

Table des figures

Figure 1 : Diagramme de cas d’utilisation général

Figure 2 : Diagramme de séquences relatif au cas <<ajouter un utilisateur>>

Figure 3 : Diagramme de séquences relatif au cas <<supprimer un utilisateur>>

Figure 4 : Diagramme de séquences relatif au cas <<modifier un utilisateur>>

Figure 5 : Diagramme de séquences relatif au cas <<ajout d’un produit>>

Figure 6 : Diagramme de séquences relatif au cas <<suppression d’un produit>>

Figure 7 : Diagramme de séquences relatif au cas <<modification d’un produit>>

Figure 8 : Diagramme de séquences relatif au cas <<Télécharger d’un produit>>

Figure 9 : Diagramme de séquences relatif au cas <<affichage du modèle 3d dans le site>>

Figure 10 : Diagramme de séquences relatif au cas <<acheter un modèle 3d dans le site>>

Figure 11 : Diagramme de séquences relatif au cas <<s’inscrire>>

Figure 13 : Diagramme des cas d’utilisation de l’application

Figure 14 : Diagramme de séquences relatif au cas <<ajout d’un modèle à l’application>>

Figure 16 : Diagramme de séquences relatif cas <<suppression d’un modèle de l’application>>

Figure 17 : Diagramme de séquences relatif cas <<lancer l’application>>

Figure 18 : Diagramme de classes général

Figure 19: Blueprint du modèle Camaro 2013

Figure 20-21: création du modèle

Figure 22-23: Rendering du modèle

Figure 24: export en .x3d

Figure 25 : code original du fichier x3d

Figure 26 : code original du fichier x3d

Figure 27: conversion en ligne du modèle du format x3d à html

Figure 28 : conversion en ligne du modèle du format x3d à html

Figure 29 : conversion en ligne du modèle du format x3d à html

Figure 30 : affichage du modèle converti

Figure31 : affichage du modèle avec instant reality

Figure32:conversion avec l’invite des commandes

Figure 33 : Utilisation de la fonction "aopt-h"

Figure34 : intégration du modèle dans le site web

Figure35 : fonctionnement de l’application

Figure 36: téléchargement des applications à travailler avec

Figure 37: lancement et capture du marqueur via l’ARToolkit marker genertaor

Figure 38-téléchargement de la bibliothèque des fichiers nécessaires

Figure 39 : Ajout des fichiers au projet sous adobe Flex

Figure 40 : création du code

Figure 41 : test de l’application

Figure 42: Google sketchup 3d warehouse

e-commerce et application de réalité augmentée en utilisant prestashop avec

Pour ce faire, nous avons réparti notre rapport en cinq chapitres :

1. Le premier chapitre intitulé « cadre général du projet et étude de l’existant » est consacré à

2. Le deuxième chapitre intitulé « spécifications des besoins et élaboration du cahier des

4. Le quatrième chapitre intitulé « réalisation » c’est où nous préciserons les détails matériels

Cadre général du projet

1. Présentation de Cyber Media Services

Adresse : CYBER- PARC DU KEF RUE D’ALGER 7100 LE KEF