Au cours des deux dernières années, il y a eu une explosion d'intérêt entourant les technologies VR et AR. La dernière grande chose dans
conception expérimentale
, AR est également arrivé sur le Web, mais avec cette nouvelle technologie vient de nouvelles compétences et, à l'heure actuelle, il ressemble à l'Occident sauvage sans normes majeures à suivre.
[dix]
La possibilité d'afficher 3D sur le Web n'est rien de nouveau, mais si vous en évipérez, vous devez sauter dans des technologies comme trois.js ou une image a-cadre (jetez un coup d'œil à notre rond-point de
AR outils à essayer
pour une liste complète).
Quel que soit le niveau de compétence que vous êtes, cela ne fera pas beaucoup de différence si vous n'avez pas de contenu décent. Pensez aux cas d'utilisation appropriés pour AR avant de commencer. Dans cet article, nous vous montrerons comment créer une expérience multi-marqueur AR.
Sentez-vous que votre niveau de compétence n'est pas tout à fait à court? UNE
Générateur de site Web
créera un site pour vous sans la chute. Ou si vous plongez avec un site complexe, obtenez le
hébergement Web
droit.
En utilisant plusieurs marqueurs, il est possible de montrer différentes étapes d'un processus ou d'un contenu unique basé sur ce marqueur. Dans cet exemple, notre application explorera le cycle de l'eau. Aller à la page 3 pour apprendre à créer un marqueur AR personnalisé.
[dix]
01. Commencez
Ouvrir le
début
Dossier dans votre IDE et à l'intérieur de la
index.html
Page Trouver les balises de script. Tout le code dans le didacticiel ira à l'intérieur. Pour tester l'application, vous devez disposer d'un serveur et si vous souhaitez tester sur un téléphone, vous devez héberger les fichiers sur un serveur HTTPS. Ajoutez les variables initiales dans les balises de script:
var modèle1, modèle2, modèle3, compte = 0,
particules, particules, particulièrement système;
var loader = neuf trois.colladaloader ();
Pour faire fonctionner le travail de la scène AR, un modèle sera chargé. Vous verrez qu'une fois chargé, il est stocké dans la variable
modèle1
. Ceci est ensuite mis à l'échelle et cloné deux fois pour les trois étapes. Plutôt que de charger trois modèles différents, tous les ajustements à un modèle seront effectués en code pour le faire charger rapidement sur mobile.
Sur le premier modèle, le nuage se retrouve dans la scène et il se passera à une nouvelle position pour que le nuage se lève hors de la mer. Ceci est prêt à répéter pour toujours et il faudra huit secondes pour la Tween pour animer et montrer un nuage formant.
Le nuage est réduit pour être presque invisible. Une autre quinte est ajoutée au nuage et cela échoue au cloud jusqu'à sa taille normale. Avec le mouvement et la mise à l'échelle, cela donnera à l'illusion que le nuage se lève et se formant hors de la mer comme première étape du cycle de l'eau.
Le nuage suivant du deuxième modèle doit être positionné lorsque le premier nuage a terminé son animation en tant que nuage formé dans le ciel. Ceci est donné un mouvement de Tween à se positionner sur la terre, augmentant légèrement au-dessus de la montagne. Cela prendra 12 secondes pour animer comme il s'agit d'un grand mouvement.
La clé pour faire de ce travail d'illusion permet à le nuage de pleuvoir. Le cycle de l'eau a la pluie de nuages alors qu'elle déplace plus haut sur terre. Pour obtenir l'effet, un système de particules sera utilisé. Ici, la quantité de particules et du matériau de particules est créée à l'aide d'une image de pluie.
Var Textureloader = nouveau trois.Textureloader ();
Partenlocount = 1500;
particules = nouveau trois.geométrie ();
var pmaterial = neuf trois.pointsmaterial ({
Couleur: 0x3A4E5D,
Taille: 0.05,
Carte: Textureloader.load ("img / pluie.png"),
phatest: 0.3,
opacité: 0.9,
transparent: vrai});
07. Créer des gouttes de pluie
En utilisant une boucle pour boucle, 1500 gouttes de pluie peuvent être créées avec une position aléatoire X, Y, Z qui sera entre le nuage et le sol. Chaque goutte de pluie est donnée sa propre vitesse aléatoire pour rendre la pluie plus naturelle. La particule est poussée dans le sommet correct de la géométrie.
Pour (var i = 0; i & lt; partilecount; i ++) {
var px = math.random () * 60 - 30,
py = math.random () * -10,
pz = math.random () * 20 - 10;
varicelle var = neuf trois.Vector3 (px, py, pz);
particules.velocity = nouveau trois.vector3 (0, - (Math.Random () * 0,9), 0);
particules.Vertes.push (particule); }
08. Travailler sur le système de particules
Maintenant, le système de particules est créé hors de la géométrie et du matériau. Les particules sont réglées pour être triées de manière à ce que l'ordre Z soit correct, puis les particules de pluie sont faites un enfant du deuxième nuage. Partout où le nuage est à la fin, la pluie suit également, donc pas besoin d'animer la pluie après le nuage!
Dans le modèle final, le nuage est repositionné au point de fin du deuxième cycle d'animation de nuage. Ce nouveau nuage va juste s'asseoir dans le ciel et ne pas l'animation. Au lieu de cela, la rivière va animer, le modèle de la rivière est donc stocké dans une variable, prête à ajouter la Tween.
var cloud3 = modèle3.getObjectbyName ("Cloud", True);
Cloud3 = Cloud3.Children ;
cloud3.position.set (0, 50, -145);
Var River = Model3.getObjectbyName ("Rivière", True);
rivière = rivière.children ;
10. Remplissez la rivière
[dix]
[dix]
Les niveaux d'eau dans la rivière doivent se lever
À la troisième étape du cycle de l'eau, l'eau coule sur les collines, remplissant des rivières et des lacs au fur et à mesure qu'il retourne à la mer. C'est le mouvement le plus subtil tel qu'il impliquera de déplacer la hauteur de la rivière afin qu'elle semble remplir. Tout est préchargé maintenant, alors le
init
la fonction est appelée.
Le logiciel moderne peut être extrêmement puissant et tout englobant. Maya n'est pas différente, offrant une matrice déroutante aux outils, commandes et options pour vous aider à atteind..
