Les configurateurs de produits 3D sont une tendance relativement nouvelle dans le marketing en ligne et le commerce électronique. La création de telles applications Web est devenue possible grâce au développement rapide de la technologie du navigateur WebGL, qui vous permet de dessiner des graphiques 3D directement sur les pages Web des utilisateurs.
À mon avis, le seul problème qui empêche le développement de cette tendance est le manque d'outils efficaces. La plupart d'entre eux sont des moteurs tridimensionnels, qui peuvent être très utiles à un programmeur, mais pas à un artiste ordinaire. Mais il y a des exceptions: l'addon Verge3D aux packages 3ds Max et Blender offre les moyens par lesquels une personne ordinaire peut créer des configurateurs en trois dimensions. C'est cet outil que nous analyserons dans notre article.
A titre d'exemple, nous allons créer un configurateur de bijoux. Maintenant, ces configurateurs font tout pour tout le monde, donc l'exemple est plus que pertinent.
Cliquez
ici pour lancer le configurateur dans une nouvelle fenêtre.
Étant donné que Verge3D peut fonctionner avec 3ds Max et Blender, nous analyserons les deux outils. Dans cet article, nous supposons que Verge3D est déjà installé. Sinon, téléchargez et installez à partir du site du développeur. Il existe également un bon guide d'installation et des didacticiels vidéo de formation.
Notre plan
N'écoutez pas les gens qui disent que créer des configurateurs 3D est difficile et coûteux. Tout est beaucoup plus facile si vous étudiez clairement le processus:
- Nous créons du contenu (modèles et matériaux 3D).
- Nous rendons l'application interactive, c'est-à-dire sensible aux actions des utilisateurs.
- Nous publions le configurateur sur le réseau.
Regardons l'ensemble du processus dans l'ordre.
Création de contenu 3D
Cette étape est la plus difficile. Cependant, si vous avez au moins une certaine expérience de travail dans les packages 3ds Max et Blender ou un ami / employé qui a une expérience similaire, tout se fait assez rapidement.
Tout d'abord, nous créons une application 3D à l'aide du gestionnaire d'applications Verge3D. Saisissez le nom du projet dans la boîte de dialogue ci-dessous et laissez les autres paramètres tels quels.
Ensuite, vous devez créer des modèles tridimensionnels. Veuillez noter que pour de meilleurs résultats, vos objets 3D doivent être de polygone moyen. En principe, ce sera très bien si vous avez moins de 100 000 polygones par modèle.
La prochaine étape est la création de matériaux et de textures. N'oubliez pas que vous pouvez toujours vous familiariser avec les matériaux en consultant les fichiers source de l'assemblage Verge3D installé (ils se trouvent dans le répertoire
applications/ring pour la version Blender et
applications/ring_max pour la version 3ds Max).
Argent et or
Voici à quoi ressemble le matériau argenté dans Blender. La base du matériau est une texture sphérique (appelée "ring_matcap") mélangée avec une carte de bruit et une carte normale. La première est une surface «métallique» et les deux autres rendent le matériau plus réaliste. Puisque nous avons 3 métaux différents: argent, or rose et or jaune, nous faisons juste de petits ajustements de couleur dans le bloc ColorRamp du matériau montré dans l'image.
Le matériau argenté de 3ds Max a également la même apparence. C'est un peu plus simple, car il a une texture de couleur diffuse supplémentaire, qui est responsable de la couleur de la surface métallique.
Brillant
Il est temps de comprendre le matériau diamant. Pour faire briller et scintiller une caractéristique, nous l'avons modélisée en utilisant deux couches. La couche intérieure de la pierre précieuse a une structure de maille irrégulière et le matériau suivant:
Mais c'est le matériau de la couche externe de la gemme, il est responsable du bord d'un diamant:
Absolument aussi fait un diamant dans 3ds Max. L'image ci-dessous montre les deux couches de la gemme.
Je vais vous expliquer un peu comment créer des textures pour de tels matériaux. Il n'y a rien de compliqué. La plupart d'entre eux sont des textures primitives de bruit / réflexions et d'environnements, que vous pouvez créer vous-même ou trouver des images toutes faites sur Internet. L'exception est les cartes normales, qui devront être cuites à partir de modèles à haute poly.
Ajoutez de l'interactivité
Avec l'éditeur visuel Puzzles, vous n'avez pas besoin d'être programmeur pour créer un configurateur 3D décent. Utilisez simplement le puzzle «au clic» pour faire réagir l'application aux actions de l'utilisateur, «afficher» / «masquer» pour changer la forme de l'anneau et «attribuer du matériau» pour changer de matériau. Dans cette application de bijoux, nous avons 4 bagues différentes, chacune composée de trois matériaux différents, respectivement argent et or en rose et jaune.
Voici à quoi ressemble l'ensemble de l'assemblage:
Comme vous pouvez le voir, il n'y a rien de compliqué. Sur le côté gauche, il y a une unité de sélection d'anneau, et le côté droit est responsable du changement de matériaux.
En conséquence, il s'avère que l'utilisateur a le choix entre 12 options pour l'exécution de l'anneau. Imaginez combien de temps et d'efforts un bijoutier doit consacrer à la production d'une telle collection. Et ici, nous avons l'éditeur Puzzles responsable de tout (à de tels moments, vous comprenez que travailler en tant que programmeur ou en trois dimensions est assez bon).
Publier
C'est le plus simple. Toute application Verge3D peut être déployée sur vos propres ressources ou téléchargée sur l'hébergement cloud Verge3D Network. Dans ce dernier cas, cliquez simplement sur l'icône du globe vert dans le gestionnaire d'applications, et en quelques secondes / minutes, votre configurateur sera dans le cloud. Une fois le téléchargement terminé, vous verrez quelque chose comme ceci:
Dans la boîte de dialogue, vous pouvez obtenir un lien direct vers votre application, un morceau de code HTML pour intégrer le configurateur, votre propre site Web ou blog (ou une boutique en ligne déjà prête). Il existe des boutons pour partager des applications via les réseaux sociaux.
Conclusion
Selon mes observations, au cours de l'année, l'industrie du commerce en ligne a subi des changements radicaux. Le commerce de détail réduit rapidement l'espace de vente au détail et va sur Internet, et Facebook a permis de télécharger des modèles en trois dimensions.
Les solutions de configuration en trois dimensions poussent comme des champignons après la pluie, mais l'utilisation de Verge3D à ces fins présente plusieurs avantages. Parmi eux, une bonne intégration avec les progiciels de modélisation, le manque de dépendance aux solutions cloud et la flexibilité dans le développement d'applications tridimensionnelles. En général, nous vivons à une époque intéressante!