Transkripte
1. Einführung: meiste Geschichtenerzählen erfolgt durch Worte und Zeichnungen und lässt Lücken für die Fantasie des Betrachters zu füllen. Aber was wäre, wenn du als Geschichtenerzähler ein ganzes Erlebnis entwerfen
könntest, ohne Lücken zu hinterlassen? Was wäre, wenn Sie eine virtuelle Welt teilen könnten, eine virtuelle Realität in ihrer Gesamtheit? Hi, ich bin Albert. erhielt ich International Design Anerkennung letzten Jahrenerhielt ich International Design Anerkennung
von Marken wie Adobe. Ich habe auch mehreren 100 Schülern beigebracht, wie man über
Airbnb kodiert und mehr als 50 Fünf-Sterne-Bewertungen verdient. Insbesondere habe ich dies Ihrer Klasse unzählige Male persönlich exakt beigebracht. Zum ersten Mal verpacke ich das in eine Online-Klasse für Sie. In dieser Klasse lernen Sie die drei einfachen Schritte, um jede natürliche Szene in ein wunderschönes Virtual-Reality-Erlebnis zu verwandeln. Sie bauen die Grundlagen Ihrer VR-Codierungsfähigkeiten auf, während Sie die Welt um Sie herum mit einem anderen Objektiv betrachten. Diese Klasse ist für alle Niveaus gemacht. ist keine Programmiererfahrung erforderlich, und selbst erfahrene Webentwickler werden Wert bei der Schaffung einer eigenen virtuellen Welt finden. Diese Klasse ist für Sie, wenn Sie ein Programmierer auf der Suche nach Kreativität sind, eine kreative Suche nach Codierung
oder ein Zuschauer, der nach beidem sucht. Das Ziel ist es, Ihnen ein neues Werkzeug zu geben, einen neuen Raum als Geschichtenerzähler. Mit der virtuellen Realität sind Sie nicht mehr auf eine Seite oder einen Flachbildschirm beschränkt. Das Publikum ist eigentlich in eurer Welt. Im Moment, während Sie sich dieses Video ansehen, denken Sie an eine schöne Szene in der Natur und nehmen Sie dann die nächste Lektion. Du bist nur drei Schritte davon entfernt, in
die Welt einzutreten , die du dir nur vorstellen kannst. Lasst uns anfangen.
2. Eintauchen in 3 einfachen Schritten: Ihr Projekt für heute ist es,
eine Virtual-Reality-Erfahrung zu schaffen , die Ihre Lieblingsszene in der Natur einkapselt. Es könnte ein Kinderpark sein, ein Sommerversteck, Ihr erster Campingplatz überhaupt. Sie benötigen kein Virtual Reality Headset für diese Klasse. Ein Standard-Computer-Browser funktioniert einwandfrei. Allerdings, um Ihre virtuelle Welt voll zu erleben, empfehle
ich die Google Cardboard für 15 Dollar oder wenn Sie ein VR-Junkie sind, Ich würde sehr empfehlen, die Oculus Quest 2. Keine Notwendigkeit, Ihre Szene realistisch zu machen. Ihre Szene sollte reflektieren, wie Sie sie sehen, und deshalb bedeutet das
Eintauchen in eine virtuelle Welt nicht nur Photorealismus. Es bedeutet, dass visuelle, Audio-
und Motion-Cues auf all diese Weise auf den Betrachter eingreifen , und das ist ein immersives virtuelles Erlebnis. In den nächsten Lektionen erstellen
Sie genau das, ein immersives Virtual-Reality-Erlebnis in nur drei Schritten. zunächst Ihre Szene in eine Reihe verschiedener Grundkörper auf, wie Zylinder und Kisten. Zweitens, fügen Sie Beleuchtung hinzu. Ändern Sie Ihre Materialien, um Farbe, Reflexionen und Schatten hinzuzufügen. Drittens, füge Bewegung hinzu. Halten Sie Ihr Publikum mit etwas beschäftigt, das Sie in der Szene betrachten können. Dies könnte Blätter Rascheln, Wasser fließt oder Flammen steigen. Mein Rat an Sie, fangen Sie klein an. Eine Szene mit wenigen Objekten und einem klaren Fokus, aber alle drei Schritte,
Grundkörper, Beleuchtung und Bewegung abschließen . Dann können Sie zu immer komplexeren Szenen abschließen, wie Sie komfortabler und selbstbewusster werden. Ich hoffe, Sie haben immer noch diese leichte, luftige, schöne Szene in Ihrem Kopf. In der nächsten Lektion werden
wir anfangen, Ihre Fantasie in die virtuelle Realität zu verwandeln.
3. AFrame „Hello World“: Willkommen bei Lektion 3. In dieser Lektion erstellen Sie Ihr allererstes Virtual Reality-Modell, ein Hello World VR-Modell, mit einer Bibliothek namens A-Frame. Beginnen Sie mit der Navigation zu dieser URL aaalv.in/vr 101/helloworld, dies wird ein neues Projekt in Glitch öffnen. Sie sollten einen Bildschirm wie meine rechte Bildschirmhälfte sehen, einige Dateien, einen Code und einen Header, der meine Aufnahme abgeschnitten ist. Dann schlage ich vor, Ihre Panne und Skulptur Fenster nebeneinander zu platzieren, wie hier gezeigt. Ich werde meinen Datei-Browser minimieren, indem ich auf den Pfeil klicke, der nach links
zeigt, so dass Sie mehr von meinem Code auf einmal sehen können. Du musst das nicht tun. Um den Code zu erklären, den Sie betrachten, schauen
Sie sich eine HTML-Webseite an. HTML besteht aus einer Reihe von Tags, wie die auf der linken Seite gezeigt. Tags haben ein Start-Tag und ein End-Tag, wie hier gezeigt, und Tags werden mit dem Schrägstrich bezeichnet. Wenn Sie bereits ein Web Dev Pro sind, können
Sie in der ersten Minute oder so überspringen, wo wir über HTML sprechen. Dies ist Ihr Hello World HTML-Code,
beachten Sie, dass das gesamte Dokument mit einem HTML-Tag umschlossen ist. Hier ist ein Start-Tag, und hier ist das End-Tag. Innerhalb des HTML-Tags gibt es ein Paar Kopf- und Körper-Tags. Diese drei Tags, HTML, Kopf und Körper, definieren
mehr oder weniger den Ausgangspunkt eines HTML-Dokuments. Innerhalb des head-Tags fügen
wir unsichtbare Eigenschaften der Webseite hinzu, in diesem Fall haben
wir einen Titel für die Webseite hinzugefügt, und wir haben auch eine Zeile hinzugefügt, die es
uns ermöglicht, Virtual Reality Erlebnisse mit Kopf-Frame zu erstellen. Innerhalb des Körpers fügen wir die Virtual Reality-Szene mit a-scene hinzu. Ich habe zwei Lichter für Sie hinzugefügt, wir werden später über Lichter sprechen. Zurück zu den Folien. Während dieser Klasse erstellen Sie Objekte in dieser virtuellen Welt mit HTML, die einfachsten Objekte werden als Primitive bezeichnet. Primitive sind grundlegende Duty-Formen wie Würfel, Kegel und Kugeln. In A-Frame erstellen Sie ein Primitiv mithilfe eines HTML-Tags. Wie bereits erwähnt, haben
Tags in HTML ein Start-Tag und ein End-Tag, wie hier gezeigt. End-Tags werden mit dem Schrägstrich bezeichnet. Es gibt mehrere verschiedene Tags, die wir verwenden werden, alle Tags haben die gleichen kleiner als, größer als, und Schrägstriche, wie hier in schwarz angegeben. Jedes Tag hat jedoch einen anderen Tag-Namen, die hier in Orange gekennzeichnet sind. Zum Beispiel, hier ist das body-Tag, das wir früher in A-Frame gesehen haben, hier ist ein Box-Tag, das einen Würfel in unserer virtuellen Welt erstellt. Hier sind alle Teile kommentiert, lassen Sie uns diesen Code jetzt versuchen. Gehen Sie weiter und klicken Sie rechts an der Stelle, an der es steht: „Ihr Code hier“. Ich werde auf das Ende von Zeile 11 klicken, „Enter“ drücken und jetzt weniger als eine gestrichelte Box Reibe eingeben als. Beachten Sie, dass der Fehler automatisch zum Ende des Tags abgeschlossen wird, nachdem wir ein größeres als hinzugefügt haben. Wenn Sie einen Tippfehler haben, sagen wir, ich vergesse den Bindestrich, ich gebe ein Feld ein, Glitch erstellt ein End-Tag mit Ihrem Tippfehler. Sie müssen sowohl die Start- als auch die End-Tags manuell korrigieren. Um eine Vorschau Ihres Modells anzuzeigen, gehen Sie weiter und klicken Sie oben links auf „Anzeigen“, und klicken Sie dann auf „Neben dem Code“. Im Moment sieht diese Vorschau leer aus, Sie sehen nichts, aber das liegt daran, dass wir in der Box sind. Gehen Sie voran und klicken Sie in dieses Vorschaufenster, verwenden Sie die Pfeiltasten oder WASD, um außerhalb der Box zu bewegen, und hier ist die Box auf dem Boden. Sie können auch mit der Maus ziehen, um die Kamera zu drehen. Primitive können mit Komponenten auf unterschiedliche Weise angepasst werden. Zum Beispiel, hier ist die Box, die wir gerade definiert
haben, wir können jetzt die Schattenkomponente hinzufügen. Dieser Komponentenschatten ermöglicht es dem Feld, Schatten zwischenzuspeichern und zu empfangen, es erfordert keinen Wert. Versuchen wir es jetzt. Zurück in Ihren Code, gehen Sie vor und direkt vor diesem Größer-als-Zeichen werde
ich Schatten eingeben. Wieder einmal, um eine Vorschau Ihres Modells, gehen Sie voran und klicken Sie auf das Vorschaufenster und dann mit den Pfeiltasten oder WASD, um sich zu bewegen, und Sie können sehen, jetzt gibt es einen Schatten. Wir können auch die Farbe der Box ändern, wir werden dies tun, indem wir die Farbkomponente gleich dem blauen Wert setzen. Die Textfarben hier werden nur zur Hervorhebung verwendet. Der violette Text ist der Komponentenname, der rosafarbene Text ist der Komponentenwert. Manchmal füge ich Zeilenumbrüche zwischen Eigenschaften wie
diesen hinzu, das ist nur so, dass Sie all meinen Code sehen können, ohne dass ich horizontal scrollen muss, ob ich den gesamten Code in einer Zeile oder in mehreren Zeilen lege, der Code würde sich auf die gleiche Weise. Nun ändern wir die Farbe Ihrer Box in Blau, also werde
ich in Ihrem Code auf der rechten Seite darauf klicken, um unsere Vorschau zu minimieren, damit Sie mehr von meinem Code sehen können. Gleich nach diesem Schatten werde
ich Farbe gleich „Blau“ eingeben. Stellen Sie sicher, dass Sie Ihre doppelten Anführungszeichen nicht vergessen. die Vorschau zu öffnen, können
Sie erneut zu einer Show und neben dem Code gehen. In diesem Fall
habe ich jedoch bemerkt, dass die Vorschau bereits geöffnet wurde da sich hinter dieser Schaltfläche ein graues Feld befindet, so dass ich fortfahren und auf diese Schaltfläche rechts klicken kann, um meine Vorschau erneut zu erweitern. Sobald ich meine Vorschau wieder erweitert habe, klicken Sie in die Vorschau und ich kann mich bewegen, um meine brandneue blaue Box mit dem Schatten zu sehen. Lassen Sie uns die Position unserer Box ändern. Die Position wird mit drei Achsen definiert. Die X-Achse ist horizontal, positive x ist rechts, das negative x ist links. Die Y-Achse ist vertikal, positiv y ist nach oben, negativ y ist nach unten. Schließlich ragt die z-Achse aus dem Bildschirm, positive z ist zu Ihnen, negative z ist weg von Ihnen, hier sind die drei Achsen illustriert. Um die Position des Quaders zu ändern, legen Sie das Positionsattribut fest. Die erste Koordinate ist x, die zweite Koordinate ist y und die dritte Koordinate ist z Hier haben wir die Z-Koordinate in negative drei geändert, das
bedeutet, dass wir die Box drei Einheiten von uns weg bewegen. Beachten Sie, dass die Koordinaten ohne Kommas bezeichnet werden, nur Leerzeichen zwischen jedem Paar von Koordinatenwerten. Lassen Sie uns voran und versuchen Sie dies im Code, ich werde mein Vorschaufenster noch einmal minimieren, indem Sie auf den Pfeil nach rechts klicken. Hier werde ich jetzt Position gleich „0 0 -3" eingeben. Wenn ich nun meine Vorschau erneut expandiere, können
Sie die Box sehen, ohne die Kamera manuell verschieben zu müssen. Es ist besonders wichtig, doppelte Anführungszeichen um Ihren Attributwert zu schließen, also vergessen Sie diese nicht. Um Ihr Wissen über Transformationen zu vervollständigen, decken wir auch die Rotation ab. Die drei Achsen sind die gleichen wie zuvor, wir können entlang der horizontalen oder x-Achse,
der vertikalen oder y-Achse
oder der z-Achse drehen , die gerade aus dem Bildschirm zu uns zeigt. Um zu verstehen, wie sich eine positive Rotation dreht, verwenden Sie Ihre rechte Hand. Locken Sie Ihre rechte Hand in eine Faust und mit dem Daumen in die Achse positive Richtung zeigt
die Locke Ihrer Finger eine Richtung der positiven Rotation an. Probieren Sie das jetzt aus, rollen Sie Ihre rechte Hand in eine Faust, außer wenn der Daumen heraussteht. Sie können überprüfen, ob die x-Achse und die z-Achse rotierenden Pfeile hier korrekt sind, positive z-Rotation dreht das Objekt nach links, positive x-Drehung dreht das Objekt zu Ihnen. Um die Drehung des Quaders zu ändern, legen Sie das Rotationsattribut fest. Die erste Koordinate ist x, die zweite Koordinate ist y und die dritte Koordinate ist z. Hier haben wir die x-Koordinate auf neun Grad geändert. Um zu verstehen, welche Richtung das ist, überprüfen Sie mit dem Diagramm oben links und überprüfen Sie Ihre gekräuselte rechte Hand. Positive x-Drehung dreht die Box zu uns. Beachten Sie, dass Koordinaten ohne Kommas bezeichnet werden, genau wie zuvor, nur Leerzeichen zwischen jedem Paar von Koordinatenwerten. Vergessen Sie nicht doppelte Anführungszeichen um Ihren Attributwert. Lassen Sie uns das jetzt versuchen, ich werde
die Vorschau minimieren und dann hier die Drehung gleich eingeben, und ich werde tatsächlich 9 0 0 schreiben. Gehen Sie voran und erweitern Sie Ihre Vorschau erneut, jetzt können
Sie sehen, dass die Box sich sehr leicht auf uns gedreht hat. Wir können nach links gehen, wenn wir nicht ganz überzeugt sind. Jetzt werden wir drei Tipps zur Organisation Ihres HTML-Codes behandeln. Tipp Nummer 1, füge eine ID zu allen Tags hinzu, ich werde dir jetzt im Code zeigen. Gehen Sie voran und minimieren Sie Ihre Vorschau, und innerhalb Ihres Codes, werde
ich hier ein anderes Attribut hinzufügen, ID gleich Player. Da wir nur ein Objekt haben, helfen
diese Ideen nicht zu sehr, aber in späteren Lektionen werden wir viele Objekte haben. An diesem Punkt sind IDs sehr hilfreich, um Objekte in unserer Szene zu finden. Als nächstes müssen wir erklären was ein Rahmen von Referenzen, um unseren zweiten Tipp einzuführen. Zuerst werde ich eine andere Entität erstellen, diese Entität ist kein Objekt, es ist nur eine Möglichkeit für uns, Objekte zusammen zu gruppieren. Gehen Sie voran und geben Sie „A-Entity ID entspricht übergeordnetem“ ein. Ich werde das automatisch erstellte End-Tag löschen, und ich werde es direkt nach diesem Tag auf der Unterseite einfügen,
das ursprüngliche Feld, das wir erstellt haben. Sobald ich das getan habe, werde ich diese Zeile auswählen 13, mit einem Spieler, und ich werde tippen. Dieses Tag ist, was wir das übergeordnete Tag oder übergeordnetes Element nennen. Wir beziehen uns auf das Feld als untergeordnetes Tag oder untergeordnetes Element. Dann verschiebe ich das übergeordnete Element, nicht das Feld nach rechts, ändere die übergeordnete Position auf 1 0 0. Gehen Sie voran und geben Sie „Position gleich 1 0 0" ein. Wenn Sie Ihre Vorschau öffnen, werden
Sie feststellen, dass das Feld nun ebenfalls nach rechts verschoben wurde. Gehen Sie weiter und minimieren Sie Ihre Vorschau. Ich werde jetzt die Box nach oben verschieben, hier werde ich den y-Wert in der Position ändern, um einem Attribut zuzuordnen. Wenn ich meine Vorschau öffne, sehen
Sie jetzt, dass die Box nach oben verschoben wurde. Was genau ist los? Gehen wir weiter und schauen uns diesen Bezugsrahmen an. Unser Elternteil wurde nach rechts verschoben, wie im Diagramm auf der oberen Hälfte der Folie gezeigt. Relativ zum übergeordneten Element wurde
unsere Box nach oben verschoben, wie in der unteren Hälfte der Folie gezeigt. Infolgedessen haben wir die untergeordnete Box als oben rechts auf dem Bildschirm wahrgenommen, dies ist ein Referenzrahmen. Dies führt uns zu unserem zweiten Tipp, der darin besteht, übergeordnete Entitäten zu verwenden, um Objekte zusammenzufassen Dies hält unseren Code organisierter. Beispiele dafür sehen Sie in späteren Lektionen. Tipp Nummer 3 ist, alle untergeordneten Tags einzurücken. Hier ist ein Beispiel, Sie haben vielleicht bemerkt, dass ich
versehentlich bis zu einem gewissen Grad einrückte, Glitch dies auch für Sie tut, mit richtiger Einrückung können Sie feststellen, welche Primitive zu welchen Objekten gehören. Das war's für unsere drei Tipps. Klicken Sie oben links auf „Anzeigen“ und dann in einem neuen Fenster. In diesem neuen Fenster können Sie dann auf die URL der Webseite zugreifen. Sie können diese URL für alle freigeben, die Sie Ihr VR-Modell anzeigen möchten. Wenn Sie möchten, können Sie jetzt Ihr VR-Erlebnis in Ihr VR-Headset laden. Wenn Sie einen Google Cardboard haben, laden Sie die URL auf Ihrem Telefon, klicken Sie unten rechts auf die Schaltfläche „Virtual Reality“,
auf der VR hier steht, legen
Sie das Telefon dann in Google Cardboard ein. Werfen Sie einen Blick durch die Linse. Möglicherweise müssen Sie sich umdrehen, um Ihre blaue Box zu finden. Der Prozess ist ähnlich für eine Oculus Quest, greifen Sie auf den Oculus Browser und greifen Sie auf die URL zu. Der Oculus Browser greift direkt im VR-Modus auf die Website zu. Damit ist die Lektion abgeschlossen, Sie in dieser Lektion viel gelernt haben. Dies ist eine kurze Zusammenfassung der Konzepte, die Sie für Grundkörper,
Komponenten, Position, Drehung und Bezugsrahmen angefasst haben . Sie haben auch drei Tipps für sauberen organisierten HTML-Code. Wenn Sie auf die Folien zugreifen und diese herunterladen möchten, besuchen Sie diese URL. Das ist es für Ihr Hello World Virtual Reality Modell. In der nächsten Lektion beginnen wir mit der Erstellung unserer Virtual Reality Version einer Szene in der Natur.
4. Schritt 1: Primitives: Willkommen bei Lektion 4. In dieser Lektion werden wir anfangen, eine Szene in der Natur in eine virtuelle Realität zu verwandeln. Navigieren Sie zunächst zu dieser URL, aaalv/vr101/helloworld. Dies wird ein neues Produkt in Glitch öffnen. Sie sollten dann eine Seite wie die auf meiner rechten Seite sehen, einen Dateibrowser, eine abgeschnittene Überschrift und einen Code. Wie zuvor schlage ich vor, Ihr Glitch und
Skillshare Fenster nebeneinander zu platzieren , wie hier gezeigt. In diesen nächsten drei Lektionen erstellen
wir eine stilisierte Virtual-Reality-Version eines Tempels. Ich habe Fotos von einer Website namens pixels.com gezogen
, auf der Sie hochwertige,
kostenlose Fotos finden können . Insbesondere habe ich eines der ersten Fotos eines Tempels, eines japanischen Schreins oder
eines Tores ausgewählt. Der Takeaway aus dieser Lektion ist, zu lernen, wie man Bilder wie diese
in grundlegende Primitive wie Boxen und Zylinder vereinfachen kann. Es gibt vier Teile zu dieser Lektion. In Teil 1 werde ich die grundlegenden Primitiven für diesen Tempel behandeln. Hier ist wieder der Tempel. Auf der rechten Seite des Bildschirms klicke
ich auf den Pfeil nach links, um
den Dateibrowser zu minimieren , damit Sie mehr von meinem Code sehen können. Lasst uns weitermachen und loslegen. Beginnen Sie damit, eine Entität zu definieren, die Ihren Tempel enthält. Beachten Sie, dass diese Entität kein Objekt in Ihrer VR-Welt
ist, ist nur eine Möglichkeit für uns, andere Objekte zusammen zu gruppieren. Gehen Sie voran und klicken Sie auf Zeile 16 in Ihrer Datei, ich werde ein paar zusätzliche Zeilen hinzufügen und dann A-Entity ID gleich Tempel eingeben. Das ist die ID unseres Tempels. Dieser Abstand rechts vorne hier, also habe ich ein paar verschiedene Tabs hinzugefügt, das spielt keine Rolle, aber nur um Ihren Code sauber zu halten. Ich habe es mit Tabs versehen, so dass es mit den vorherigen Zeilen ausgerichtet ist. Jetzt, da ich den Ausweis habe, lass uns weitermachen und den Schatten hinzufügen, damit dein Tempel Schatten werfen und erhalten kann. Alle untergeordneten Objekte erben die Fähigkeit, Schatten zu werfen und zu empfangen. Wir werden auch die Position ändern. Ich werde den Tempel um eins nach oben und um drei Einheiten vom Betrachter weg bewegen. Lassen Sie uns jetzt beginnen, indem wir die linke Säule machen. Um dieses Modell ein wenig zu stilisieren, verwenden
wir einen Kegel, so dass die Basis der Säule breiter ist als die Spitze der Säule. Bevor wir mit der Definition dieser linken Säule beginnen, gehen Sie voran und klicken Sie zwischen den beiden Start- und End-Tags. Drücken Sie Enter, um eine neue Zeile zu erstellen. Ich werde das noch einmal tun und dann Tab drücken, so dass
Sie jetzt Ihre Kinder-Tags innerhalb des Tempels definieren können. Beginnen Sie wie immer mit der Identifizierung des Primitivs, der ID der linken Säule. Wir werden einen Kegel machen und dann die ID gleich der Pfeiler-links eingeben. Ich werde ein Größer-als-Zeichen hinzufügen, um den Kegel zu vervollständigen. Geben Sie ihm nun einen Radius auf der Unterseite von 0,15. Ich werde Radius-unten gleich 0,15 eingeben. Sie werden feststellen, dass ich hier eine neue Zeile erstellt habe, anstatt nur ein Leerzeichen zwischen den beiden Komponenten, ID und Radius-Boden. Dieser Zeilenumbruch ist völlig optional. Sie könnten Ihren gesamten Code in einer Zeile behalten, wenn Sie möchten. Ich habe mich dafür entschieden, eine neue Zeile für jede Komponente zu erstellen, damit Sie nicht horizontal scrollen müssen, um den Code für diese Säule anzuzeigen. Definieren wir als nächstes einen oberen Radius von 0,07. Radius-Top entspricht 0,07. Wir geben ihm auch eine Höhe von zwei, weil der Tempelursprung bei y gleich 1 ist. Lassen Sie uns nun die Höhe gleich zwei definieren und wir verschieben die Säule nach links um 0,65, was x-Koordinate von negativem 0,65 bedeutet. Für den Fall, dass Sie sich fragen, wie ich diese seltsam spezifischen Werte wie 0,07 bekommen habe. Ich habe diese Werte vorher abgestimmt, um den besten Wert zu finden. Wenn Sie sich fragen, wie Sie den besten Wert selbst auswählen können, habe ich einen Tipp. Dieser Tipp ist, den A-Frame Inspector zu verwenden. Nun, weil mein Bildschirm schon so klein ist, werde
ich mein Glitch-Fenster maximieren. Hier ist jetzt mein Glitch Fenster maximiert. Um den A-Frame-Inspektor zu verwenden, müssen
Sie zuerst die Vorschau öffnen. Ich werde auf die obere linke Show neben dem Code klicken. Jetzt siehst du meine Vorschau auf der rechten Seite, du siehst den einen Kegel, der die linke Säule für deinen Tempel aufsteht. innerhalb Ihres Vorschaufensters Klicken Sieinnerhalb Ihres Vorschaufenstersin Ihr Vorschaufenster und drücken Sie dann die Steuerungsoption I, um den Inspektor zu starten. Im Inspektor können Sie dann das gewünschte Objekt auswählen. In meinem Fall werde ich die Säule auswählen. Dann können Sie jedes gewünschte Attribut ändern und seine Auswirkungen visuell in Echtzeit sehen. Um mehr von diesem Inspector zu sehen, ziehe
ich diesen skalierbaren Balken hier. Also hier werde ich tatsächlich die y-Position ändern, um niedriger oder höher zu sein. Ich kann auch die Drehung entlang einer beliebigen Achse ändern. Möglicherweise möchten Sie jedoch hier 30 einstecken,
um zu sehen, wie es um 30 Grad entlang der X-Achse gedreht aussieht. Wichtiger Hinweis: Ohne zusätzliche Einrichtung können
Sie die Änderungen, die Sie innerhalb des Inspektors vornehmen, nicht wirklich speichern. Der Einfachheit halber sollten Sie im Inspektor so wenige Änderungen wie möglich vornehmen. Dies liegt nur daran, dass die Exportfunktion oben rechts, hier, zum Zeitpunkt dieser Aufnahme, tatsächlich manchmal nicht Ihre angepassten Einstellungen exportieren kann. Kurz gesagt, verwenden Sie den Inspektor, um Änderungen schneller zu sehen, aber fügen Sie Ihre angepassten Einstellungen manuell zu HTML hinzu, um sicher zu sein. Ich werde jetzt auf zurück zur Szene klicken, damit ich den Inspektor schließen kann. Ich werde auch dieses Vorschaufenster ziehen, so dass ein bisschen
kleiner ist und dann werde ich die Vorschau minimieren, indem ich auf den Pfeil klicke. Jetzt gehen wir weiter und kopieren und einfügen für die zweite Säule. Nur um konsistent zu sein, klicke ich direkt nach diesem doppelten Anführungszeichen und drücke Enter. Dann werde ich
diesen Code kopieren und einfügen und direkt unten einfügen und dann in Säulen-rechts umbenennen. Die rechte Säule befindet sich rechts vom Ursprung. Wir werden den X-Achsenwert auf positiv ändern, also 0,65. Jetzt werde ich Ihnen das Bild und den Code noch einmal nebeneinander zeigen. Also hier ist der Tempel noch einmal. Definieren Sie als Nächstes den unteren der beiden horizontal verlaufenden Balken. Wir werden hier A-Box definieren, wir werden ihm eine ID geben, also ist das bar-lower. Dann werden wir die Breite, Höhe und Tiefe einstellen. Anstatt die Breite, Höhe
und Tiefe separat zu definieren, verwende ich jedoch das Skalierungsattribut. Dieses Attribut, wie es klingt, skaliert das Objekt in jede Richtung, Maßstab von eins ist gleich Breite von eins. Die erste Koordinate ist also die Skala entlang der x-Richtung oder mit anderen Worten die Breite. Wir werden Maßstab gleich zwei setzen und die Breite wird zwei sein. Wir werden es kurz machen, also wird die Höhe
0,15 betragen und wir werden es ein wenig breit machen, also wird die Tiefe 0,1 betragen. Endlich werden wir ihm eine Position geben. Lassen Sie uns die Messlatte auf eine Höhe von 0,65 heben. Also werden wir in Position gleich Null, 0,65, Null eingeben und stellen Sie sicher, dass Sie ein Größer-als-Zeichen hinzufügen und das wird das Tag für Sie vervollständigen. Als nächstes werden wir die höhere der beiden Balken definieren, die horizontal verlaufen. Beginnen Sie mit der Definition des Grundkörpers. Also werden wir eine Box schreiben, ihr einen Ausweis geben, genau wie immer. Wir werden jetzt Maßstab gleich 2 setzen, wir werden ihm eine Breite von 0,2,
eine Höhe von 0,2 und eine Tiefe von 0,25 geben. Dann heben Sie den Balken auf eine Höhe von 1,05, also Position gleich 0, 1,050. Jetzt haben wir die Objekte so skaliert, dass sie etwas Breite, Höhe und Tiefe haben,
und wir haben auch eine Position gegeben, an der wir nur die y-Koordinate
ändern, so dass das Objekt höher ist. Endlich werden wir eine Kappe hinzufügen. Dieser obere, sehr, sehr kippy obere Teil des Tempels. Wieder einmal wird dies eine Box sein, also gehe ich zum Ende von Zeile 31 für meine Datei und drücke Enter,
dann lasst uns a-Box eingeben , und wir werden ihm eine ID geben, genau wie üblich, cap-höher. Wir machen es etwas breiter und tiefer als die Leiste darunter. Es muss etwas breiter sein, also statt 2.2 wird es 2.6 sein. Es sieht ziemlich dünn auf dem Foto aus, also werde ich ihm eine Höhe von 0,05 geben, und es muss auch etwas tiefer sein, also geben wir ihm eine Tiefe von 0,3. Wir werden die Messlatte auf eine etwas höhere Position heben. Position ist gleich Null entlang der X-Achse, einer Y-Koordinate von 1,15 und dann einer Z-Koordinate von Null. Geben Sie größer als ein, um das Tag zu vervollständigen. Das vervollständigt unseren Tempel. Werfen wir nun einen Blick und sehen, wie die Vorlage aussieht. Klicken Sie auf diese Vorschau auf der linken Seite, und hier sehen Sie einen Tempel. Hier ist nun der fertige Tempel und wir können sehen , dass er etwas optisch zum Tempel auf der linken Seite passt. Wenn dein Tempel nicht wie meins aussieht, wie in einem Stück fehlt oder ein Stück nicht an der richtigen Position ist, vergewissern Sie sich, dass der Code mir in diesem Abschnitt für den Tempel entspricht. Ihrem Code fehlen möglicherweise ein paar verschiedene doppelte Anführungszeichen, stellen Sie sicher, dass Sie diese doppelten Anführungszeichen enthalten, oder es fehlt möglicherweise ein Endtag. Sie können auch zu dieser URL
aaalv.in/vr101 gehen, um eine vollständige Version dieses Codes zu sehen. Im nächsten Schritt werden wir nun eine Laterne definieren. Ich werde meinen Code noch einmal im Vollbildmodus öffnen. Unterhalb dieses Tempels, also stellen Sie sicher, dass dies außerhalb des a-Entitäts-Tags ist. Wir werden jetzt eine Laterne erschaffen. Definieren Sie eine Laterne, eine Einheit, das ist nur eine Gruppe oder Objekte zusammen, und wir werden die Laterne mit Laternenmitte identifizieren. Sie werden drei Laternen sein, und diese Laterne wird in der Mitte sein. Wir werden ihm noch einmal die Fähigkeit geben, Schatten zu werfen und zu empfangen,
und wir werden es so bewegen, dass es Null Einheiten ist, so dass es in der Mitte ist, und dann ist es auch eine Einheit vom Boden, und dann ist es auch eine Einheit aus dem Boden, und dann drei Einheiten von uns entfernt. Gehen Sie weiter und fügen Sie ein Größer-als-Zeichen hinzu, um Ihr Tag abzuschließen. Ich werde diese Position direkt zwischen meinen Start- und End-Tags hinzufügen, zweimal Enter
drücken und Tab einmal drücken, so dass ich in dieser Laterne bin. Die Laterne mit einem dreieckigen Prisma abrunden. Hier werden wir das Primitiv identifizieren, das ein Kegel ist, ein Kegel. Wir können dann effektiv ein dreieckiges Prisma machen, indem wir einen Kegel und die Anzahl der radialen Segmente auf vier festlegen. Hier werden wir zuerst den Kegel mit id gleich Laternenkegel identifizieren. Wir werden es geben, Segments-Höhe gleich eins, und dann werden wir ihm volle radiale Segmente geben; Segments-radial gleich vier. Vergessen Sie nicht Ihre doppelten Anführungszeichen und vergessen Sie nicht Ihre Bindestriche. Wir werden jetzt die Blitzschattierung auf „true“ setzen. Andernfalls sehen die Schatten und die Schattierung immer noch rund oder wie ein normaler Kegel aus. Ich werde flache Schattierung gleich wahr eingeben. Jetzt können wir die Radien einstellen, so dass der untere Radius 0,1 ist, und dann wird die Höhe dieses Objekts 0,09 sein. Vergiss das Gleichheitszeichen nicht, wie ich es fast getan habe. Dann werden wir dieses dreieckige Prisma ein wenig nach oben bewegen, also ist die Position gleich Null, 0,16, Null. Dann drehen wir es so, dass es uns gegenübersteht. Ich werde hier Enter drücken, direkt nach diesem doppelten Zitat, und da ist unser dreieckiges Prisma. Ich sehe, wie das aussieht, ich werde die Vorschau auf dieser rechten Seite öffnen. Wenn Sie dies noch nicht getan haben, stellen Sie sicher, dass Sie auf Anzeigen und dann auf Weiter neben dem Code klicken. Wenn Sie sehen, gibt es graue Box direkt hinter diesem Next to The Code wie meins, dann bedeutet das, dass Ihre Vorschau bereits geöffnet ist, also klicken Sie auf den Pfeil rechts hier. Sie können sehen, dass es ein schwebendes dreieckiges Prisma zwischen Ihren wahren Säulen gibt. Jetzt fügen wir eine Kiste für das Dach
der Laterne unter diesem dreieckigen Prisma hinzu. In Ihrem Code, direkt nach diesem Kegel, muss
ich das noch einmal tippen. Auch dieser Leerraum, dieser Tab spielt keine Rolle,
es ist nur, um uns zu helfen, zu sehen, wie der Code organisiert ist. Wir wollen nur visuell sehen, dass dieser Kegel innerhalb dieser Laterne ist. Jetzt, da wir diesen Kegel haben, fügen wir die Box für das Dach der Laterne hinzu. Wir werden in a-Box geben eine ID genau wie vorher eingeben, Laterne Dach wird unsere ID sein. Nun, lassen Sie uns die Breite, Höhe und Tiefe einstellen. Wir werden in Skala gleich 0,2, 0,02, 0,2 eingeben. Dann geben Sie ihm eine Position von einer, die etwas hoch oben ist. Das ist nur ein bisschen erzogen. Was das bedeutet, ist wieder, die Breite ist 0,2, die Höhe ist 0,02. Dies sollte tatsächlich 0,2 sein. Auch hier ist die Skala eine Breite von 0,2, eine
Höhe von 0,02 und eine Tiefe von 0,2. Sie können nun sehen, ob Sie sich auf dieser Welt bewegen, erneut in Ihre Vorschau klicken, die Pfeiltasten oder WST
verwenden, und Sie können jetzt sehen, dass sich direkt unter diesem dreieckigen Prisma ein Dach befindet. Nun fügen wir eine Box für den Boden der Laterne hinzu. Dies ist die Box, die wir gerade erstellt haben, ich werde zum Ende bewegen und Enter drücken. Dann werden wir jetzt eine andere Box erstellen; a-box, id entspricht Laternenboden. Skalierung entspricht einer Breite von 0,15, einer Höhe von 0,02 und einer Tiefe von 0,15. Fügen Sie erneut ein Größer-als-Zeichen hinzu, um Ihr Tag zu vervollständigen. Nun, da ist der Boden der Laterne. Wir fügen nun eine leuchtende Kugel hinzu,
eine Kugel mit emissiven Eigenschaften. nächsten Lektion fügen wir der Laterne ein tatsächliches Licht hinzu. Geben Sie a-Kugel ein, id entspricht Laternen-Orb, Radius gleich 0,03. Wir werden es ein wenig nach oben bewegen, ein winziges bisschen um 0,05, Deckkraft ist gleich eins und emissiv gleich weiß. Was diese endgültige Eigenschaft tut, ist, dass das Objekt so aussieht, als ob es glüht. Sie können die weiße Kugel genau da drüben sehen. Sieht aus, als würde es leuchten. Das scheint keine Schatten darauf zu werfen. Das ist, was diese emissive Eigenschaft bewirkt. [ unhörbar] dieses doppelte Zitat, Ich werde genau wie zuvor eingeben, damit wir sehen können, wie das organisiert ist. Nun, wieder, wenn Sie sich fragen, wie ich diese wirklich,
wirklich seltsamen 0,03, 0,05
und 0 Werte bekommen habe , dann bin ich nur, dass ich
Werte innerhalb des A-Frame-Inspektors abstimme und sie dann überkopiere. Jetzt gehe ich zurück zum geteilten Bildschirm, und für unseren letzten und letzten Schritt werden
wir die Laterne noch zwei Mal klonen. Wir werden nicht kopieren und einfügen, wir werden etwas etwas saubereres machen. Zurück zum Code im Vollbildmodus. Dies war die Laterne, die wir gerade im vorherigen Schritt erstellt hatten. Wir werden diese Laterne jetzt noch ein paar zusätzliche Male klonen. Gehen Sie voran und geben Sie a-Entität ein. Genau wie zuvor, gib ihm eine Laterne. Wir werden das als eine Laterne definieren, die links ist. Wir werden eine neue Komponente eingeben, die wir noch nicht gesehen haben. Dies ist Klon ist gleich Laterne Zentrum. Sie können dies geben, welchen Wert Sie möchten. Ich gebe ihm eine Position von negativem 1,25. Um eine Laterne auf der linken Seite zu zeigen, werde
ich sie vom Boden heben, und ich werde sie von uns wegbringen. Da ist deine Laterne. Ich werde das noch einmal machen, damit wir eine dritte Laterne auf der rechten Seite haben. Ich werde a-Entität eingeben, id ist gleich Laterne-rechts, und Klon ist gleich Laterne-Center. Wir klonen die zentrale Laterne, und dann werde ich ihr eine Position geben. Position ist gleich 1,5, 2, negativ 2,5. Jetzt haben wir insgesamt drei Laternen. Ich werde das in ein wenig bewegen, damit du
die dritte Laterne sehen kannst , da sind unsere drei Laternen. Nur um diese Klonkomponente zu erklären, verwenden
wir tatsächlich, was CSS-Selektoren genannt werden. Mit CSS-Selektoren bezeichnet das Nummernzeichen oder das Hashtag eine ID. Sie geben die ursprüngliche Laterne mit einer ID von Laternenmitte an. Das ist, was diese Klonkomponente tut. Wir haben keine neuen Konzepte in dieser Lektion behandelt, aber wir haben die Konzepte, die wir in der vorherigen Lektion gelernt haben, praktiziert. [ unhörbar] Komponente und bleiben organisiert durch Gruppierung von Entitäten. Wir haben auch zwei zusätzliche Tipps abgedeckt. eine ist der Inspektor, der A-Frame Inspector, den wir für die Einstellung der Werte gesehen haben. Die zweite ist die Klonkomponenten. Dies ermöglicht es uns, unseren Code organisiert zu halten, anstatt zu kopieren und einzufügen. Wenn Sie auf diese Folien zugreifen und diese herunterladen möchten, besuchen Sie diese URL. Damit wird Schritt 1 abgeschlossen. In Schritt 2 fügen wir Ihrer Szene Farbe hinzu.
5. Schritt 2: Farbe: Willkommen bei Lektion 5. In dieser Lektion werden wir weiterhin eine Szene in der
Natur in ein Virtual-Reality-Erlebnis umwandeln , wir werden unsere Erfahrung mit Farbe versehen. Navigieren Sie zunächst zu dieser URL, aaalv.in/vr1o1/step2. Dies wird ein neues Projekt in Glitch eröffnen. Wie zuvor schlage ich vor, Ihre Glitch
und Skillshare Fenster nebeneinander zu platzieren , wie hier gezeigt. Zuerst erweitern wir unser Wissen über Komponenten, dann ändern wir die Farben und fügen der Szene Beleuchtung hinzu. Beginnen wir mit Komponenten. Hier ist eine Komponente, die wir zuvor gesehen haben. Die Farbkomponente hat einen Wert, blau. Dies wird als Einzeleigenschaftenkomponente bezeichnet. Es hat eine Eigenschaft, die der Wert der Farbe ist. Hier ist eine Komponente, die wir noch nicht gesehen haben, als Material. Material ist eine sogenannte Multi-Property-Komponente, da es mehrere Eigenschaften wie Farbe und Deckkraft
unterstützt. Die Eigenschaftsnamen werden hier blau dargestellt, wie zuvor werden die Werte hier in rosa dargestellt. Beachten Sie, dass, um Eigenschaftsnamen von Eigenschaftswerten zu trennen, Doppelpunkte in Rot verwendet werden. Um Eigenschaften voneinander zu trennen, verwenden
wir Semikolons rot bezeichnet. Wir werden jetzt Multi-Property-Komponenten verwenden, um die Farbe des Himmels zu ändern. Lasst uns unseren Himmel färben. Dies ist unser Step 2 Startercode. Wieder einmal werde ich den Datei-Browser hier minimieren. Ich werde anfangen, sich auf Objekte innerhalb unserer Szene nach ihrer ID zu beziehen, also die IDs, die wir ihm hier zugewiesen haben. Gehen wir weiter, und navigieren Sie zur Szene. Die Szene ist dieses Tag hier draußen auf Zeile 13. Verdunkeln Sie den Himmel, indem Sie die Hintergrundkomponenten Farbe Eigenschaft, geben Sie in Hintergrund gleich Farbe, und dann werden wir es eine lila Farbe zu geben. Dieses Nummernzeichen gibt nun einen Hex-Wert an. Wir werden 0011a eingeben, dies ist nur eine Möglichkeit, eine Farbe zu definieren. Jetzt sehen Sie, wie das aussieht. Gehen Sie weiter und öffnen Sie Ihr Vorschaufenster, klicken Sie auf „Anzeigen“, neben dem Code. Wenn Sie dies bereits getan haben, dann werden sie neben dem Code ein grauer Kasten sein, genau wie meins, in diesem Fall können Sie auf die Vorschau auf der linken Seite klicken. Sie können sehen, dass dunkles Lila im Hintergrund ist. Nun, das ist es für den Himmel. Lassen Sie uns als nächstes die Farbe des Bodens ändern. In unserem Code werden wir die Farbe des Bodens ändern, um ein Indigo zu sein. Der Boden ist ganz unten. Das ist Linie 42 mit einer A-Ebene. Ich bedauerlicherweise hätte diesem einen Ausweis geben sollen, aber es ist das, was es ist. Lassen Sie uns nun die Grundfarbe ändern, um in Indigo zu sein. Die aktuelle Farbe ist weiß oder fff. Wir werden dies zu einem #841fde ändern, und das ist eigentlich auch ein Schatten von Lila. Im Moment sieht das absolut schrecklich aus, aber wir werden das später ändern. Das schließt den Boden. Als nächstes reden wir über ein paar Lichter. Bevor wir weiter codieren, muss
ich die fünf verschiedenen Arten von Lichtern erklären, die Sie
in A-Frame als Version 1.1.0 verwenden können . Es gibt keine Notwendigkeit, diese zu merken, Sie können immer Google A-Frame Lichter, um diese Liste der Lichter wieder zu finden. In dieser Lektion wollte ich jedes Licht
visuell finden , damit Sie eine Intuition bekommen können, wann Sie welches Licht verwenden sollten. Hier ist die Szene, die wir benutzen werden. Der erste Typ ist ein Umgebungslicht. Es ist ein allgegenwärtiges Licht. Stellen Sie sich das wie die Belichtung in Ihrer Kamera vor. Alle Entitäten werden gleichermaßen vom Umgebungslicht beeinflusst. Wenn Sie die Intensität der Umgebung reduzieren, werden alle Objekte verdunkelt
und die Intensität erhöht, werden alle Objekte aufgehellt. Sie können dem Umgebungslicht auch Farbe hinzufügen, um ihm eine Szene mit warmem oder kühlem Geschmack zu verleihen. Zurück zu den ursprünglichen Einstellungen. Das zweite Licht ist ein gerichtetes Licht. Richtungslicht kann man sich wie die Sonne vorstellen. Es ist das Licht, das den Schatten der Box in dieser VR-Umgebung wirft. Drehen Sie die Intensität des gerichteten Lichts herunter, und Sie erhalten weniger Kontrast in Ihren Schatten, und hier ist noch weniger Kontrast. Beachten Sie, dass ich die Gesamtbelichtung mit Umgebungslichtern hochdrehen könnte. Egal wie intensiv meine Umgebungsbeleuchtung ist, ich werde den Schattenkontrast ohne gerichtete Beleuchtung nicht zurückbekommen. Zurück zur Originalszene. Für Licht Nummer 3 fügen wir Hemisphäre Lichter hinzu. Um Ihnen die Auswirkungen besser zu zeigen, ändere ich diese Kästchen in Weiß. Hier ist die Hemisphäre Beleuchtung. Es funktioniert im Grunde wie Umgebungsbeleuchtung, außer Sie können eine Farbe von unten
und eine Farbe von oben angeben . Hier haben wir blau von unten und weiß von oben. Hier ist mehr Hemisphäre Beleuchtung mit Blau von oben und Blau von unten. Dies ist identisch mit der Umgebungsbeleuchtung mit Blau. Zurück zur Originalszene. Für Licht Nummer 4 fügen wir Punktlichter hinzu, um Ihnen besser zu zeigen, dass die Effekte Ich habe die Umgebungsbeleuchtung auf 0,2 zurückgedreht. Hier ist ein Punktlicht rechts über dem Feld ganz links. Beachten Sie, dass das Licht in alle Richtungen scheint wie eine ungedeckte Glühbirne. Wie bei gerichteten Lichtern kann
es Schatten werfen. Hier ist das gleiche Punktlicht nach rechts verschoben. Zurück zur Originalszene. Für Licht Nummer 5 fügen wir Scheinwerfer hinzu. Getreu seinem Namen werden Strahler Licht in eine Richtung werfen, wie es die A-Frame-Dokumente sagen, dies ist wie das Fledermaus-Signal. Um Ihnen seine Effekte besser zu zeigen, habe
ich mich auf die Umgebungsbeleuchtung auf 0,2 zurückgedreht. Hier ist ein Scheinwerfer, der nur einen Teil der Box leuchtet, wie Lichter, die man in einem Theater,
Las Vegas Wassershows
oder in einer Museumsausstellung erwarten würde Las Vegas Wassershows . Hier ist die vollständige Liste der A-Frame Leuchten, die Ihnen als Version 1.1.0 zur Verfügung stehen. Mach dir keine Sorgen, wenn diese Liste überwältigend erscheint, werden
wir diese Lichter jetzt in einem Beispiel verwenden. Um zu beginnen, können Sie einfach meine Beleuchtung in jedes neue Projekt kopieren, das Sie erstellen. Lassen Sie uns jetzt die Beleuchtung Ihrer Umgebung einrichten. Gehen Sie weiter, und scrollen Sie bis zum Anfang Ihrer Datei. Nun fügen wir der neuen Umgebung drei Lichter hinzu. Beachten Sie, dass hier bereits zwei Lichter vorhanden sind. In meinem Fall ist dies auf den Zeilen 14 und 15. Sie können fortfahren und beide Lichter löschen. Jetzt werde ich ein neues Licht definieren. Wir werden ein Licht eingeben, wir werden den Typ als Richtungsrichtung einstellen, wir werden die Intensität ändern oder wie hell es auf 0,3 scheint. Vergessen Sie auch nicht Ihre doppelten Anführungszeichen oder Ihr Gleichheitszeichen. Schließlich werden wir ihm einen violetten Farbton geben. Wir werden die Farbe gleich 6909b3 definieren. Dies ist ein violettes Licht. Nicht zuletzt müssen wir noch weitere Komponenten hinzufügen. Gehen Sie weiter und bewegen Sie das Licht nach rechts oben. Position ist gleich, das Recht bedeutet ein positives x, oben bedeutet ein positives y, und gegenüber uns bedeutet ein positives z. Wir werden jetzt eine Multi-Property-Komponente hinzufügen. Dies ist die Lichtkomponente mit dem Cast Shadow Attribut, sorry, property, und dann ist der Wert true. Das bedeutet, dass unser Licht Schatten werfen kann. Wir werden jetzt ein Größer-als-Zeichen hinzufügen, um unser Licht zu schließen, und wir werden das hier zurückschieben, um sich mit diesem zu befassen. Etwas ist nicht aufgereiht. Das ist das Beste, was ich tun kann. Als nächstes werden wir ein weiteres Licht hinzufügen, wir werden diesen Vorgang für ein anderes gerichtetes Licht wiederholen. Wir werden hier ein Licht eingeben, Typ gleich der Richtung, Intensität gleich 0,2. Die Farbe ist weiß, und die Position wird sehr nah an unserem letzten Licht sein. schließlich sicher, dass auch Schatten aktiviert werden, die geworfen werden. Nun, da ich diese zwei gerichteten Lichter habe, lassen Sie uns weitermachen und unser Umgebungslicht hinzufügen, damit diese ganze Szene ein bisschen heller ist, ist
jetzt ein bisschen zu dunkel. Für unser drittes Licht, a-light, entspricht der
Typ Umgebungstyp. Gehen Sie, und fügen Sie Intensität bei 0,15 hinzu, und dann wird die Farbe ein weiteres lila sein, 6909b3. Alles klar, und das ist unsere Szene. Es scheint immer noch ein wenig dunkel, also wenn Sie möchten, können Sie
die Intensität eines dieser Werte aufdrehen und sehen, wie sie funktionieren. Moment sind dies die Lichter, die wir brauchen. Wenn Sie nun verwirrt sind, wie Sie diese Lichter in anderen Projekten
extrapolieren oder verwenden, um zu beginnen, empfehle
ich immer ein direktionales
und ein Umgebungslicht zu jeder Szene hinzuzufügen , mit der Sie arbeiten, und
dann oder das Hinzufügen von Lichtern nach Bedarf. Sie können diese Lichter kopieren, die ich hier habe, wenn Sie möchten. Für unseren letzten Schritt in dieser Lektion fügen
wir Ihren Laternen Punktlichter hinzu, als würden die Laternen leuchten. Das waren die Lichter, die wir zuvor definiert haben. Gehen wir weiter und scrollen Sie nach unten zur Laterne. Dies ist die Laterne, die wir in der vorherigen Lektion definiert haben. Wir werden jetzt die Farbe dieser Kugel hier ändern. Wir werden das Emissionslicht der Kugel von Weiß zu Cyan ändern. Wir werden hier 09edda definieren, vergessen
Sie nicht das Pfundzeichen direkt vor Ihrer Farbe. Beachten Sie, dass emissiv das Licht nicht tatsächlich wirft, emissiv konfiguriert dieses Objekt nur so, dass es so aussieht, als ob es glüht. Wir müssen jetzt tatsächlich ein Licht hinzufügen. Wir fügen nun ein Punktlicht in der Mitte der Laterne auch mit dem gleichen Farbton von Cyan hinzu. Das ist ein Zungenbrecher. Gleich nach unserer Kugel, lasst uns voran gehen und jetzt a-light eingeben, ihm eine ID von Laternenlicht geben, und Typ wird ein Punkt sein. Da ist unser Punktlicht, die Intensität ist 0,2. Die Position wird leicht oben über dem Boden der Laterne sein. Wir werden ihm eine Cyanfarbe geben, genau wie zuvor, und dann werden wir sicherstellen, dass dieses Licht Schatten werfen kann. Denken Sie daran, diese Großschreibung genau hier für diese Eigenschaft, werfen Schatten ist sehr wichtig. Vergessen Sie nicht Ihre doppelten Anführungszeichen, vergessen Sie nicht diese Gleichheitszeichen. Gehen Sie weiter und beenden Sie dieses Tag nun mit einem Größer-als-Zeichen,
und Sie können sehen, dass es viele Schatten sind, die geworfen werden, eine von jeder dieser Laternen und eine von beiden gerichteten Lichtern, und das war's. Oben links können Sie auf „Anzeigen“ klicken und dann in einem neuen Fenster, und Sie können die URL für diese Webseite für alle
freigeben , die Sie Ihr VR-Modell anzeigen möchten. Wenn Sie möchten, können Sie jetzt Ihr VR-Erlebnis in Ihr VR-Headset laden. Wenn Sie einen Google Cardboard haben, laden Sie die URL auf Ihrem Telefon, klicken Sie unten rechts auf die VR-Button und legen Sie Ihr Telefon dann in Google Cardboard. Werfen Sie einen Blick durch die Linse. Vielleicht musst du dich umdrehen, um deinen Tempel zu finden. Der Prozess ist ähnlich für eine Oculus Quest, Zugriff auf den Oculus Browser und Zugriff auf die URL. Der Oculus Browser greift direkt im VR-Modus auf die Website zu. Viel Spaß. Damit ist diese Lektion abgeschlossen. In dieser Lektion haben wir Komponenten mit mehreren Eigenschaften
und verschiedene Arten von Lichtquellen in A-Frame behandelt . Wir haben dann beide Konzepte praktiziert, indem wir der Szene Farbe und Beleuchtung hinzugefügt haben. Wenn Sie auf diese Folien zugreifen und diese herunterladen möchten, besuchen Sie diese URL. Dies schließt Schritt 2, Hinzufügen von Farbe. Im dritten und letzten Schritt fügen
wir Ihrer Szene Bewegung hinzu.
6. Schritt 3: Bewegung: Willkommen bei Lektion 6. In dieser Lektion fügen wir Ihrer Szene Bewegung hinzu. Navigieren Sie zunächst zu dieser URL, aaaiv.in/vr101/step3. Dies wird ein neues Projekt Glitch eröffnen. Wie zuvor schlage ich vor, Ihre Glitch und
SkillShare Fenster nebeneinander zu platzieren , wie hier gezeigt. Ein Rahmen selbst enthält keine Unterstützung für den ersten Schritt unserer fünf Schritte und des Star-Systems. Ein Drittanbieter-Entwickler hat jedoch ein Star-System erstellt, das wir verwenden können. In Ihrem Code ist dies unser Schritt drei Starter. Ich habe den Datei-Browser und die linke Seite bereits minimiert, und ich habe die Vorschau geöffnet. Wenn Sie die Vorschau noch nicht geöffnet haben, klicken Sie auf die linke obere Show und wählen Sie Weiter zu dem Code. Zeile 9 habe ich bereits eine Codezeile hinzugefügt , mit
der Sie dieses Drittanbieter-Stern-System verwenden können. Wir werden nun dieses Sternsystem dem Code hinzufügen. direkt unter Ihrer a-Szene Gehen Siedirekt unter Ihrer a-Szenevor und erstellen Sie eine neue Komponente, a-Entity. Sternsystem entspricht einem Radius von 200. Dieser Radius von 200 lässt einige Sterne größer aussehen und andere kleiner aussehen. Sie fragen sich wahrscheinlich, wo ist der Antrag? Das ist eine tolle Frage. Es gibt noch keinen Antrag. Als Nächstes müssen wir etwas Bewegung auf den Boden bringen. Der Boden wird durch einen Ozean ersetzt werden, genau wie auf unserem Foto. Nun, genau wie bei einem Sternsystem, unterstützt
ein Rahmen selbst kein Ozeanobjekt. Jedoch, einer der ein Rahmen Bella von Brisk erstellt Vorstellung, dass wir verwenden können. In diesem Code werden wir den ganzen Weg hinunter zu dem ganz,
ganz unten scrollen, wo der Boden ist. Dieser Boden ist nur ein Flugzeug. Wir werden diese Menge für mich entfernen, das ist Zeile 71. Ich werde dieses Flugzeug löschen. Anstelle dieses Flugzeugs definieren
wir jetzt einen Ozean. Ich habe bereits Code für den Ozean in einer Datei namens ocean.js erstellt. Wenn ich hier auf den Datei-Browser klicke, kann
man tatsächlich die ocean.js sehen. Moment brauchen wir uns keine Sorgen um den Inhalt dieser Datei zu machen. Wir werden diesen Datei-Browser schließen und noch einmal, und wir werden jetzt das Ozean-Objekt ganz, ganz unten hinzufügen. Wir werden jetzt ein Ozean eingeben. Position ist gleich 00,10. Dies wird es nur ein wenig vom Boden bewegen. Wir geben ihm die Möglichkeit, Schatten zu empfangen und zu werfen. Wir werden es ziemlich tief und ziemlich breit machen. Wir werden dann konfigurieren, wie schnell und langsam es tatsächlich schwankt. Sie können diese Werte ändern, wie Sie es für richtig halten. Ich habe hier ein paar willkürliche Werte gesetzt. Ich gebe ihm eine Amplitude von Null, Amplitudenvarianz von 0,2, Geschwindigkeit von 1,5 und Geschwindigkeitsvarianz von eins. Aber Sie können diese Werte ändern, Sie möchten sehen, wie sich der Ozean verhält und reagiert. Wir werden jetzt seine Deckkraft auf eins setzen, also ist das nicht durchsichtig. Wir werden auch die Dichte der Punkte in diesem Raum auf 50. Es gibt viel mehr Polygon, um das Wasser zu simulieren. Jetzt geben Sie ihm eine Farbe,
841fte, und fügen Sie ein Größer-als-Zeichen hinzu, um Ihr Ozean-Tag zu vervollständigen. Jetzt ist unser Ozean ein violetter Farbton. Wir werden ein weiteres Ozean-Tag hinzufügen, das
transparent ist , so dass es ein wenig mehr wasserähnliches Verhalten gibt. So ist die Position eines Ozeans wieder gleich, die gleiche Position, also ist sie leicht vom Boden entfernt. Sie werden ihm die Möglichkeit geben, Schatten zu erhalten, eine Tiefe von 50, Breite von 50, also die gleiche Größe. Wir werden es jetzt leicht transparent machen. Wir werden dafür sorgen, dass dies ein bisschen mehr Varianz in der Amplitude hat. Wir werden ihm die gleiche Geschwindigkeit und die gleiche Geschwindigkeitsvarianz geben. Dann wird die Dichte, oder wie viele Wellen, die Sie hier sehen können, es wird 50 sein, und dann wird die Farbe die gleiche Farbe wie zuvor sein. Das vervollständigt unseren Ozean. Sie können nun die Vorschau auf der rechten Seite sehen. Als Nächstes bewegen wir jetzt die Laternen. Wir übersetzen oder ändern die Positionen und drehen jede der Laternen. Zurück zum Code. Hier drinnen, gehen Sie weiter und scrollen Sie nach oben, wo Sie Laternen sind. In diesem Fall haben wir hier auf Linie 40. Um ein Objekt zu animieren, wird die Animationskomponente verwendet, wie bei anderen Komponenten, die Sie zuvor gesehen haben, die Animationskomponente hat mehrere Eigenschaften. Lassen Sie uns jetzt eine Animation erstellen. In einem Frame können Sie mehrere Animationen für ein einzelnes Objekt erstellen indem Sie zwei Unterstriche hinzufügen und einen eindeutigen Bezeichner hinzufügen. In diesem Fall werden wir in das Start-Tag hier in
Zeile 40 direkt vor diesem Größer-als-Zeichen klicken . Wieder, gleich vor diesem Größer-als-Zeichen, werden
wir die Eingabetaste drücken und die Animation eingeben. Wir geben ihm zwei Unterstriche und dann einen eindeutigen Bezeichner. In diesem Fall nennen wir es eine Positionsanimation. Es gibt drei verschiedene erforderliche Eigenschaften für jede Animation. Als erstes müssen Sie angeben, welche Eigenschaft Sie animieren möchten. In diesem Fall werden Sie die Positionseigenschaft animieren. Wir werden in der Eigenschaft Position eingeben. Stellen Sie sicher, dass Sie gleich danach ein Semikolon hinzufügen. Es gibt eine zweite Eigenschaft, die wir hinzufügen müssen, die der Startwert ist. In diesem Fall ist die Ausgangsposition die ursprüngliche Position des Objekts oder Null eins negative drei. Hier werden wir von Null ein negatives drei Semikolon definieren. Der dritte erforderliche Wert ist der Endwert. In diesem Fall ist die Endposition eine beliebige Position. Ich habe negative eins auf negative vier gesetzt. Hier sind zwei negativ eins bis negativ vier. Denken Sie daran, Leerzeichen zwischen diesen Werten, keine Kommas, stellen Sie sicher, dass ein Semikolon vorhanden ist. Es gibt ein paar zusätzliche Animationseigenschaften, die bereit sind, zu setzen, um sicherzustellen, dass Ihre Laterne in Bewegung bleibt. Wir werden Schleife auf true setzen, so dass es weiterhin diesen Raum Schleife, nachdem der Doppelpunkt vollständig optional ist. Sie werden feststellen, dass ich leider widersprüchlich damit war. Aber diese Schleife wahr wird die Animation definitiv schleifen. Wenn Sie die Schleife nicht festlegen, erfolgt die wahre Animation nur einmal. Als nächstes werden wir die Richtung einstellen oder nur dir: alternate. Das bedeutet, dass die Laterne in beiden Richtungen von Punkt A nach Punkt B und zurück animiert wird. Wenn Sie die Richtung nicht als Alternative festlegen, animiert die Laterne von Punkt A nach B, springt
dann zurück und animiert erneut von Punkt A nach Punkt B. Als nächstes werden wir die Dauer kurz für unser Dur auf 8,5 Sekunden einstellen. Wir werden hier 8500 setzen, weil dies tatsächlich in Millisekunden gemessen wird. Ich werde ein Semikolon hinzufügen. Jetzt, da ich das getan habe, sind
wir mit dieser Animation fertig. Sie werden jetzt in der Vorschau sehen, dass sich die Laterne bewegt, oder nicht? Ja, genau hier. Jetzt ist es ein bisschen verschwunden. Sie sehen, dass sich die Laterne ein wenig bewegt. Aber wir wollen jetzt tun, ist die Laterne ein wenig wackeln mit etwas Rotation. danach, lassen Sie uns in Animation Rotation
gleich und die Eigenschaft wird die Rotationseigenschaft dieses Mal sein, wir werden sagen, dass es von fünf zehn fünf ist, und zu negativen zehn fünf negativen fünf. Sie können diese auf alles einstellen, was Sie wollen. Stellen Sie einfach sicher, dass es kleine Werte sind, damit es nicht aggressiv rotiert. Genau wie bevor wir diese Animation für immer durchlaufen werden. Wir gehen, um Richtungen zu wechseln, so dass es reibungslos zwischen zwei Punkten
animiert und die Dauer wird zwei Sekunden, also 2.000. Jetzt haben wir die Rotationsanimation beendet, aber was Sie bemerken werden, ist, dass die Laterne nicht wirklich wackelt. Es dreht sich überhaupt nicht. Lassen Sie uns voran und ziehen Sie den Inspektor, wie wir in der letzten Lektion gelernt, um
voran zu gehen und drücken Sie die Steuerungsoption und ich. Nun, wenn Sie sich diese Laterne ansehen, gehen Sie hinein und klicken Sie auf die Laterne links hier, die Laternenmitte, und Sie werden sehen, dass es die Animationsposition genau wie wir es erwarten würden, aber es gibt keine Animationsrotation. Das sollte Ihnen sagen, dass hier etwas mit dem Namen nicht stimmt. In der Tat, wenn Sie auf der linken Seite schauen, sehen
Sie den Bug? Der Bug ist wirklich subtil. Dies ist ein Unterstrich anstelle von zwei Unterstrichen. Wie wir bereits gesagt haben, müssen die Animation von zwei Unterstrichen und dann der Bezeichner
gefolgt werden . Gehen wir weiter und fügen Sie hier den zweiten Unterstrich hinzu. Jetzt wackelt die Laterne deutlich, sowohl rotierend als auch bewegend. Stellen Sie erneut sicher, dass Sie jemals einen doppelten Unterstrich haben, stellen Sie sicher, dass Sie Ihr Gleichheitszeichen, Ihre Semikolons, Doppelpunkte haben
und stellen Sie im Allgemeinen sicher, dass Ihr Code genau hier mit meinem übereinstimmt. Das war's für die Laternen. Gehen wir weiter und gehen zum nächsten Teil. Wir werden jetzt Animationen für die Laternenkugel definieren. Es wird pulsieren und in der Intensität wachsen und dann in der Intensität schrumpfen. Gehen Sie weiter und scrollen Sie nach unten zur Kugel. Das hier wird Laternenkugel sein. Wir werden die Deckkraft der Kugel ändern, so dass die Kugel scheint hell und dann abwechselnd dunkler zu leuchten. Später wird das Licht selbst erhellen und entsprechend dimmen. Wie zuvor geben wir die Eigenschaft an, die auf den Startwert und den Endwert animiert werden soll. Schleife stufenlos und abwechselnd. Hier werden wir Animation-__Deckkraft definieren. Wir geben ihm die Eigenschaft, die wir animieren wollen. Wir werden sagen, wo animiert von wo animiert 2s. Dies ist der n-Wert eins. Wir werden es für immer Schleife und dann alternative Richtungen für die Animation. Stellen Sie sicher, dass Sie Ihre Doppelpunkte und Semikolons und doppelte Anführungszeichen haben, doppelte Unterstriche alle Interpunktionen. Jetzt können Sie sehen, dass die Kugel tatsächlich die Deckkraft verändert. Dieser hier, der in der Mitte und der rechts, alle verändern sich. Das schließt unsere Laterne Orb neben mir, um tatsächlich das Licht selbst zu animieren. Machen Sie ein Licht erhellen und dunkel. Gehen wir weiter und scrollen Sie nach unten zum Licht selbst. Hier wollen wir die Laternen Licht animieren, um in regelmäßigen Abständen zu erhellen und zu dimmen. Wir werden Animationen hinzufügen. Die Entfernungsintensität ist gleich. Dann nennen wir die Eigenschaft. Sie möchten sagen, wovon es stammt, der Startwert des n Wertes. Dann werden wir es für immer schleifen und die Richtung festlegen, die wie zuvor abwechselnd ist. Nun ist dies die Intensität des Lichts. Wie stark ist das Licht in seinem Aufprallradius? Aber wir wollen das Licht tatsächlich erweitern, so dass seine Entfernung oder der Radius des Aufpralls tatsächlich zunimmt. Gehen wir weiter und fügen Sie eine weitere Animation hinzu. Dies wird animation_distance sein. Dies wird die Distanzeigenschaft unseres Lichts ändern. Wir werden von einer beginnen, die standardmäßig auf so dass es scheint, mehr von einer Region um sie herum zu beeinflussen, Schleife es für immer und alternative Richtungen. Sie können hier sehen, dass nur das Licht oder die Laterne und das Zentrum tatsächlich die beiden anderen Laternen in der Website animiert oder nicht. Ich werde auch die anderen beiden Laternen animieren. Fühlen Sie sich frei zu folgen und können sie auch anpassen, wie Sie möchten. Das war's für die Szene. Sie können jetzt sehen, dass alle drei Laternen wackeln. Wenn Sie auf die Folien zugreifen und diese herunterladen möchten, besuchen Sie diese URL. In dieser Lektion haben wir verschiedene Arten von Bewegungshinweisen hinzugefügt. Das schließt diese Virtual-Reality-Erfahrung ab. Wir haben die drei Schritte behandelt, die für die Erstellung eines virtuellen Reality-Erlebnisses erforderlich sind. Primitive, Farbe und Bewegung.
7. Schlussbemerkung: Herzlichen Glückwunsch. Sie haben jetzt eine Virtual-Reality-Erfahrung abgeschlossen, die Sie mit Freunden,
Familie, wirklich jedem, den Sie wollen, teilen können. Wir haben Primitive, Beleuchtung, Bewegung behandelt, auch wenn Sie die Code-Besonderheiten vergessen, die genauen Techniken, die wir verwenden. Was ich hoffe, du nimmst, ist, wie zugänglich dieses Fahrzeug für das Geschichtenerzählen ist. Wie einfach es ist, mit A-Frame eine virtuelle Welt zu erschaffen. Ich hoffe, Sie sind begeistert, Ihr Klassenprojekt zu erleben, denn ich bin es definitiv. Bitte lassen Sie mich in Ihre virtuelle Welt, und laden Sie Ihr Projekt auf die Registerkarte Projekte und Ressourcen hoch. Stellen Sie sicher, dass Sie einen Screenshot Ihrer virtuellen Welt hinzufügen
und einen Link hinzufügen, mit dem wir auf Ihr Virtual-Reality-Erlebnis zugreifen können. Wenn Sie mehr über kreative Programmierung erfahren möchten, folgen Sie mir auf Skillshare, um Updates zu erhalten, wenn eine neue Klasse startet. Wenn Sie mehr über Data Science oder maschinelles Lernen erfahren möchten, schauen
Sie sich meine 101 Klassen in meinem Skillshare Profil in Python,
SQL, Data Science, Computer Vision und mehr an. Herzlichen Glückwunsch nochmals dazu, es bis zum Ende des Kurses zu schaffen, und bis zum nächsten Mal.
Alvin Wan, Research Scientist
