Transcription
1. Introduction: La plupart des récits se font par des mots et des dessins, laisse des lacunes à l'imagination du spectateur. Mais que se passe-t-il si vous, en tant que conteur, pouviez concevoir une expérience entière sans lacunes ? Et si vous pouviez partager un monde virtuel, une réalité virtuelle dans son intégralité ? Salut, je m'appelle Albert. j'ai reçu la reconnaissance internationale du design Depuis quelques années,j'ai reçu la reconnaissance internationale du designde marques comme Adobe. J' ai également enseigné à plusieurs 100 étudiants comment coder via Airbnb en gagnant plus de 50 critiques cinq étoiles. En particulier, je l'ai enseigné exactement à votre classe d'innombrables fois en personne. Pour la première fois, j'emballe ceci dans un cours en ligne pour vous. Dans ce cours, vous apprendrez les trois étapes simples pour convertir n'importe quelle scène naturelle en une belle expérience de réalité virtuelle. Vous construirez les bases de vos compétences de codage VR en regardant le monde qui vous entoure dans un autre objectif. Cette classe est faite pour tous les niveaux. Aucune expérience de codage n'est requise, et même les développeurs web expérimentés trouveront de la valeur dans la création de leur propre monde virtuel. Cette classe est pour vous, si vous êtes un codeur à la recherche de créativité, un créatif à la recherche de codage, ou un spectateur à la recherche des deux. L' objectif est de vous donner un nouvel outil, un nouvel espace en tant que conteur. Avec la réalité virtuelle, vous n'êtes plus contraint à une page ou à un écran plat. Le public est en fait dans votre monde. moment, alors que vous regardez cette vidéo, pensez à une belle scène dans la nature, puis prenez la leçon suivante. Vous n'êtes qu'à trois pas d'entrer dans le monde que vous imaginez. Commençons.
2. L'immersion en 3 étapes simples: Votre projet pour aujourd'hui est de créer une expérience de réalité virtuelle qui encapsule votre scène préférée dans la nature. Il pourrait s'agir d'un parc d'enfance, d'
une cachette estivale, de votre tout premier camping. Vous n'avez pas besoin d'un casque de réalité virtuelle pour cette classe. Un navigateur informatique standard fonctionne très bien. Cependant, pour profiter pleinement de votre monde virtuel, je recommande fortement le Google Cardboard pour 15 dollars ou si vous êtes un junkie VR, je suggère fortement l'Oculus Quest 2. Pas besoin de rendre votre scène réaliste. Votre scène doit refléter la façon dont vous la voyez, et voici pourquoi, immersion dans un monde virtuel ne signifie pas que le photoréalisme. Cela signifie que les signaux visuels, audio et de mouvement interagissent avec le spectateur de toutes ces façons et c'est une expérience virtuelle immersive. Dans les prochaines leçons, vous construirez exactement cela, une expérience immersive de réalité virtuelle en seulement trois étapes. Tout d'abord, décomposer votre scène en un certain nombre de primitives différentes, comme des cylindres et des boîtes. Deuxièmement, ajoutez de l'éclairage. Changez vos matériaux pour ajouter de la couleur, des reflets et des ombres. Troisièmement, ajouter une motion. Gardez votre public engagé avec quelque chose à regarder dans la scène. Cela pourrait être des feuilles bruissement, l'eau qui coule ou des flammes qui s'élèvent. Mon conseil pour vous, commencez petit. Une scène avec quelques objets et une mise au point claire, mais complète les trois étapes, primitives, éclairage et mouvement. Ensuite, vous pouvez passer à des scènes de
plus en plus complexes à mesure que vous devenez plus à l'aise et plus confiant. J' espère que vous avez encore cette scène
facile, venteuse, belle dans votre tête. Dans la prochaine leçon, nous commencerons à transformer votre imagination en réalité virtuelle.
3. AFrame « Hello World » (Bonjour le monde): Bienvenue à la leçon 3. Dans cette leçon, vous allez créer votre tout premier modèle de réalité virtuelle,
un modèle Hello World VR, l'aide d'une bibliothèque appelée A-Frame. Commencez par naviguer vers cette URL aaalv.in/vr 101/helloworld, cela ouvrira un nouveau projet en panne. Vous devriez voir un écran comme ma moitié droite de l'écran, des fichiers, du code et un en-tête qui est coupé de mon enregistrement. Ensuite, je suggère de placer vos glitch et vos fenêtres de sculpture côte à côte comme indiqué ici. Je vais minimiser mon navigateur de fichiers en cliquant sur la flèche qui
pointe vers la gauche afin que vous puissiez voir plus de mon code à la fois. Tu n'as pas à faire ça. Pour expliquer le code que vous regardez, vous regardez une page Web HTML. HTML est composé d'un tas de balises, comme celle affichée à gauche. Les balises ont une balise de début et une balise de fin comme illustré ici, et les balises sont désignées à l'aide de la barre oblique avant. Si vous êtes déjà un Web Dev Pro, vous pouvez ignorer la première minute où nous parlons de HTML. Ceci est votre code HTML Hello World, notez que le document entier est enveloppé d'une balise HTML. Voici une balise de début, et voici la balise de fin. À l'intérieur de la balise HTML, il y a une paire de balises head et body. Ces trois balises, HTML, head et body, définissent
plus ou moins le point de départ de tout document HTML. À l'intérieur de la balise head, nous ajoutons des propriétés invisibles de la page Web, dans ce cas, nous avons ajouté un titre pour la page Web, et nous avons également ajouté une ligne qui
nous permet de créer des expériences de réalité virtuelle en utilisant le cadre de tête. À l'intérieur du corps, nous ajoutons la scène de réalité virtuelle à l'aide d'une scène. J' ai ajouté deux lumières pour vous, nous parlerons des lumières plus en détail plus tard. Retour aux diapositives. Tout au long de cette classe, vous allez créer des objets dans ce monde virtuel en utilisant HTML, les objets les plus simples sont appelés primitives. primitives sont des formes de service de base comme les cubes, les cônes et les sphères. Dans A-Frame, vous créez une primitive à l'aide d'une balise HTML. Comme nous l'avons dit précédemment, les
balises en HTML ont une balise de début et une balise de fin comme indiqué ici. Les balises de fin sont indiquées à l'aide de la barre oblique avant. Il y a plusieurs balises différentes que nous utiliserons, toutes les balises ont les mêmes barres obliques inférieures à, supérieures à, et avant comme indiqué en noir ici. Cependant, chaque balise aura des noms de balise différents indiqués en orange ici. Par exemple, voici la balise body que nous avons vu plus tôt dans A-Frame, voici une balise box, cela crée un cube dans notre monde virtuel. Voici toutes les parties annotées, essayons ce code maintenant. Allez-y et cliquez à l'endroit où il est écrit, « Votre code ici ». Je vais cliquer sur la fin de la ligne 11, appuyez sur « Entrée », et maintenant taper moins d'une râpe en pointillés que. Notez que glitch auto se termine à la balise de fin après avoir ajouté un supérieur à. Si vous avez une faute de frappe, par
exemple, disons que j'oublie le tiret, je vais taper dans une boîte, Glitch va créer une balise de fin avec votre faute de frappe. Vous devrez corriger manuellement les balises de début et de fin. Pour prévisualiser votre modèle, allez de l'avant et cliquez en haut à gauche, « Afficher », puis cliquez sur « À côté du code ». moment, cet aperçu semble vide, vous ne voyez rien, mais c'est parce que nous sommes à l'intérieur de la boîte. Allez-y et cliquez dans cette fenêtre d'aperçu, utilisez les touches fléchées ou WASD pour vous déplacer en dehors de la boîte, et voici la boîte sur le sol. Vous pouvez également faire glisser votre appareil photo avec votre souris. Les primitives peuvent être personnalisées de différentes manières à l'aide de composants. Par exemple, voici la boîte que nous venons de définir, nous pouvons maintenant ajouter le composant shadow. Cette ombre de composant permettra à la boîte de mettre en cache et les ombres reçues, elle ne nécessite pas de valeur. Essayons ça maintenant. De retour à l'intérieur de votre code, allez-y et juste avant ce signe plus grand que, je vais taper l'ombre. Encore une fois, pour prévisualiser votre modèle, allez-y et cliquez sur la fenêtre d'aperçu puis utilisez les touches fléchées ou WASD pour vous déplacer, et vous pouvez voir maintenant il y a une ombre. Nous pouvons également changer la couleur de la boîte, nous le ferons en définissant le composant de couleur égal à la valeur bleue. Les couleurs du texte ici ne sont utilisées que pour l'accentuation. Le texte violet est le nom du composant, le texte rose est la valeur du composant. Parfois, j'ajouterai des sauts de ligne entre des propriétés comme
celle-ci, c'est juste pour que vous puissiez voir tout mon code sans que je fasse défiler horizontalement, je mette tout le code sur une ligne ou sur plusieurs lignes, le code se comporterait de la même manière. Maintenant, changeons la couleur de votre boîte en bleu, donc dans votre code sur le côté droit, je vais cliquer dessus pour minimiser notre aperçu afin que vous puissiez voir plus de mon code. Juste après cette ombre, je vais taper la couleur égale « Bleu ». Assurez-vous de ne pas oublier vos guillemets doubles. Encore une fois, pour ouvrir l'aperçu, vous pouvez aller à un spectacle et à côté du code. Cependant, dans ce cas, j'ai remarqué que l'aperçu a déjà été ouvert car il y a une boîte grise derrière ce bouton, donc je peux aller de l'avant et cliquer sur ce bouton à droite pour agrandir mon aperçu. Une fois que j'ai rédéveloppé mon aperçu cliquez dans l'aperçu et je peux me déplacer pour voir ma toute nouvelle boîte bleue avec l'ombre. Changeons la position de notre boîte. La position est définie à l'aide de trois axes. L' axe des x est horizontal, x
positif est à droite, négatif x à gauche. L' axe y est vertical, y
positif est en haut, y
négatif est en bas. Enfin, l'axe z sort de l'écran, le z
positif est vers vous, z
négatif est loin de vous, voici les trois axes illustrés. Pour modifier la position de la boîte, définissez l'attribut position. La première coordonnée est x, la deuxième coordonnée est y, et la troisième coordonnée est z. Ici, nous avons changé la coordonnée z en négatif trois, cela signifie que nous éloignons la boîte de trois unités de nous. Notez que les coordonnées sont indiquées sans virgules, juste des espaces entre chaque paire de valeurs de coordonnées. Allons de l'avant et essayons ceci dans le code, je vais encore une fois minimiser ma fenêtre d'aperçu en cliquant sur la flèche droite. Ici, je vais maintenant taper position égale « 0 0 -3". Maintenant, si je réélargis mon aperçu, vous pouvez voir la boîte sans avoir à déplacer l'appareil photo manuellement. Il est particulièrement important d'inclure des guillemets doubles autour de votre valeur d'attribut, alors n'oubliez pas ceux-ci. Pour compléter vos connaissances sur les transformations, nous couvrirons également la rotation. Les trois axes sont les mêmes qu'avant, nous pouvons tourner le long de l'axe horizontal ou X, l'axe vertical ou y, ou l'axe z qui pointe directement de l'écran vers nous. Pour comprendre de quelle façon une rotation positive tourne, utilisez votre main droite. Enroulez votre main droite en un poing et avec votre pouce pointé dans la direction positive de l'axe, la boucle de vos doigts indique une direction de rotation positive. Essayez ceci maintenant, bouclez votre main droite en un poing, sauf avec le pouce qui sort. Vous pouvez vérifier que l'axe x, et les flèches rotatives de l'axe z sont correctes ici, rotation
positive z fait pivoter l'objet vers la gauche, rotation
positive x fait pivoter l'objet vers vous. Pour modifier la rotation de la boîte, définissez l'attribut de rotation. La première coordonnée est x, la deuxième coordonnée est y, et la troisième coordonnée est z. Ici, nous avons changé la coordonnée x à neuf degrés. Pour comprendre quelle direction il s'agit, vérifiez avec le diagramme en haut à gauche et vérifiez votre main droite bouclée. Rotation x positive fait pivoter la boîte vers nous. Les coordonnées de l'avis sont indiquées sans virgules,
comme avant, juste des espaces entre chaque paire de valeurs de coordonnées. N' oubliez pas les guillemets doubles autour de votre valeur d'attribut. Essayons ceci maintenant, je vais minimiser l'aperçu, puis taper ici la rotation égale, et je vais réellement écrire 9 0 0. Allez-y et agrandissez votre aperçu, maintenant, vous pouvez voir que la boîte a tourné vers nous très légèrement. On peut aller à gauche si on n'est pas tout à fait convaincus. Maintenant, nous allons couvrir trois conseils pour garder votre code HTML organisé. Astuce numéro 1, ajouter un ID à toutes les balises, je vais vous montrer maintenant dans le code. Allez-y et minimisez votre aperçu, et à l'intérieur de votre code, je vais ajouter un autre attribut ici, ID égal joueur. Puisque nous avons juste un objet, ces idées n'aident pas trop,
cependant, dans les leçons ultérieures, nous aurons beaucoup d'objets. À ce stade, les ID sont très utiles pour trouver des objets dans notre scène. Ensuite, nous devrons expliquer ce qu'est un cadre de références afin d'introduire notre deuxième astuce. abord, je vais créer une autre entité, cette entité n'est pas en fait un objet, c'est juste un moyen pour nous de regrouper des objets ensemble. Allez-y et tapez « A-entité id égal au parent ». Je vais supprimer la balise de fin créée automatiquement, et je vais la coller juste après cette balise en bas,
la boîte d'origine que nous avons créée. Une fois que j'ai fait cela, je vais sélectionner cette ligne 13, avec un joueur, et je vais taper. Cette balise est ce que nous appelons la balise parent ou l'élément parent. Nous nous référons à la boîte comme l'étiquette enfant ou l'élément enfant. Ensuite, je vais déplacer le parent, pas la boîte vers la droite, changer la position des parents à 1 0 0. Allez-y et tapez « position égale à 1 0 0 ». Si vous ouvrez votre aperçu, vous remarquerez que la boîte a également été déplacée vers la droite. Allez-y et réduisez votre aperçu. Je vais maintenant déplacer la boîte,
ici je vais changer la valeur y dans la position à attribuer à un. Si j'ouvre mon aperçu, vous pouvez voir maintenant que la boîte s'est déplacée vers le haut. Qu' est-ce qui se passe exactement ? Allons de l'avant et regardons ce cadre de référence. Notre parent a été déplacé vers la droite comme indiqué dans le diagramme sur la moitié supérieure de la diapositive. Par rapport au parent, notre boîte a été déplacée vers le haut comme indiqué dans la moitié inférieure de la diapositive. Par conséquent, nous avons perçu la boîte enfant comme étant en haut à droite de l'écran, c'est
ce qu'on appelle un cadre de référence. Cela nous amène à notre deuxième conseil, qui est d'utiliser des entités parents pour regrouper des objets ensemble, cela garde notre code plus organisé. Vous en verrez des exemples dans les leçons ultérieures. Astuce numéro 3 est de mettre en retrait toutes les balises enfants. Voici un exemple, vous avez peut-être remarqué que Glitch m'a mis en retrait par inadvertance jusqu'à un certain point fait aussi cela pour vous, avec une indentation correcte, vous pouvez dire quelles primitives appartiennent à quels objets. C' est tout pour nos trois conseils. En haut à gauche, cliquez sur « Afficher », puis dans une nouvelle fenêtre. Dans cette nouvelle fenêtre, vous pouvez ensuite accéder à l'URL de la page Web. Vous pouvez partager cette URL avec toute personne que vous souhaitez afficher votre modèle VR. Si vous le souhaitez, vous pouvez maintenant charger votre expérience VR dans votre casque VR. Si vous avez un Google Cardboard, chargez l'URL sur votre téléphone, cliquez sur le bouton « Réalité virtuelle » en bas à droite, qui dit VR ici, puis mettez le téléphone dans Google Cardboard. Jetez un oeil à travers l'objectif. Vous devrez peut-être vous retourner pour trouver votre boîte bleue. Le processus est similaire pour un Oculus Quest, accédez au navigateur Oculus et accédez à l'URL. Le navigateur Oculus accède directement au site en mode VR. Cela conclut la leçon, vous avez beaucoup appris dans cette leçon. Voici un résumé rapide des concepts que vous avez abordés sur les primitives, les composants, la position, la rotation et le cadre de référence. Vous avez également trois conseils pour le code HTML organisé propre. Si vous souhaitez accéder aux diapositives et les télécharger, visitez cette URL. C' est tout pour votre modèle Hello World Virtual Reality. Dans la prochaine leçon, nous commencerons à construire notre version de réalité virtuelle d'une scène dans la nature.
4. Étape 1. Primitives: Bienvenue à la leçon 4. Dans cette leçon, nous commencerons à convertir une scène dans la nature en une expérience de réalité virtuelle. Commencez par naviguer vers cette URL, aaalv/vr101/helloworld. Cela ouvrira un nouveau produit dans Glitch. Vous devriez alors voir une page comme celle sur ma droite, un navigateur de fichiers, un titre qui est coupé et du code. Comme avant, je suggère de placer votre fenêtre Glitch et Skillshare côte à côte comme indiqué ici. Dans ces trois prochaines leçons, nous allons faire une version stylisée de réalité virtuelle d'un temple. J' ai tiré des photos d'un site Web appelé pixels.com, où vous pouvez trouver de haute qualité, libre d'utiliser des photos. En particulier, j'ai choisi l'une des premières photos d'un temple, un sanctuaire japonais ou d'une porte. L' essentiel de cette leçon est d'apprendre comment simplifier des images comme
celle-ci en primitives de base comme des boîtes et des cylindres. Il y a quatre parties à cette leçon. Dans la première partie, je couvrirai les primitives de base de ce temple. Voilà encore le temple. Sur la droite de l'écran, je vais cliquer sur la flèche gauche pour minimiser le navigateur de fichiers afin que vous puissiez voir plus de mon code. Allons-y et commençons. Commencez par définir une entité pour contenir votre temple. Notez que cette entité n'est pas en fait un objet dans votre monde VR, est juste un moyen pour nous de regrouper d'autres objets ensemble. Allez-y et cliquez sur la ligne 16 dans votre fichier, je vais ajouter quelques lignes supplémentaires, puis tapez a-entity ID égal à temple. C' est l'identité de notre temple. Cet espacement juste devant ici, donc j'ai ajouté quelques onglets différents, cela n'a pas d'importance, mais juste pour garder votre code propre. Je l'ai tabulé pour qu'il soit aligné avec les lignes précédentes. Maintenant que j'ai la carte d'identité, allons de l'avant et ajoutons l'ombre pour que votre temple puisse lancer et recevoir des ombres. Tous les objets enfants hériteront de la possibilité de lancer et de recevoir des ombres. Nous allons également changer la position. Je vais déplacer le temple d'un et reculer du spectateur par trois unités. Commençons maintenant par faire le pilier gauche. Pour styliser un peu ce modèle, nous allons utiliser un cône de sorte que la base du pilier soit plus large que la pointe du pilier. Avant de commencer à définir ce pilier de gauche, allez de l'avant et cliquez entre vos deux balises de début et de fin. Appuyez sur Entrée pour créer une nouvelle ligne. Je vais le faire à nouveau et puis appuyez sur l'onglet afin que maintenant vous puissiez définir vos balises enfant dans le temple. Comme toujours, commencez par identifier la primitive, l'ID du pilier gauche. Nous allons faire un cône, puis taper ID égal à pilier gauche. Je vais ajouter un signe plus grand que pour compléter le cône. Maintenant, donnez-lui un rayon au fond de 0,15. Je vais taper le radius-fond est égal à 0,15. Vous remarquerez que j'ai créé une nouvelle ligne ici au lieu d'un espace entre
les deux composants, ID et radius-bottom. Ce saut de ligne est complètement facultatif. Vous pouvez garder tout votre code sur une ligne si vous le souhaitez. J' ai choisi de créer une nouvelle ligne pour chaque composant afin que vous
n'ayez pas besoin de faire défiler horizontalement pour voir le code de ce pilier. Définissons ensuite un rayon supérieur de 0,07. Radius-top est égal à 0,07. Nous allons également lui donner une hauteur de deux parce que l'origine des temples est à y est égale à 1. Définissons maintenant la hauteur égale à deux et nous déplaçons le pilier vers la gauche de 0,65, ce qui signifie la coordonnée x de négatif 0,65. Au cas où vous vous demandez comment j'ai obtenu ces valeurs étrangement spécifiques comme 0.07. J' ai accordé ces valeurs à l'avance pour trouver la meilleure valeur. Si vous vous demandez comment choisir vous-même le meilleur rapport qualité-prix, j'ai un pourboire. Cette astuce est d'utiliser l'inspecteur A-Frame. Maintenant, parce que mon écran est déjà si petit, je vais maximiser ma fenêtre Glitch. Voici maintenant ma fenêtre Glitch maximisée. Pour utiliser l'Inspecteur A-Frame, vous devez d'abord ouvrir l'aperçu. Je vais cliquer sur le spectacle en haut à gauche à côté du code. Maintenant, vous pouvez voir mon aperçu sur le côté droit, vous pouvez voir le cône debout sur le pilier gauche de votre temple. À l'intérieur de votre fenêtre d'aperçu, cliquez à l'intérieur de votre fenêtre d'aperçu, puis appuyez sur l'option de contrôle I, tout à la fois pour lancer l'Inspecteur. Dans l'Inspecteur, vous pouvez ensuite sélectionner l'objet souhaité. Dans mon cas, je vais sélectionner le pilier. Ensuite, vous pouvez modifier n'importe quel attribut que vous voulez et voir son impact visuellement en temps réel. Pour voir plus de cet inspecteur, je vais faire glisser cette barre redimensionnable ici. Donc ici, je vais réellement changer la position y pour être plus bas ou plus haut. Je peux également changer la rotation le long de n'importe quel axe que je veux. Cependant, vous pouvez brancher ici 30, par exemple, pour voir
à quoi il ressemble tourné le long de l'axe des x de 30 degrés. Remarque importante cependant, sans configuration supplémentaire, vous ne pouvez pas enregistrer les modifications que vous effectuez à l'intérieur de l'Inspecteur. Pour plus de simplicité, vous devez apporter le moins de modifications possible dans l'inspecteur. C' est juste parce que la fonction d'exportation en haut à droite, ici, au moment de cet enregistrement, ne parvient parfois pas à exporter vos paramètres ajustés. Donc, en bref, utilisez l'Inspecteur pour voir les modifications plus rapidement, mais ajoutez manuellement vos paramètres ajustés au HTML pour être sûr. Je vais maintenant cliquer sur le retour à la scène pour que je puisse fermer l'inspecteur. Je vais également faire glisser cette fenêtre d'aperçu afin qu'elle soit un peu plus petite et ensuite je vais minimiser l'aperçu en cliquant sur la flèche. Maintenant, allons de l'avant et copier-coller pour le deuxième pilier. Juste pour être cohérent, je vais cliquer juste après cette double citation et appuyer sur Entrée. Ensuite, je vais copier et coller ce code et coller juste en dessous, puis renommer ceci en pilier droit. Le pilier droit est juste à la droite de l'origine. On va changer la valeur de l'axe des x en positif, donc 0,65. Maintenant, je vais vous montrer à la fois l'image et le code côte à côte une fois de plus. Alors voici le temple une fois de plus. Ensuite, définissez la partie inférieure des deux barres qui s'exécutent horizontalement. On va définir ici une boîte, on va lui donner une pièce d'identité, donc c'est plus bas. Ensuite, nous allons définir la largeur, la hauteur et la profondeur. Cependant, au lieu de définir la largeur, la hauteur et la profondeur séparément, j'utiliserai l'attribut scale. Cet attribut tel qu'il sonne, met à l'échelle l'objet dans chaque direction, l'
échelle de un est égale à la largeur d'un. Donc, la première coordonnée est l'échelle le long de la direction x ou en d'autres termes, la largeur. Nous allons définir l'échelle égale à deux et la largeur sera deux. Nous allons le rendre court, donc la hauteur sera 0,15 et nous allons le rendre un peu large, donc la profondeur va être de 0,1. Enfin, nous allons lui donner une position. Élevons la barre à une hauteur de 0,65. Nous allons donc taper la position égale à zéro, 0,65, zéro et assurez-vous d'ajouter un signe supérieur à et cela complétera la balise pour vous. Ensuite, nous allons définir la plus haute des deux barres fonctionnant horizontalement. Commencez par définir la primitive. Donc nous allons écrire une boîte, lui donner un ID, comme toujours. Nous allons maintenant définir l'échelle égale à 2, nous allons lui donner une largeur de 0,2, une hauteur de 0,2 et une profondeur de 0,25. Ensuite, soulevez la barre à une hauteur de 1,05, donc la position est égale à 0, 1,050. Maintenant, nous avons mis à l'échelle les objets de sorte qu'ils aient une certaine largeur, hauteur et profondeur, et nous lui avons également donné une position où nous ne modifions que la coordonnée y pour que l'objet soit plus élevé. Enfin, nous allons ajouter une casquette. Ce haut, très, très tippy partie supérieure du temple. Encore une fois, ce sera une boîte, donc je vais aller à la fin de la ligne 31 pour mon fichier, et appuyez sur Entrée, puis tapons une boîte, et nous allons lui donner un identifiant comme d'habitude, cap-plus haut. Nous allons la rendre légèrement plus large et plus profonde que la barre en dessous. Il doit être légèrement plus large, donc au lieu de 2.2, il sera 2.6. Il semble assez mince sur la photo, donc je vais lui donner une hauteur de 0,05, et il doit également être légèrement plus profond, donc nous allons lui donner une profondeur de 0,3. Nous allons élever la barre à une position légèrement plus élevée. position est égale à zéro le long de l'axe X, une coordonnée Y de 1,15, puis une coordonnée Z de zéro. Tapez plus que pour compléter votre balise. Cela complète notre temple. Jetons maintenant un coup d'oeil et voyons à quoi ressemble le modèle. Cliquez sur cet aperçu sur le côté gauche, et ici vous pouvez voir un temple. Voici maintenant le temple achevé et nous pouvons voir qu'il correspond un peu visuellement au temple sur la gauche. Si votre temple ne ressemble pas au mien, comme dans un morceau est manquant, ou qu'un morceau n'est pas à la bonne position, vérifiez que vous êtes code correspond au mien dans cette section pour le temple. Votre code peut manquer quelques guillemets doubles différents, assurez-vous d'inclure ces guillemets doubles, ou il peut manquer une balise de fin. Vous pouvez également aller à cette URL, aaalv.in/vr101 pour voir une version complète de ce code. À l'étape suivante, nous allons maintenant définir une lanterne. Je vais encore ouvrir mon code en plein écran. Sous ce temple, alors assurez-vous que c'est en dehors de la balise a-entité. Nous allons maintenant créer une lanterne. Définissez une lanterne, une entité, c'est juste un groupe, ou des objets ensemble, et nous allons identifier la lanterne avec le centre de la lanterne. Ils vont être trois lanternes, et cette lanterne sera au centre. Nous allons à nouveau lui donner la possibilité de lancer et de recevoir des ombres, et nous allons le déplacer de sorte qu'il soit zéro unité, sorte qu'il soit au centre,
et ensuite c'est aussi une unité hors du sol, puis trois unités loin de nous. Allez-y et ajoutez un signe supérieur à pour compléter votre balise. Je vais ajouter cette position juste entre mes balises de début et de fin, appuyer deux fois sur Entrée et appuyer sur Tab une fois pour que je sois à l'intérieur de cette lanterne. Terminez la lanterne avec un prisme triangulaire. Ici, nous allons identifier la primitive qui est un cône, un cône. Nous pouvons alors faire efficacement un prisme triangulaire en utilisant un cône, et en définissant le nombre de segments radiaux à quatre. Ici, nous allons d'abord identifier le cône avec id égal à cône lanterne. Nous allons lui donner, segments-hauteur égale à un, et ensuite nous allons lui donner des segments radiaux complets ; segments-radiaux égal à quatre. Encore une fois, n'oubliez pas vos doubles guillemets, et n'oubliez pas vos tirets. Nous allons maintenant définir l'ombrage flash sur true. Sinon, les ombres et l'ombrage auront toujours l'air rond ou comme un cône régulier. Je vais taper l'ombrage plat égal à vrai. Maintenant, nous pouvons définir les rayons, donc le rayon inférieur sera 0,1, puis la hauteur de cet objet sera 0,09. N' oublie pas ce signe égal comme j'ai failli le faire. Ensuite, nous allons déplacer un peu ce prisme triangulaire, donc la position est égale à zéro, 0,16, zéro. Ensuite, nous allons le faire tourner pour qu'il nous fasse face. Je vais frapper Enter ici juste après cette double citation, et il y a notre prisme triangulaire. Je vois à quoi ça ressemble, je vais ouvrir l'aperçu sur ce côté droit. Si vous ne l'avez pas déjà fait, assurez-vous de cliquer sur Afficher, puis sur À côté du Code. Si vous voyez qu'il y a une boîte grise juste derrière ce Next to The Code comme le mien a, alors cela signifie que votre aperçu est déjà ouvert alors cliquez sur la flèche juste ici. Vous pouvez voir qu'il y a un prisme triangulaire flottant entre vos vrais piliers. Maintenant, on va ajouter une boîte pour le toit de la lanterne sous ce prisme triangulaire. Dans votre code, juste après ce cône, j'ai besoin de l'onglet une fois de plus. Encore une fois, cet espace blanc, cet onglet n'a pas vraiment d'importance, c'est juste pour nous aider à voir comment le code est organisé. Nous voulons juste voir visuellement que ce cône est à l'intérieur de cette lanterne. Maintenant que nous avons ce cône, ajoutons la boîte pour le toit de la lanterne. Nous allons taper dans a-box donner un id comme avant, lantern-toit va être notre id. Maintenant, nous allons définir la largeur, la hauteur et la profondeur. Nous allons taper l'échelle égale à 0,2, 0,02, 0,2. Ensuite, donnez-lui une position qui est légèrement élevée. C' est juste un peu élevé. Ce que cela signifie est à nouveau, la largeur est de 0,2, la hauteur est de 0,02. Cela devrait être de 0,2. Encore une fois, l'échelle est la largeur de 0,2, la
hauteur de 0,02 et la profondeur de 0,2. Vous pouvez maintenant voir si vous vous déplacez dans ce monde, encore une fois, cliquez dans votre aperçu, utilisez les touches fléchées ou WST, et vous pouvez maintenant voir qu'il y a un toit juste en dessous de ce prisme triangulaire. Maintenant, ajoutons une boîte pour le fond de la lanterne. C' est la boîte que nous venons de créer, je vais passer à la fin et appuyer sur Entrée. Ensuite, nous allons maintenant créer une autre boîte ; a-box, id est égal à lantern-bottom. L' échelle est égale à une largeur de 0,15, une hauteur de 0,02 et une profondeur de 0,15. Encore une fois, ajoutez un signe supérieur à pour compléter votre balise. Maintenant, il y a le fond de la lanterne. Nous allons maintenant ajouter un orbe lumineux, une sphère aux propriétés émissives. Nous ajouterons une lumière réelle à la lanterne dans la prochaine leçon. Tapez dans a-sphère, id égal à lanterne orbe, rayon égal à 0,03. Nous allons le déplacer un peu vers le haut, un tout petit peu de 0,05, opacité est égale à un, et l'émissivité est égale au blanc. Ce que cette propriété finale fait, c'est que l'objet a l'air brillant. Vous pouvez voir cet orbe blanc juste là. On dirait qu'il est brillant. Il ne semble pas y avoir d'ombres projetées dessus. C' est ce que fait cette propriété émissive. [ inaudible] cette double citation, je vais entrer comme avant pour que nous puissions voir comment cela est organisé. Maintenant, encore une fois, si vous vous demandez comment j'ai obtenu ces valeurs vraiment, vraiment étranges 0,03, 0,05 vraiment étranges 0,03, 0,05
et 0, c'est juste moi qui réglons les valeurs à l'intérieur de l'inspecteur A-Frame, puis les copier. Maintenant, je vais retourner à l'écran partagé, et pour notre dernière et dernière étape, nous allons cloner cette lanterne deux fois de plus. On ne va pas copier et coller, on va faire quelque chose d'un peu plus propre. Retour au code en plein écran. C' était la lanterne que nous venons de créer à l'étape précédente. Nous allons maintenant cloner cette lanterne quelques fois de plus. Allez-y et tapez a-entité. Comme avant, donnez-lui un identifiant de lanterne. Nous allons définir ceci comme une lanterne qui est à gauche. Nous allons taper un nouveau composant que nous n'avons pas vu auparavant. C' est clone est égal à lanterne-centre. Vous pouvez lui donner la valeur que vous voulez. Je lui donne une position négative de 1,25. Pour indiquer une lanterne à gauche, je vais la soulever du sol, et je vais l'éloigner de nous. Voilà votre lanterne. Je vais le faire encore une fois pour qu'
on ait une troisième lanterne sur le côté droit. Je vais taper une entité a, id est égal à lanterne-droite, et clone est égal à lanterne-centre. On va cloner la lanterne centrale, et je vais lui donner une position. La position est égale à 1,5, 2, 2,5 négatif. Maintenant, nous avons trois lanternes au total. Je vais bouger ça dans un peu pour que vous puissiez voir la troisième lanterne il y a nos trois lanternes. Juste pour expliquer ce composant de clone, nous utilisons en fait ce qu'on appelle des sélecteurs CSS. Avec les sélecteurs CSS, le signe de livre ou le hashtag indique un identifiant. Vous spécifiez la lanterne d'origine à l'aide d'un identifiant de lantern-center. C' est ce que fait ce composant de clone. Nous n'avons pas abordé de nouveaux concepts dans cette leçon, mais nous avons pratiqué les concepts que nous avons appris dans la leçon précédente. [ inaudible] et rester organisé en regroupant des entités. Nous avons également couvert deux conseils supplémentaires. L' un est l'inspecteur, l'inspecteur A-Frame que nous avons vu pour régler les valeurs. Le second est les composants clonés. Cela nous permet de garder notre code organisé au lieu de copier et coller. Si vous souhaitez accéder à ces diapositives et les télécharger, visitez cette URL. Ceci conclut l'étape 1. À l'étape 2, nous allons ajouter de la couleur à votre scène.
5. Étape 2. Couleur: Bienvenue à la leçon 5. Dans cette leçon, nous allons continuer à convertir une scène dans la nature en une expérience de réalité virtuelle en particulier, nous allons ajouter de la couleur à notre expérience. Commencez par naviguer vers cette URL, aaalv.in/vr1o1/step2. Cela ouvrira un nouveau projet à Glitch. Comme avant, je suggère de placer vos fenêtres Glitch, et Skillshare côte à côte comme indiqué ici. Nous allons d'abord élargir notre connaissance des composants, puis changer les couleurs et ajouter de l'éclairage à la scène. Commençons par les composants. Voici un composant que nous avons vu auparavant. Le composant couleur a une valeur, le bleu. C' est ce qu'on appelle un composant à propriété unique. Il a une propriété qui est la valeur de la couleur. Voici un composant que nous n'avons pas vu auparavant appelé matériau. Le matériau est ce qu'on appelle un composant multi-propriétés car il prend en charge plusieurs propriétés telles que la couleur et l'opacité. Les noms de propriété sont affichés ici en bleu, comme avant, les valeurs sont affichées ici en rose. Notez que pour séparer les noms de propriété des valeurs de propriété, nous utilisons des deux-points marqués en rouge. Pour séparer les propriétés les unes des autres, nous utilisons des point-virgules marqués en rouge. Nous allons maintenant utiliser des composants multi-propriétés pour changer la couleur du ciel. Maintenant, colorions notre ciel. Voici notre code de démarrage de l'étape 2. Encore une fois, je vais minimiser le navigateur de fichiers ici. Je vais commencer à faire référence aux objets à l'intérieur de notre scène par leur ID, donc les ID que nous l'avons assignés ici. Allons de l'avant, et naviguons jusqu'à la scène. La scène est cette étiquette ici sur la ligne 13. Afoncez le ciel en définissant la propriété de couleur des composants d'arrière-plan, tapez en arrière-plan égal à couleur, puis nous allons lui donner une couleur pourpre. Ce signe de livre indique maintenant une valeur hexadécimale. Nous allons taper 0011a, c'est juste une façon de définir une couleur. Voyez à quoi ça ressemble. Allez-y et ouvrez votre fenêtre d'aperçu, cliquez sur « Afficher », à côté du code. Si vous avez déjà fait cela, alors ils seront une boîte grise derrière le code, tout comme le mien, auquel cas vous pouvez cliquer sur l'aperçu à gauche. Vous pouvez voir qu'il y a ce violet foncé en arrière-plan. Maintenant c'est tout pour le ciel. Changons ensuite la couleur du sol. Dans notre code, nous allons changer la couleur du sol pour être un indigo. Le sol est tout en bas. C' est la ligne 42 avec un plan A. J' aurais malheureusement dû lui donner une carte d'identité, mais c'est ce que c'est. Changons maintenant la couleur des motifs pour être en indigo. La couleur actuelle est blanche ou fff. Nous allons changer cela pour être un #841fde, et c'est en fait aussi une nuance de violet. moment, ça a l'air absolument horrible, mais on changera ça plus tard. Cela conclut le terrain. Ensuite, parlons de quelques lumières. Avant de continuer à coder, je vais devoir expliquer les cinq différents types de lumières que vous pouvez utiliser dans A-frame en tant que version 1.1.0. n'y a pas besoin de mémoriser ces lumières, vous pouvez toujours google A-Frame lumières pour trouver cette liste de lumières à nouveau. Dans cette leçon, je voulais trouver chaque lumière visuellement afin que vous puissiez obtenir une intuition pour quand utiliser quelle lumière. Voici la scène que nous allons utiliser. Le premier type est une lumière ambiante. C' est une lumière omniprésente. Pensez-y comme l'exposition dans votre appareil photo. Toutes les entités sont également affectées par la lumière ambiante. La baisse de l'intensité ambiante assombrira tous les objets, et l'augmentation de l'intensité éclairera tous les objets. Vous pouvez également ajouter de la couleur à la lumière ambiante pour lui donner une scène de goût chaud ou frais. Retour aux paramètres d'origine. La seconde lumière est une lumière directionnelle. Lumière directionnelle que vous pouvez penser comme le soleil. C' est la lumière qui projette l'ombre de la boîte dans cet environnement de réalité virtuelle. Baissez l'intensité de la lumière directionnelle, et vous obtenez moins de contraste dans vos ombres, et voici encore moins de contraste. Notez que j'aurais pu augmenter l'exposition globale en utilisant des lumières ambiantes. Cependant, peu importe l'intensité de mon éclairage ambiant, je ne retrouverai pas le contraste de l'ombre sans éclairage directionnel. Retour à la scène originale. Pour la lumière numéro 3, nous allons ajouter des lumières hémisphères. Pour mieux vous montrer ses effets, je vais changer ces cases en blanc. Voici l'éclairage hémisphère. Il fonctionne essentiellement comme l'éclairage ambiant, sauf que vous pouvez spécifier une couleur par le bas, et une couleur par le haut. Ici, nous avons le bleu d'en bas et le blanc d'en haut. Voici plus d'éclairage hémisphère avec du bleu d'en haut et du bleu d'en bas. Ceci est identique à l'éclairage ambiant avec le bleu. Retour à la scène originale. Pour la lumière numéro 4, nous allons ajouter des lumières ponctuelles pour mieux vous montrer ses effets, j'ai ramené l'éclairage ambiant à 0,2. Voici un feu ponctuel juste au-dessus de la boîte la plus à gauche. Remarquez que la lumière brille dans toutes les directions comme une ampoule découverte. Comme avec les lumières directionnelles, il peut projeter des ombres. Voici la même lumière ponctuelle décalée vers la droite. Retour à la scène originale. Pour la lumière numéro 5, nous ajouterons des projecteurs. Fidèle à son nom, les projecteurs projettent la lumière dans une direction comme le disent les documents A-Frame,
c' est comme le signal de chauve-souris. Pour mieux vous montrer ses effets, j'ai ramené l'éclairage ambiant à 0,2. Voici un projecteur qui brille juste sur une partie de la boîte, comme des lumières que vous attendez dans un théâtre, spectacles aquatiques de
Las Vegas ou à une exposition de musée. Voici la liste complète des lumières A-Frame disponibles en version 1.1.0. Ne vous inquiétez pas si cette liste semble écrasante, nous allons utiliser ces lumières maintenant dans un exemple. Pour commencer, vous pouvez simplement copier mon éclairage dans chaque nouveau projet que vous faites. Réglons maintenant l'éclairage de votre environnement. Allez-y et faites défiler jusqu'au haut de votre fichier. Maintenant, nous allons ajouter trois lumières au nouvel environnement. Notez qu'il y a déjà deux lumières ici. Dans mon cas, c'est sur les lignes 14 et 15. Vous pouvez aller de l'avant, et supprimer ces deux lumières. Maintenant, je vais définir une nouvelle lumière. Nous allons taper a-light, nous allons définir le type comme directionnel, nous allons changer l'intensité ou la brillance qu'il brille à 0.3. Encore une fois, n'oubliez pas vos guillemets doubles ou votre signe égal. Enfin, on va lui donner une teinte violacée. Nous allons définir la couleur égale à 6909b3. C' est une lumière violacée. Pas enfin, nous avons encore besoin d'ajouter plus de composants. Allez-y et déplacez la lumière en haut à droite. Position égale, la droite signifie un x positif, haut signifie un y positif, et vers nous signifie un z positif. Nous allons maintenant ajouter un composant multi-propriétés. Il s'agit du composant light avec l'attribut cast shadow, sorry, propriété, puis la valeur est true. Cela signifie que notre lumière peut projeter des ombres. Nous allons maintenant ajouter un signe plus grand que pour fermer notre lumière, et nous allons déplacer cela ici pour aligner ça. Quelque chose n'est pas aligné. C'est le mieux que je puisse faire. Ensuite, nous allons ajouter une autre lumière, nous allons répéter ce processus pour une autre lumière directionnelle. Nous allons taper ici a-light, type est égal à la direction, l'intensité est égale à 0,2. La couleur est blanche, et la position va être très proche de notre dernière lumière. Enfin, assurez-vous d'activer également les ombres qui sont projetées. Maintenant que j'ai ces deux lumières directionnelles, allons de l'avant, et ajoutons notre lumière ambiante pour que toute cette scène soit un peu plus lumineuse, instant un peu trop sombre. Pour notre troisième lumière, a-light, type est égal à ambiant. Allez, et ajoutez de l'intensité à 0,15, puis la couleur va être un autre violet, 6909b3. Très bien, et c'est notre scène. Il semble encore un peu sombre, donc si vous le souhaitez, vous pouvez augmenter l'intensité de l'une de ces valeurs, et voir comment elles fonctionnent. Pour l'instant, ce sont les lumières dont nous avons besoin. Maintenant, si vous êtes confus par la façon extrapoler ou d'utiliser ces lumières dans d'autres projets pour commencer, je recommande toujours d'ajouter une lumière directionnelle et une lumière ambiante à n'importe quelle scène avec laquelle vous travaillez, puis d'affiner ou en ajoutant des lumières au besoin. Vous pouvez, en fait, copier ces lumières que j'ai ici si vous le souhaitez. Pour notre dernière étape de cette leçon, nous ajouterons des lumières ponctuelles à vos lanternes comme si les lanternes brillaient. Ce sont les lumières que nous avons définies plus tôt. Allons-y, et faites défiler jusqu'à la lanterne. C' est la lanterne que nous avons définie dans la leçon précédente. On va changer la couleur de cet orbe ici. On va changer la lumière émissive de l'orbe de couleur blanche à cyan. Nous allons définir ici 09edda, n'oubliez pas ce signe de livre juste avant votre couleur. Remarquez que l'émission ne projette pas réellement la lumière, émission configure simplement cet objet pour ressembler à son éclat. Nous allons maintenant devoir ajouter une lumière. Nous ajoutons maintenant une lumière ponctuelle au centre de la lanterne également avec la même nuance de cyan. C'est une torsion de langue. Juste après notre orbe, allons de l'avant, et maintenant taper a-light, donnez-lui un ID de lanterne, et tapez va être un point. Il y a notre lumière ponctuelle, l'intensité est de 0,2. La position va être légèrement au-dessus du fond de la lanterne. Nous allons lui donner une couleur cyan comme avant, et ensuite nous allons nous assurer que cette lumière peut projeter des ombres. Rappelez-vous cette majuscule juste ici pour cette propriété, ombre coulée est très important. N' oubliez pas vos doubles guillemets, n'oubliez pas ces signes égaux. Allez-y, et terminez cette étiquette avec un signe plus grand que, et vous pouvez voir qu'il y a beaucoup d'ombres projetées, une de chacune de ces lanternes, et une des deux lumières directionnelles, et c'est tout. En haut à gauche, vous pouvez cliquer sur « Afficher », puis dans une nouvelle fenêtre, et vous pouvez partager l'URL de cette page Web avec toute personne que vous souhaitez voir votre modèle VR. Si vous le souhaitez, vous pouvez maintenant charger votre expérience VR dans votre casque VR. Si vous disposez d'un Google Cardboard, chargez l'URL sur votre téléphone, cliquez sur le bouton VR en bas à droite, puis placez votre téléphone dans le Google Cardboard. Jetez un oeil à travers l'objectif. Vous devrez peut-être vous retourner pour trouver votre temple. Le processus est similaire pour un Oculus Quest, accéder au navigateur Oculus et accéder à l'URL. Le navigateur Oculus accède directement au site en mode VR. Amuse-toi bien. Cela conclut cette leçon. Dans cette leçon, nous avons abordé les composants de plusieurs propriétés et différents types de lumières dans A-Frame. Nous avons ensuite pratiqué les deux concepts en ajoutant de la couleur et de l'éclairage à la scène. Si vous souhaitez accéder à ces diapositives et les télécharger, visitez cette URL. Ceci conclut l'étape 2, en ajoutant de la couleur. Dans la troisième et dernière étape, nous ajouterons du mouvement à votre scène.
6. Étape 3. Mouvement: Bienvenue à la leçon 6. Dans cette leçon, nous commencerons à ajouter du mouvement à votre scène. Commencez par naviguer vers cette URL, aaaiv.in/vr101/step3. Cela ouvrira un nouveau projet Glitch. Comme avant, je suggère de placer vos fenêtres Glitch et SkillShare côte à côte comme indiqué ici. Un cadre lui-même n'inclut pas la prise en charge la première étape de nos cinq étapes et du système Star. Cependant, un développeur tiers a créé un système Star que nous pouvons utiliser. Dans votre code, c'est notre troisième étape de démarrage. J' ai déjà minimisé le navigateur de fichiers et le côté gauche, et j'ai ouvert l'aperçu. Si vous n'avez pas encore ouvert l'aperçu, cliquez sur l'affichage en haut à gauche et sélectionnez Suivant du code. Sur la ligne 9, j'ai déjà ajouté une ligne de code qui vous permet d'utiliser ce système d'étoiles tiers. Nous allons maintenant ajouter ce système d'étoiles au code. Juste en dessous de votre scène a, allez-y et créez un nouveau composant, une entité. Le système étoilé est égal à un rayon de 200. Ce rayon de 200 rend certaines étoiles plus grandes et d'autres plus petites. Vous vous demandez probablement, eh bien, où est la motion ? C' est une excellente question. Il n'y a pas encore de motion. Nous devrons ajouter un peu de mouvement au sol ensuite. Le sol va être remplacé par un océan, comme sur notre photo. Comme avec un système d'étoiles,
un cadre lui-même ne supporte pas un objet océanique. Cependant, l'un des un cadre Bella de Brisk créé notion que nous pouvons utiliser. À l'intérieur de ce code, nous allons faire défiler jusqu'au bas où se trouve le sol. Ce sol n'est qu'un avion A. On va enlever cette foule pour moi, c'est la ligne 71. Je vais supprimer cet avion. Au lieu de cet avion, nous allons maintenant définir un océan. J' ai déjà créé du code pour l'océan dans un fichier appelé ocean.js. Si je clique sur le navigateur de fichiers dans le côté gauche ici, vous pouvez réellement voir le ocean.js. Pour l'instant, nous n'avons pas besoin de nous soucier du contenu de ce fichier. Nous allons fermer ce navigateur de fichiers et une fois de plus, et nous allons maintenant ajouter l'objet océan sur le bas tout. Nous allons maintenant taper A-ocean. La position est égale à 00.10. Cela va le déplacer juste un peu hors du sol. Nous allons lui donner la possibilité de recevoir et de jeter des ombres. Nous allons le rendre assez profond et assez large. Nous allons ensuite configurer la rapidité et la lenteur qu'il fluctue réellement. Vous pouvez modifier ces valeurs comme bon vous semble. J' ai défini des valeurs arbitraires ici. Je vais lui donner une amplitude de zéro, une variance d' amplitude de 0,2, vitesse de 1,5 et une variance de vitesse d'un. Mais vous pouvez changer ces valeurs cependant, vous aimeriez voir comment l'océan se comporte et réagit. Nous allons maintenant mettre son opacité à une, donc ce n'est pas transparent. Nous allons aussi fixer la densité des points dans cet espace à 50. Il y a beaucoup plus de polygones rayonnant autour pour simuler l'eau. Maintenant, vous allez lui donner une couleur, 841fte, et ajouter un signe plus grand que pour compléter votre étiquette océan. Maintenant, notre océan est une teinte pourpre. Nous allons ajouter une autre balise océanique qui est transparente pour qu'il y ait un peu plus de comportement aqueux. Donc la position a-océan équivaut à nouveau, la même position, donc elle est légèrement hors du sol. Vous allez lui donner la possibilité de recevoir des ombres, une profondeur de 50, une largeur de 50, donc la même taille. Nous allons maintenant le rendre légèrement transparent. Nous allons faire en sorte que cela ait un peu plus de variance dans l'amplitude. Nous allons lui donner la même vitesse et la même variance de vitesse. Ensuite, la densité, ou le nombre d'ondes que vous pouvez voir ici, il sera 50, puis la couleur sera de la même couleur qu'avant. Ça complète notre océan. Vous pouvez maintenant voir l'aperçu sur le côté droit. Ensuite, nous allons maintenant déplacer les lanternes. Nous allons traduire ou changer les positions de chacune des lanternes et faire pivoter. Retournez au code. Ici, allez-y et faites défiler jusqu'à l'endroit où vous êtes des lanternes. Dans ce cas, nous avons le centre lanterne ici sur la ligne 40. Pour animer un objet utilisera le composant d'animation, comme avec d'autres composants que vous avez vus précédemment, le composant d'animation possède plusieurs propriétés. Créons une animation maintenant. Dans un cadre, vous pouvez créer plusieurs animations pour un seul objet en ajoutant deux traits de soulignement et en ajoutant un identifiant unique. Dans ce cas, nous allons cliquer sur la balise de départ ici sur ligne 40 juste avant que le signe supérieur à. Encore une fois, juste avant ce signe plus grand que, nous allons appuyer sur Entrée et taper dans l'animation. Nous allons lui donner deux traits de soulignement, puis un identifiant unique. Dans ce cas, nous allons l'appeler une animation de position. Il existe trois propriétés obligatoires différentes pour n'importe quelle animation. Le premier est que vous devez spécifier la propriété que vous souhaitez animer. Dans ce cas, vous allez animer la propriété position. Nous allons taper la position de la propriété. Assurez-vous d'ajouter un point-virgule juste après cela. Il y a une deuxième propriété que nous devons ajouter, qui est la valeur de départ. Dans ce cas, la position de départ sera la position d'origine de l'objet, ou zéro un négatif trois. Ici, nous allons définir à partir de zéro un négatif trois point-virgule. La troisième valeur requise est la valeur finale. Dans ce cas, la position de fin est une position arbitraire. J' ai mis un négatif sur un négatif quatre. Ici deux est négatif un à négatif quatre. Rappelez-vous, les espaces entre ces valeurs, pas de virgules, assurez-vous qu'il y a un point-virgule. Il y a quelques propriétés d'animation supplémentaires prêtes à
définir pour s'assurer que votre lanterne continue de bouger. Nous allons définir la boucle sur true, de sorte qu'elle continue à boucler cet espace après que le deux-points soit complètement facultatif. Vous remarquerez que j'ai été incohérent avec ça, malheureusement. Mais cette boucle vraie va boucler l'animation définitivement. Si vous ne définissez pas la boucle vraie animation ne se produira qu'une seule fois. Ensuite, nous allons définir la direction ou juste dir : alterner. Cela signifie que la lanterne s'anime dans les deux sens du point A au point B et en arrière. Si vous ne définissez pas la direction pour alterner, la lanterne s'anime du point A au point B, puis saute en arrière et anime de nouveau du point A au point B. Ensuite, nous allons réduire la durée de notre dur à 8,5 secondes. Nous allons définir ici 8500 parce que cela est réellement mesuré en millisecondes. Je vais ajouter un point-virgule. Maintenant que je l'ai fait, nous en avons fini avec cette animation. Vous verrez dans l'aperçu maintenant que la lanterne bouge, n'est-ce pas ? Oui, juste ici. Maintenant, il a disparu un peu là-bas. Vous voyez que la lanterne bouge un peu. Mais nous voulons faire maintenant est de faire bouger la lanterne un peu avec une certaine rotation. Juste après cela, nous allons taper la rotation de l'animation est égale à et la propriété sera la propriété de rotation cette fois, nous allons dire qu'il est de cinq dix cinq, et à dix cinq négatifs cinq. Vous pouvez les régler à ce que vous voulez. Assurez-vous simplement que ce sont de petites valeurs afin qu'il ne tourne pas vers agressivement. Tout comme avant nous allons boucler cette animation pour toujours. Nous allons alterner les directions pour qu'il s'
anime en douceur entre deux points et la durée sera de deux secondes, donc 2000. Maintenant, nous avons terminé l'animation de rotation, mais ce que vous remarquerez, c'est que la lanterne ne ne bouge pas. Il ne tourne pas du tout. Allons-y et tirez l'inspecteur comme nous l'avons appris dans la dernière leçon pour aller avant et frapper l'option de contrôle et moi. Maintenant, si vous regardez cette lanterne, allez et cliquez sur la lanterne côté gauche ici, le , et vous verrez qu'il y a la position de l'animation comme on s'y attendait, mais il n'y a pas de rotation d'animation. Ça devrait vous dire que quelque chose ne va pas avec le nom. En fait, si vous regardez à gauche, voyez-vous l'insecte ? Le bug est vraiment subtil. Il s'agit d'un trait de soulignement au lieu de deux traits de soulignement. Comme nous l'avons déjà dit, l'animation doit être suivie de deux traits de soulignement, puis de l'identifiant. Allons de l'avant et ajoutons le deuxième trait de soulignement ici. Maintenant, la lanterne bouge clairement, à la fois en rotation et en mouvement. Encore une fois, assurez-vous de doubler le soulignement, assurez-vous que vous avez votre signe égal, vos points-virgules, deux-points, et juste en général assurez-vous que votre code correspond exactement au mien ici. C' est tout pour les lanternes. Allons de l'avant et passons à la partie suivante. Nous allons maintenant définir des animations pour l'orbe lanterne. Il va pulser et croître en intensité, puis diminuer en intensité. Allez-y et faites défiler jusqu'à l'orbe. Il y aura une lanterne orbe juste ici. Nous allons changer l'opacité de l'orbe de sorte que l'orbe semble briller brillamment puis plus faiblement alternativement. Plus tard fera la lumière elle-même éclaircir et s'assombrir en conséquence. Comme avant, nous allons spécifier la propriété à animer à la valeur de début et à la valeur de fin. Boucle infiniment et directions alternées. Ici, nous allons définir l'animation-__opacité. On va lui donner la propriété qu'on veut animer. Nous allons dire où anime d'où anime 2s. C' est la valeur n un. Nous allons le boucler pour toujours, puis alterner les directions pour l'animation. Assurez-vous d'avoir vos deux-points et point-virgules et guillemets égaux signes, double souligne toute la ponctuation. Maintenant, vous pouvez voir que l'orbe est en train de changer l'opacité. Celle-ci, celle au centre et celle à droite, tous changent. Cela conclut notre orbe lanterne à côté de moi pour réellement animer la lumière elle-même. Faire une lumière éclaircir et assombrir. Allons de l'avant et faites défiler vers le bas jusqu'à la lumière elle-même. Ici, nous voulons animer la lumière des lanternes pour égayer et assombrir périodiquement. Nous allons ajouter de l'animation. L' intensité de la distance est égale à. Alors donnons un nom à la propriété. Vous voulez dire de quoi il vient, la valeur de départ de la valeur n. Ensuite, nous allons le boucler pour toujours et définir la direction pour alterner comme avant. Maintenant, c'est l'intensité de la lumière. Quelle est la puissance de la lumière dans son rayon d'impact ? Mais nous voulons réellement étendre la lumière de sorte que sa distance ou le rayon d'impact augmente réellement. Allons de l'avant et ajoutons une autre animation. Ce sera animation_distance. Cela va changer la propriété distance de notre lumière. Nous allons commencer à partir de celui qui est par défaut pour qu' il semble affecter plus d'une région autour d'elle, boucler pour toujours et alterner les directions. Vous pouvez voir ici que seule la lumière ou la lanterne et le centre est en fait animer les deux autres lanternes dans le site ou non. Je vais aller de l'avant et animer ces deux autres lanternes aussi. N' hésitez pas à suivre et vous pouvez également les personnaliser comme vous le souhaitez. C' est tout pour la scène. Vous pouvez maintenant voir que les trois lanternes se tortillent. Si vous souhaitez accéder aux diapositives et les télécharger, visitez cette URL. Dans cette leçon, nous avons ajouté plusieurs types de signaux de mouvement. Cela conclut cette expérience de réalité virtuelle. Nous avons couvert les trois étapes nécessaires à la création d'une expérience de réalité virtuelle. Primitifs, couleur et mouvement.
7. Conclusion: Félicitations. Vous avez maintenant terminé une expérience de réalité virtuelle, que vous pouvez partager avec vos amis, famille, vraiment n'importe qui que vous voulez. Nous avons couvert les primitives, l'éclairage, le mouvement, même si vous oubliez les spécificités du code, les techniques exactes que nous utilisons. Ce que j'espère que vous retirerez, c'est à quel point ce véhicule est accessible pour raconter des histoires. Comme il est facile de commencer à créer un monde virtuel avec A-Frame. J' espère que vous êtes excité de faire l'expérience de votre projet de classe, parce que je le suis certainement. S' il vous plaît laissez-moi entrer dans votre monde virtuel, et téléchargez votre projet dans l'onglet Projets et ressources. Assurez-vous d'inclure une capture d'écran de votre monde virtuel et d'inclure un lien pour que nous puissions accéder à votre expérience de réalité virtuelle. Si vous souhaitez en savoir plus sur le codage créatif, oubliez pas de me suivre sur Skillshare pour les mises à jour lors du lancement d'une nouvelle classe. Si vous souhaitez en savoir plus sur la science des données ou l'apprentissage automatique, n'
oubliez pas de consulter mes 101 cours sur mon profil Skillshare en Python,
SQL, Data Science, Computer Vision, et bien plus encore. Félicitations encore pour être arrivé à la toute fin du cours, et jusqu'à la prochaine fois.
Alvin Wan, Research Scientist
