Erstelle eine erforschbare 3D-Szene mit Three.js | Kevin Newcombe | Skillshare
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Erstelle eine erforschbare 3D-Szene mit Three.js

teacher avatar Kevin Newcombe, Front-end developer

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Einführung

      0:57

    • 2.

      Eine Übersicht über 3D im Web

      2:06

    • 3.

      Einführung in three.js

      2:15

    • 4.

      Einrichtung einer lokalen Umgebung

      2:51

    • 5.

      Aufstellung einer a

      6:34

    • 6.

      Lights hinzufügen

      2:32

    • 7.

      Erkundung einer 3D-Szene

      1:44

    • 8.

      Modelle importieren

      5:55

    • 9.

      Marker hinzufügen

      6:42

    • 10.

      Positionierung von Markierungen

      8:47

    • 11.

      Klicks erkennen

      6:19

    • 12.

      Tooltips

      10:06

    • 13.

      Schlussbemerkung

      0:35

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

1.110

Teilnehmer:innen

3

Projekte

Über diesen Kurs

Erstellst die Szene mit der Erstellung, die es Benutzer:innen erkunden kann, 3D-Modelle in einem Webbrowser mit WebGL. Dieser Kurs lehrt dir die Grundlagen der Verwendung von three.js, einer 3D-Bibliothek für die Darstellung und Interaktion mit Modelle. Vorkenntnisse in der 3D-Modellierung oder Animation erforderlich. Modelle und Bibliotheken sind erforderlich. Das endgültige Produkt kann sich auf https://coded://coded-7-7-5-5-836 sehen

Triff deine:n Kursleiter:in

Teacher Profile Image

Kevin Newcombe

Front-end developer

Kursleiter:in

Hi there! I'm Kevin Newcombe, a front-end developer from Edmonton, Canada. I focus on CSS and HTML, but I also like to get creative and play with things like TensorFlow and WebGL.

Vollständiges Profil ansehen

Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Ich bin gelaufen. Willkommen beim Aufbau Explore Role drei D Szene mit drei Jazz Ich habe eine neue kommen vor Entwickler, aber ich liebe es, um drei D zu spielen, und das ist ein Projekt, das die beiden kombiniert. Also bin ich wirklich aufgeregt darüber, und ich bin heute zu uns gekommen. Ich werde Sie durch, wie Sie HTML, CSS, JavaScript und drei D-Modelle zusammenbringen CSS, . Haben Sie nur Lionel interagieren, bis es in einem Web-Browser Tipps gibt? Dies könnte verwendet werden, um Produkte Website zu zeigen und Benutzern zu ermöglichen, sie in einer hoch visuellen Industrie Angelegenheit zu erkunden . Wir werden beginnen, indem wir lernen, wie man eine Mob-Szene hinzufügen, beleuchtet und dann den Benutzern die Möglichkeit geben, sie durch Drehen zu erkunden. Und an diesem Abend wird schließlich Call SNC hinzufügen, die, die, wenn Sie darauf klicken, werden wir weitere Informationen, die für dieses Flächenmodell relevant sind, bringen. Am Ende dieses Tutorials haben Sie ein funktionierendes Verständnis der Verwendung von drei Js, die eine Bibliothek, die verwendet werden könnte, um Sie hinzufügen und interaktive drei D und Web-Browser. Kein Teil der Kenntnisse von drei D ist erforderlich, obwohl ich empfehle, dass Sie einige JavaScript-Erfahrung haben. Begleiten Sie mich auf Punktestand. Angenommen, ein nettes, wenn Sie 2. Eine Übersicht über 3D im Web: so dass drei D im Web mit etwas namens Web GL getan wird, die für Web Graphics Library steht. Es ist ein JavaScript-FBI zum Rendern interaktiver zweier D- und drei-D-Grafiken. Und was wir tun können, ist eigentlich drei D in einen Web-Browser in einer Weise zu setzen, die wirklich schnell und effizient ist und nicht wirklich verstopft Ihre Maschinen. Und es könnte auf Dinge wie Smartphones angezeigt werden könnte auf Desktop-Computern getan werden. Es gibt kein Bein, es gibt eine Menge Interaktivität. Und so lässt es uns Dinge wie diesen animierten LKW an der Spitze der Übertragungsstelle machen, die nur ein Drei-D-Modell ihres Logos ist. Weißt du, ich kann das schleppen. Ich kann es bewegen. Wir haben auch so etwas wie diesen Mars Rover, von der NASA Jet Propulsion Library ist. Ich könnte das mit meinen oben, unten links, rechten Tasten herumfahren unten links, , kommt ein Zug. Es ist ein ziemlich kompliziertes Modell, aber Sie haben gesehen, wie schnell es geladen wurde. Wir haben dieses Fossil von National Geographic und mit Buggy l und und einige der drei D-Modelle können wir eine wirklich interessante, eine interaktive Art und Weise exportieren . Also, wie ich bin Art von Scrollen Ihre Antwort auf meine Maus auf und verbringt das Modell als verschiedene Callouts, um es Bereiche von Bedeutung hervorhebt. Es ist also ein wirklich gutes Geschichtenerzählergerät hier, und das haben wir auch von Mercedes Benz. Also geh den Explorer runter. Was ist das? Lasten. Sie können das Auto tatsächlich als drei D-Modell sehen, das Sie können. Sie können es umsehen, wenn Sie sehen möchten, was war zweite verschiedene Konfigurationen und sagen verschiedene Farbfarben. Sie können auf diese klicken, sehen, wie mit verschiedenen Rädern aussieht. Also, welches Gefängnis könnte verwendet werden, um eine Menge interessanter Details hinzuzufügen. Entweder ist im Voraus wie ein Herzstück, oder vielleicht einfach nur ein bisschen gedeihen auf jeder Website. Und es ist fair gemacht. Einfach, wie Browser in der Lage sind, dies zu handhaben und eine wirklich schnelle und effiziente Angelegenheit. Also hast du angefangen, Teoh jetzt ein bisschen mehr und mehr populär zu werden, also werden wir im nächsten Video erforschen, wie das 3. Einführung in three.js: Um all diese drei d in einen Webbrowser zu bekommen, müssen wir es sagen, wie die Geometrie eingerichtet ist, die Materialien Dinge wie Lichtreflexion oder die Farbe der besagten Materialien behandelt. Wie die Kamera funktioniert, was die Schärfentiefe so ist. Also, wenn wir zum Beispiel schauen, zum Beispiel schauen, wie Würfel in Szene gesetzt werden, sehen wir das auf Strange. Es ist eine Menge Detail. Was wir erklären, wo in der Szene, jeder einzelne Punkt auf jedem einzelnen Dreieck auf jedem Gesicht, das den Würfel ausmacht, lebt. Also, wie Sie sehen, gibt es hier eine Menge Details, und es gibt eine kleine Chance auf Fehler, wenn Sie wissen, dass Sie etwas verpassen, wie absolut ein Positives anstelle von Negativ zu setzen oder ein Komma zu verpassen, oder möglicherweise die Dinge in die falsche Reihenfolge bringen. Also, was wir hier verwenden werden, ist eine Bibliothek namens drei Js. Also, wenn Sie dort ihre Homepage gehen, ist die mündliche drei Buben aus der Arbeit. Sie können ein paar der Beispiele hier sehen, und einige davon, die wir gerade gesehen haben. Hier ist der „Du übertragst“ Truck. Wir werden uns ein wenig mit der Dokumentation auseinandersetzen. Also hier ist eine grundlegende drei Yacine, und sie werden der Szene einen Würfel hinzufügen. Also, wenn Sie sich das Land hier hervorgehoben haben, Dies ist alles die Kokain-Daten zu ah 23 Js zwei aus Kuba auf die Szene gehen durch Zeile für Zeile. In der ersten Zeile steht, hier ist die Geometrie. Es ist eine Schachtel, die eine Einheit breit, eine Einheit tief und eine Utah ist . Das gesamte Material selbst ist grün. Wir fügen diese beiden zusammen und fügen sie der Szene hinzu. Also, das sind vier Codezeilen an einer Box zu einer drei schnellen Szene im Gegensatz zu all diesem Code , der nur ziemlich schwer ist und manchmal wiederholt wird. Und das gleiche, vielleicht könnte die Benutzerfreundlichkeit für die Beleuchtung verwendet werden. Also, zum Beispiel, wenn wir Zehe schauen, wenn Sie schauen wollen, wie man ein Licht zu einem drei Js gesehen haben Sie das Licht definieren wollen, sagen Sie ihm die Farbe und fügen Sie es einfach hinzu. Und so gibt es hier viele Standardwerte, wissen Sie, zum Beispiel, standardmäßig es standardmäßigkeine Schatten abgibt. Es ist ein Umgebungslicht, was bedeutet, dass sich eine Art gleichmäßig ausbreitet. Und so ist das wirklich etwas. Fügen Sie, im Gegensatz zu Ihnen, zum Beispiel, Beleuchtung mit nur geradem JavaScript. Das Tolle an drei Jazz ist, dass du irgendwie zu dem gelangen kannst, was für die Szene einzigartig ist , und ich muss mir zu viel Sorgen um die sich wiederholenden Aspekte davon machen oder das Zeug, das du Comin bist , das wir tun müssen. Und wir werden darüber nachdenken, wie Sie Ihren Computer sehen und tatsächlich eingerichtet haben müssen, um drei Js im nächsten Video zu behandeln , also werden wir dann sehen. 4. Einrichtung einer lokalen Umgebung: Also fangen wir an, in drei Js zu sehen und wir werden hier unsere lokale Umgebung einrichten . Lassen Sie einfach die gesamte Software installiert und alles, was wir brauchen, um lokal daran zu arbeiten. Und wenn ich sage, wir werden lokal daran arbeiten, bedeutet das, im Gegensatz zu einer Änderung, Hochladen Teoh ein Webserver und Vorschau, was ein wenig Zeit in Anspruch nehmen kann. Es ist hart, irgendwie hin und her übertragen. Wir werden es einfach auf unseren eigenen Computern bearbeiten. Die Dinge, die wir gerettet hatten. Wir können eine Vorschau anzeigen, wie es aussieht. Weißt du was für einen Browser? Wenn ich anfange, gehe ich zu den drei Js-Websites und gehe zur Dokumentation. Wir werden Dinge lokal ausführen, und es gibt ein paar Möglichkeiten, wie wir dies tun können, aufgrund von Sicherheitseinstellungen und Webbrowsern Sie müssten entweder diese t Vorschau einige dieser Dateien außer Kraft setzen, oder Sie müssten eine lokale Webserver, und ich empfehle Ihnen, keine oder Standardsicherheitseinstellungen in Ihrem Webbrowser zu überschreiben . Also schauen wir uns an, wie du einen kleinen coolen Server betreibst? Und in diesem Fall werden wir es benutzen? Nein, Js und ich werden es vorangehen, indem wir sagen, dass ich hier einen Mac benutze. Wenn Sie eine andere Plattform wie Windows oder Lennox Software verwenden, kann unterschiedlich sein, aber die Prinzipien der gleichen. Also, wenn ich das in ein Terminal kopiere, meine ich, es ist alles eine Notiz. Großartig. Das ist also nicht auf meinem Computer installiert und tatsächlich etwas zum Laufen bringen. Ich werde einen neuen Ordner erstellen. Ich nenne es Demo Care auf meinem Computer, okay. Und dann werde ich eine CD in das Verzeichnis einspielen. So CD Demo Grant. Und jetzt werde ich dieses kleine Stück von dieser Zeile laufen, um meine Notizen neu zu beginnen. Also, was wir gerade getan haben, ist, dass wir einen Server installiert haben. Wir haben angefangen, es zu betreiben. Wenn ich eine davon in einen Webbrowser kopiere, wird es mir zeigen, was sich in diesem Ordner befindet. Das zeigt uns also tatsächlich den Inhalt der Demo. Um es zu beweisen, öffnen wir einfach den FIA-Code. Wir werden jede Datei Hallo Welten erstellen und speichern Sie sie, wie in der Erklärung und bei jedem zu seinem Okay. Wenn wir nun zu einem Browser zurückkehren und Sie nicht aktualisieren können, sollten wir den Inhalt dieser Datei sehen. So läuft man lokal. Jetzt fangen wir an, der Szene drei Gefängnisse hinzuzufügen, die so gut hier draußen sind. Und wenn Sie in der Download-Datei schauen, fangen wir einfach an, alle Assets herunterzuladen, die wir dafür benötigen. Und wir gehen durch, wie man Dateien tatsächlich hinzufügt und wie man im nächsten Video ein einfaches Singen und Laufen bekommt, damit wir euch dann sehen. 5. Aufstellung einer a: Jetzt, da wir unseren Service eingerichtet haben, können wir mit dem Bau unserer Drei-D-Szene beginnen. Und wenn Sie zurück zu drei Js-Website gehen, klicken wir auf den Download-Link, um mit dem Herunterladen der Bibliothek zu beginnen, die bereits voran gegangen ist und so getan Nun, entpacken Sie das einfach. Wenn ich also zu meinen Downloads zurückgehe, werde ich diese Dateien schnappen. Und was ich tun möchte, ist, dass ich anfangen möchte, die Bibliothek dem Server hinzuzufügen, den ich laufen werde, rennen , , abgesehen, also gehe zurück zu drei Js, die nicht Master-Build und packte drei Duckman dot Js, die die Männer sind ified Version der Bibliothek. Ich ziehe das einfach in den Server. Alle haben einen Ordner namens Js erstellt, Tempo das in und gehen Sie zurück zu meinem Code-Editor. Also aus Schrammen, eine wirklich schnell gestoppte ich rieche erstellen eine Szene hier. Wie kreativ. Grundsätzlich HTML-Datei, die nur dieses JavaScript lädt und weil es von der Leinwand läuft , anstatt es direkt zum HTML hinzuzufügen, im Grunde nur eine Leinwand den gesamten Bildschirm ausfüllen, also Style-Typ schließen Text Punkt CS uns uh html Körper Rand. Zero äh, Canvas und alle Web GL läuft von der Leinwand, also werden wir eine Leinwand der Szene hinzufügen. Also, das zu sprechen und dann gehen Sie vor und erstellen Sie eine grundlegende gesehen in drei Js. Also geh zurück zu unserem engagierten dort und alles, was wir hier lehren, alles, was wir hier lernen . Dies ist direkt aus den drei Dokumentation auf TV Erste Schritte Bereich so gut, Kredit-Datei für unsere benutzerdefinierte Code halten. Also, äh, die Leiche und dann schaffen wir sie hier. Haben Sie einen Arzt gesehen? - Ja. Und zuerst erstellen wir eine Instanz von drei der bisher drei Jazz-Szene Singen entspricht einer neuen Drei-Dot-Szene und fügen eine Kamera hinzu. Dafür werden wir eine perspektivische Kamera hinzufügen. Es gibt ein paar verschiedene Arten von Kameras, die Sie verwenden können, aber diese eine Art von realen Kameras mit Sachen wie Tiefenschärfe und Perspektive. Also von unserer Kamera entspricht neue Dreipunkt-Perspektive Kamera und wir geben ihm das Feld von U. S. A. 75. Was wäre die Art von Winkel, den die Kamera sehen kann? Also 75 das Seitenverhältnis wird Fensterpunkt inter mit geteilt durch Fensterpunkt in ihren Höhen sein. Ah, die nächste, die die Kamera sehen kann, ist 0,1, und die weitere zweite sehen ist 1000 in drei DS. Es gibt keine Einheiten. Also, wenn Sie von etwas wie CSS kommen, wurden Pixel oder Ari EMS verwendet, Also ist es alle Art von relativ zu sich selbst. Wir sind draußen in der Kamera. Nun, bewegen Sie die Kamera ein wenig zurück von der Mitte des Bildschirms, so Kamera Opposition Punkt sagte gleich fünf standardmäßig. Alles, was wir einfach sein werden. Wenn es hinzugefügt wird, wird es in der Mitte der Szene hinzugefügt, die eine Ex-Frau sagte von 000 Also dafür werden wir die Kamera ein wenig zurückbewegen . Wenn wir also Dinge auf dem Bildschirm positionieren, schauen wir uns diese Objekte an. Okay, also jetzt ist es eine Kapitulation, Also Renderer gleich neue $3 Web GL Runner und Renderer Punktgröße, wenn, ohne Zweifel inter Breite und Fensterpunkt in ihrer Höhe. Und was ist die Leiche? Also Dokumentenkörper Macht ein Stift Kind ihr Punkt-Dom-Element rendert? Es kommt, Also, wenn du zurückgehst, ist dies die grundlegende gesehen. Da ist nichts. Was ist in Cem Gentry? Bislang entspricht Geometrie der neuen Geometrie mit drei Punkten. Also diese Menge Würfel und es wird einen mit einem höchsten auf einer Tiefe von eins haben, wird Material dafür schaffen . Also ist Material gleich neu. Drei stimmen mit Grundmaterial überein, also wird dies nur ein Material sein. Es hat keine Beleuchtung standardmäßig beeinflusst, was wir später werden, aber wir geben ihm nur eine Farbe von Grün. Wir werden es alle zusammen in ein Netz unserer Q B gleich hinzufügen und Sie wieder Punkt Mesh-Geometrie Material ums gesehen Punkt ad Cube. Okay, äh, wir haben zu der Szene hinzugefügt. Lassen Sie uns es tatsächlich auf dem Bildschirm rendern. Also lassen Sie animieren gleich Funktion, so dass wir tatsächlich die Szene vor der Kamera rendern. Wenn wir zurück gehen, gibt es einen Würfel und sagen wir, wir wollen ihn drehen, so dass wir jeden Frame animiert aufrufen müssen , so dass Animationsrahmen animiert werden, so dass es auf jedem Frame und jedem Frame aufgerufen wird. Lassen Sie uns es tatsächlich drehen so gewürfelt Rotation Punkt x plus y. Also, um dies zu decken, wenn die Szene zum ersten Mal startet, wird es diese animate Funktion aufrufen, und die Animate Funktion erhöht die Rotation auf der X-Achse um eine Einheit von 0,1 wird es . Tut mir leid, ich habe etwas nicht. Bestellen. Es wird diese Szene rendern und dann wird es sich wieder aufrufen. Also alle 60 Frames pro Sekunde, wird es die Drehung dieses Würfels erhöhen und lesen oder in die Szene. Also, wenn wir zurück gehen, ist es richtig, fügte hinzu. Also, was wir als nächstes tun wollen, ist etwas Beleuchtung zu diesem, und wir werden in der nächsten Lektion darauf eingehen. 6. Lights hinzufügen: Also haben wir der Szene einen Würfel hinzugefügt und er dreht sich. Aber es nimmt sowieso nicht richtig auf. Sieht also nicht zu realistisch aus. Und der Grund, warum es kein Licht aufnimmt, ist jetzt. Die Art und Weise, wie wir es eingerichtet haben, ist, dass es ein Material verwendet wird, das Netzgrundmaterial genannt wird. Es gibt ein paar verschiedene Arten von Material, das Sie die drei Js verwenden können, und sie alle reagieren auf Licht unterschiedlich oder reagieren auf andere Objekte unterschiedlich. Also für gehen Sie in Maschen-Basismaterial, Sie wissen, Sie können sehen, es ist in einem einfachen Blitz aßen weg. Aber sagen wir, wir wollen tatsächlich Licht haben und es reflektieren und Schatten werfen lassen. Also gehen wir zu etwas, das Gitterbodenmaterial genannt wird. Und so gibt es alle Arten von verschiedenen Sachen, die wir mit dem machen können, wissen Sie, Sie können die Kapazität einstellen, die Sie einstellen können, wie glänzend es ist, aber wir werden das in einem grundlegenden Sinne verwenden. So greifen Mesh langen Material und ersetzen Sie das Material des Würfels mit Mesh entlang so gut. Sagen Sie das und wird sich erfrischen. Es gibt nichts da, und der Grund, warum es nichts gibt, gibt es, weil Chaos falsch reagiert auf Licht. Wir müssen Lichter der Szene hinzufügen. Also lasst uns schnappen. Sagen wir mal im Rampenlicht. So ist ein drei Spotlight und schauen Sie sich die Codebeispiele an. Also hier ist die Schaffung eines Scheinwerfers. Es ist die Einstellung der Farbe des Lichts, und es ist die Einstellung der Position und Sie können andere Dinge wie das tun, sagte Cast Shadow. Oder du könntest die Hälfte deines weit setzen. Das Rampenlicht leuchtet, aber lasst uns das einfach angreifen. Wir werden es hinzufügen oder sehen und, na ja, vielleicht wird es es etwas näher an den Cube bewegen. So gut, sagte es. Bei Expedition Null ist eine Y-Position von 10. Und ist diese Position Stadt und gehen gesehen. Fügen Sie Spotlight hinzu und was vielleicht ist, fügen Sie einfach ein paar mehr hinzu, nur so können wir Art von Licht aus ein paar verschiedenen Blickwinkeln erfassen. Also haben wir einen anderen, der direkt über dem Würfel steht. Das ist also diese eine Exposition der Nully-Y-Position von Zehnen. Abscheidung von Zero, und wir werden eine haben, die tatsächlich hinter dem Würfel ist, die später nützlich sind. Also, was ist das? Dass und jetzt, wenn er getroffen, erfrischend , gesehen werden können Sie sehen, es nimmt das Licht ein bisschen genauer. Okay, in der nächsten Lektion lernen wir, wie man sich um dieses Objekt bewegt, anstatt einen Ton zu drehen. Also sehen wir uns dann. 7. Erkundung einer 3D-Szene: Also, jetzt haben wir den Würfel von selbst drehen und Lichter aufnehmen. Aber wir wollen, dass die Benutzer in der Lage sind, die Bewegung der Szene selbst zu bewältigen. Und um das zu tun, werden wir die automatische Rotation abnehmen und wir haben etwas namens vier B-Steuerelemente und oder Kontrollen ist ein Teil von drei Js, die mit ihm kommen, und es ermöglicht Benutzern, in das Fenster zu klicken und sie können Szene ziehen in der Nähe. Zwei haben geschrieben. Es dreht sich, und sie können auch das Mausrad verwenden, um es zu vergrößern und zu verkleinern. Also werden wir beginnen, indem wir in die Downloads von früher gehen und gehen zu Beispielen Js Kontrollen oder weil Rollen und wir werden das Bachelor-Projekt hinzufügen. Also fallen Sie in den Js-Ordner mit all unseren anderen JavaScript auf gehen Sie zurück zur Haupt-Indexdatei . Und jetzt, da sie so die Dokumentation für oder Kontrollen auf den wichtigsten drei Gasdocks gefunden werden können , so dass wir den Atlanta Code kopieren, wird für Kontrollen aufrufen, wird es der Szene hinzufügen, wird es sagen, um die Kamera zu steuern und die Renderer von früheren Sprengköpfen auf. Dann werden wir auch die Standard-Rotation für den Würfel entfernen. Also geh zurück. Ich kontrolliere nur den Leuchtturm. Ich habe in die Szene geklickt und ich ziehe sie herum. Wenn ich mein Scrollrad verwende, kann ich es auch vergrößern und verkleinern, und das ist großartig. Also haben wir der Szene einen Würfel hinzugefügt. Wir haben es gelassen, und wir verbinden jetzt das Controlling mit ihrem Mund, also gibt es ein bisschen mehr Interaktivität. Also, das ist gut mit Cube. Aber sagen wir, wir wollen eine andere Geometrie machen und wir werden darüber im nächsten Video sprechen , das Sie dann sehen wird. 8. Modelle importieren: Jetzt wollen wir eine Geometrie hinzufügen, die komplexer ist als nur ein Würfel, und wir können das tun, indem wir mehrere Würfel und mehrere Zylinder erstellen und sie zusammensetzen , bis sie etwas ähneln, das uns gefällt. Oder wir könnten sie auch aus externen Quellen importieren. Und drei, Lassen Sie uns Dateien importieren genannt GLT F und G L T F Sie sind Modelle. Sie haben Texturen und Beleuchtung in sie eingebacken, aber sie könnten in etwas wie Maya oder Mixer erstellt und leicht in Web GL importiert werden Und es gibt ein paar verschiedene Websites, von denen Sie diese herunterladen können. . Laden Sie vorhandene von Ich persönlich mag Sketch Fab herunter. Und so ist der Euro Skizze. Haben Sie Dot com. Wenn Sie sich für ein kostenloses Konto anmelden, können Sie suchen, Sagen wir, gut, in Autos. Du. Es gibt verschiedene Automodelle. Einige von ihnen werden bezahlt, einige von ihnen sind kostenlos. Aber für die Person davon, sagen wir, wir wollen, dass aus Bassgitarre gesehen werden. Also lassen Sie uns einfach eine Suche nach Rickenbacker machen. Okay auf, und wir werden herunterladbar klicken. Es gibt also einige kostenlose hier, also hat es dieses ausgewählt, und so wird Ihnen das eine Vorschau des Modells zeigen. Und das ist unten damit. Und bevor Sie alles herunterladen, was Sie brauchen, um ein Konto zu erstellen , werden Sie darin angemeldet sein. Aber das Konto ist kostenlos, und einige der Modelle sind kostenlos. Also schließen wir das ab. Wir werden dies in unserem Finder zeigen und dann fügen wir es in unser Projekt ein. Das nennt man also dieses Modell. Ok? Und dann, wenn Sie zu drei gehen, können wir es laden, indem wir etwas zusätzliches JavaScript für das Projekt benötigen. Muss zu unserem Zahnarzt gehen. Es ist Ordner wird zurück in drei gehen, wird in Beispiele gehen Js Loader und dann greifen Sie den G l t f Buchstaben Tom und dann Tempo out Billigung. Jetzt müssen wir es referenzieren. Also haben wir die Story nächste Akte. G l t f Lader Doktor. Ja, es ist ein bisschen. Also lasst uns unseren Würfel hier entfernen. Und, äh, Barlader gleich neuen drei g l t f Ladelader Nicht laden, und dann werden wir in der Szene anrufen. Also ist der Buchstabe Modell Schrägstrich scheint nicht G. Lt f, sobald das geladen ist. Nun, eigentlich, laden Sie in der Szene. Das ist richtig. Wir müssen GLT übergeben. Okay, das wird die goc fr laden, die wir gerade heruntergeladen haben. Sobald es heruntergeladen wurde, übergeben wir das Objekt in die Szene und dann fügen wir es zurück und drücken. Aktualisieren Auf dieser Seite. Wir sollten den Würfel nicht mehr sehen. Wir sollten die Bassgitarre sehen. Also mit den Steuerelementen, wir haben gerade hinzugefügt, Wir können um sie drehen, sehen das Licht und fangen es, und da ist es. Nun, da wir die Geometrie der Szene hinzugefügt haben, lassen Sie uns ein paar weitere Dinge ändern. Wie wir sehen, ist es nicht wirklich mit Blick auf die Kamera, und es ist schwer, vor dem Hintergrund zu sehen. Also lasst uns alleine eingehen und die Rotation ändern. Und sobald wir Szene hinzufügen, fügen wir hinzu, äh, g L T f nicht gesehen Punkt Rotation wurde eingestellt. So Rotation außerhalb arbeiten auf jeder drei DS Geometrie oder Lichter oder Kameras. Also setzen wir dies einfach auf die X-Achse. Italien Null Grad auf die Warum und setzen Zugang. Es wird 270 Grad sein, also jedes Mal, wenn Sie die Drehung außerhalb einstellen, geht es in der Reihenfolge von X Y Z. Wenn Sie etwas Rotation in drei machen, muss es in Glanz sein, mit dem ich nicht super Versagen bin. Also werden wir nur ein wenig in drei Mathematik gebaut verwenden, um Grad Radiance zu konvertieren. Also drei Punkte Mathe Doc, Trade 270. Das ist auf den Y-Achsen, und wir machen es auf den eingestellten Achsen. Okay, jetzt ist es mit Blick auf die Kamera, und es ist schwer zu sehen, weil es auf einem schwarzen Hintergrund ist, aber wir können das ändern. Also, wenn Sie gehen, um zu mieten, könnten wir gehen Renderer setzen klare Farbe. Das bedeutet, wenn hier nichts erscheint, ist wie die Standard-Fallback-Farbe, und wir werden sie übergeben. Äh, sagen wir White. So ist deine Zeit, F f f f f f f f das und aktualisieren, und es erscheint auf einem weißen Hintergrund, aber es ist irgendwie weit weg. Also lassen Sie uns die Kamera bewegen. Und auch und das kann nur Änderungen sein, um zu sehen, wie es aussieht. Sie ist gut, und vielleicht machen wir die Beleuchtung ein bisschen, weil es wahrscheinlich ein bisschen zu weit ist. Also, wenn wir die Frontlinie ändern, sagen wir, seien Sie voraus auf so X wird Null wild Null sein und diese ed werden,sagen wir, sagen wir, drei und das ist das oberste Licht, das direkt über ihm durch Einheit von drei zu sein. Und wir werden die Hintergrundbeleuchtung so ändern, dass sie direkt hinter der Einheit 30 liegt, so dass Sie sie importiert haben. Es ist vorne und in der Mitte. Es steht dem Benutzer gegenüber, wenn es zum ersten Mal geladen wird, und wir können in ihn eintauchen. Aber die Umlaufbahn steuert. Wir hatten es gerade. Also, jetzt ist es Zeit, ein College hinzuzufügen, so dass Benutzer Art von klicken auf bestimmte Bereiche davon und sehen spezifische Details über diese Bereiche. Und das werden wir in der nächsten Lektion tun, also sehen wir uns dann. 9. Marker hinzufügen: Also jetzt gehen wir weiter und fügen Tooltipps zur Szene hinzu. Also gehen wir zurück in unsere Codebasis. Wir werden hier nur cosom Kommentare erstellen, äh, andere. Also gut, einen Strahl zu erstellen, der alle Marker speichert, die später zu Ihnen zurückkommen, und wir werden ein weiteres Array erstellen, in dem alle Daten gespeichert werden. Wetten Sie auf diese. Es wird also alles enthalten, was du für jeden spezifischen Marker brauchst, und das wird Zeug wie die Position und die Beschreibung, die 17 Klicks darauf auftaucht . Also gut, tolle Ansicht Array wird es Marktdatenposition nennen, wird dies speichern, wie X Y so sagte. 0,2. Wir werden das später ändern. Das ist also nur eine Art Platzhalter. Und das war ein anderer, der sich zu Demonstrationszwecken auf der linken Seite positionieren wird. Okay, also schauen wir uns das jetzt an. Also, wenn wir zum Objekt von Schlüsseln gehen Marker-Daten für jeden Marker gleich mehr Datenschlüssel. Das Konsolenprotokoll wird also alle Marker durchleben und den Index entlang übergeben , also frisches Gruppieren hier etwas. Okay, also sehen Sie, es ist eine Art von Protokollierung der Daten von oben rechts. Also, jetzt wollen wir einige Geometrie mit Parker verbunden zu erstellen und war gut für unsere Geometrie . Uh, lass uns einen Tourist machen. Ein Tourist wird also im Wesentlichen der Strich der Werkzeugspitze sein. So neu für uns befreit, John Attorney, und wir geben dem Radius 0,6. Wir geben es uns mit 0,1, und wir geben ihm 100 Segmente und Material selbst, äh, äh, neues 3-Punkt-Mesh-Grundmaterial. Und wir werden die Grundmaterialien für Chaos verwenden, die wir nicht von der Beleuchtung befreien wollen. Wir wollten schon immer eine konsistente Farbe Kehle sein. Wir machen diese Farbe so grau. Ok. Und weit Touristen sind gleich neuen drei Punkt-Mesh-Geometrie und Material. Und wir wollen dies auch zu einem Drei-D-Objekt hinzufügen. Ein Drei-D-Objekt wird also im Grunde ein Container sein, dem wir Objekte hinzufügen werden. Und das können wir, wenn wir das Objekt bewegen. Wenn Sie die drei Container verschieben, verschieben wir alle Objekte darin. Also werden wir mehr pro Container erstellen, neue drei Dr. Objekte drei auf und wir werden die Touristen zu diesem Marker-Container hinzufügen. Okay, äh, wir werden eine ähnliche Sache machen, aber wir werden einen Kreis darin haben. Also haben wir den Schlaganfall. Und lasst uns einfach diesen Tooltip füllen. Ferne Geometrie ist neue Drei-Punkt-Kreisgeometrie, und wir geben ihm einen Radius von 0,5 auf und 32 Sekunden, und wir geben ihm einen weißen Phil, außer dieser wird etwas Transparenz haben, weil wir halbrechtliches Geschäft sein wollten Deal. Siehe Thrips. Stellen Sie also die Farbe Weiß Set transparent ein. Wahr. Und dann stellen wir die Kapazität auf 0,5 ein. Und dann noch einmal kopieren wir den Marker. Mesh kommt und wir werden auch die Position einstellen. Nachdem wir nun die Touristen und den Kreis zum Marker-Container hinzugefügt haben, positionieren wir den Marker-Container auf dem Bildschirm. So Marker Container Position Punkt-Sets. Und da wir uns die Markierung ansehen, kümmern wir uns um die Positionen. Also für jeden Marker, wissen Sie, wir wollen, dass die 1. 1 0002 und die 2. 1 0,20 Nein ist. Also fangen wir diesen Set-Marker ein. Die Opposition Null verletzt, verärgert sich auch auf der Markt-Up-Session, und wir fügen hinzu, dass der Markt in die Szene kommt. So gesehen Punkt ad Marco Container. Also, jetzt, wenn wir zurückgehen und die Szene, die wir sehen sollten, ist zwei Marker. Einer wird unser Gast haben beide einen grauen Umriss, dass das Innere halbtransparent mit 50% Deckkraft und Weiß sein wird , und sie werden jeweils in der einzigartigen Position sein, die wir hier eingerichtet haben. Wenn du das tust, ja, wir können sehen, dass wir den Kreis haben, der ein bisschen zurück ist, nur weil wir ihn nicht wirklich nach vorne verschoben haben. Wenn du das tust, ja, wir können sehen, dass wir den Kreis haben, der ein bisschen zurück ist, nur weil Wenn wir also die 2. 1 nehmen und den Wert auf 0,2 ändern, werden Sie das tatsächlich sehen. Sehen Sie, wie es sich nach vorne bewegt. Da warst du also an den Positionen und wirst als nächstes etwas Interaktivität mit ihnen haben. Wir sehen uns also in der nächsten Lektion. 10. Positionierung von Markierungen: Jetzt, da wir die 20 Schritte auf dem Bildschirm hinzugefügt haben, müssen wir sie in die Portraitposition verschieben. Und wir können das durch ein bisschen Ratenscheck tun. Oder wir können auch etwas verwenden, das Zweifel dot gov genannt wird. Und was dieser Arzt tut, ist es uns erlaubt, Werte in Echtzeit zu aktualisieren und anzuzeigen. Also, zum Beispiel, wenn ich auf ihre Website gehe, ist es dieses Ding oben, richtig? Und ich kann einige der Werte auf der rechten Seite optimieren und sie im JavaScript auf der linken Seite widerspiegeln . Was wir tun werden, ist, dass wir das der Szene hinzufügen, nur um uns irgendwie einige vorläufige Werte mit welcher Art von Kopieren und Einfügen zu bekommen . Also werde ich gehen, um dot, dot gooey herunterladen . Ich werde das zu meinem Projekt sagen. Geh zurück zu meiner Indexdatei, die der Szene hinzugefügt wurde, geh Dabs gooey Männer sehen ja, und geh zurück zur Szene und erlaube dann ein wenig Platz dafür und sag Helfer, also wird das nur einige Testdaten erfassen. Wir werden das nicht zur Vollzeit behalten. Dies ist nur, um einige Anfangswerte zu erhalten und sie in das reale Labor zu verstopfen. Also werde ich nur eine Funktion erstellen, die bei Helfer aufgerufen wird. Rufen Sie es aus, Helfer, und ich füge ein wenig wie einen Platzhalterkreis hinzu. Bisher für Geometrie gleich Nachrichten. Drei Punkte befürchtet, den Radius von 0,5 zu machen und es rot zu machen. Nur so hebt es sich wirklich vor dem Hintergrund und kommen Sie auf So Sie Marker Apolinar gleich neuen drei Punkt-Mesh-Geometrie Material. Das ist die Szene. Es ist und Position direkt vor der Basis. Also x Wert von Nullwerten Null, dass Wert von 0,1 Es ist jetzt, wenn ich Preview Crips, Sie setzen nur diese Marktopposition, die gesetzt. Okay, also ist es dieser kleine rote Punkt da, und ich werde das mit Zweifeln bewegen Dot Gov Also eine Menge wohl gleich dir Punktpunkt unserer Zustimmung. Es war kein Zweifel, nicht klebrig. Und dann gehen alle gooey dot ad marker Helfer, Opposition X. Also, was das tut, ist das Hinzufügen einer Instanz von Papa dot gov zur Szene und sagen, wir wollen Marker manipulieren, ihre Helferposition und der genaue Wert, den wir manipulieren möchten, ist X, und wir wollen, dass es ein Minimum von eins und ein Maximal eins. Also jetzt, wenn eine Vorschau das sollte es oben sehen, richtig? Und es hat diesen kleinen Schieberegler. Aber ich werde tun, ist, wenn ich das irgendwie in eine Reihe bringen, die ich sein wollte. Ich werde nur irgendwie diesen X-Wert kopieren. Aber wie Sie sehen können, ist es nur irgendwie zwischen negativen zu gehen Ihre. Und das liegt daran, dass es standardmäßig nur ganze Zahlen macht. Also, sag das, um ein bisschen mehr zu sein, um feinere Mitglieder zu haben sag das, um ein bisschen mehr zu sein, um feinere Mitglieder zu haben. Also müssen wir Schritt machen. Ich wurde betreten. Ich lasse es in Schritten von 0,1 gehen und ich werde das für den warum Wert und diese diesen Wert tun . Sagen wir mal, ich will ein System direkt über der Brücke haben, also fahre ich uns dorthin. Vielleicht wollte ich ein bisschen mehr herausstechen. So sagte Thies, sagte Teoh. Höhere Zahl. Und sagen wir, ich will eine Position es nach oben. Oh, schnappen Sie sich das. Sie sind so das sind die X Y Zed Positionen, die ich meinen eventuellen Marktmissbrauch wollen, alles nur eine Art Kopie, die vorbei ist. Jetzt, wenn ich auf Aktualisieren klicke. Mein Marker ist die Position, in der dat dot gov uns gesagt hat, dass der anfängliche Marker war, so dass ich das gleiche mit dem Kopf tun könnte, und ich könnte das mit anderen Markern tun, die vorwärts gehen. Eine andere Sache ist, wenn ich sie drehe. Die Marker drehen sich eigentlich nicht zusammen mit ihm, so dass sie immer vor Fronten stehen, und wir wollen, wenn der Benutzer um zu schwenken, dass wir wollen, dass diese Marker irgendwie immer auf die Kamera blicken . Lassen Sie uns etwas tun, um immer die Drehung der Steuerelemente für etwa zwei Steuerelemente zu erfassen. Finden Sie meine erste Erklärung und ich gehe einfach zu Ihnen. Beschränkt, wie die Steuerelemente drehen können, so dass wir nur auf der Y-Achse drehen wollen, damit es geht Steuerelemente. Sie können die Männer Max Winkel so gesteuert bis Männer polaren Winkel einstellen. Bedeutet das, dass der Polarwinkel gleich Kontrollen ist? Ich bin jetzt in Voll- oder Winkelzeiten, dachte Kuchen geteilt durch zwei, also würde das bedeuten, dass es nur auf der Y-Achse rotiert. Es kann sich nicht auf dem besagten bewegen oder ist okay, also kann ich uns in keinem anderen Flugzeug fahren, das ich will. Wenn die Steuerelemente aktualisiert werden, möchte ich die Marker entsprechend anhören und verschieben. Also gehen Sie zu Kontrollen. Hab sich aus diesem Hörer geändert bei Kamera-Update. Dies würde also eine Funktion aufrufen, die auf Kamera-Update aufgerufen wird, die hier Funktion am Kameratag findet und was ich tun möchte, ist, alle Marker zu durchlaufen und sie zusammen mit dem Winkel zu drehen, den die Kameras gedreht haben. Also sichern Sie sich in der Markierung, die wir zuvor erstellt haben. Ich füge etwas hinzu. Teoh. Fügen Sie alle Märkte zu einem einzigen Raum hinzu. 02 Marker Punkte Push Marker Container Diese verschieben also alle Marker in ein Array, das als Marker bezeichnet wird. Kamera-Aktualisierungen. Ich werde sagen,, Lassen Sie Kamerawinkel gleich Steuerelemente nicht als schönen Winkel bekommt. Und dann Punkte Marker für jeden Markt der Rotation, der Null gesetzt. Dieser Kamerawinkel. Null. Entschuldigung, haben Sie diese Variable in den Kamerawinkel geändert? Wenn jemand dreht die Steuerelemente, es geht Teoh wiederum, Holen Sie sich den Winkel der Steuerelemente und gehen Sie durch jeden einzelnen Marker und drehen Sie den Marker. Passen Sie diesen Kontrollwinkel so an, dass er immer in der Kamera ins Gesicht kommt. Fruits und ich habe hier etwas verpasst, es ist getroffen. Aktualisieren. Oh, okay. So sehen Sie, wie drehten sich an den ersten Markern zusammen mit Kameras, so dass sie immer mit Blick auf die Kamera. Und das nächste, was wir tun werden, ist die Möglichkeit hinzuzufügen, tatsächlich auf die Marke ernsthaft Daten klicken . Also machen wir das im nächsten Video. 11. Klicks erkennen: Nun, da wir die Tool-Tipps hinzugefügt haben, lassen Sie sie klickbar machen. Und wir werden etwas tun, das Ray Casting nennt. So wird Ray-Fasten verwendet, um zu sehen, was eine Maus vorbei ist. Also schätze ich, in diesem Fall wollten wir jemanden. Jemand klickt auf die Leinwand, wir schießen Array von der Maus in die Szene und sehen, was intersex ohne Linie. Also, wenn ich über dieses Strahlen-Casting schweben würde uns sagen, dass die Maus über einen Kreis Touristen und Sie Gitarre, wir gehen voran und fügen Great Casting die Szene hinzu und wir kommen zurück und G o r A Pastor entspricht einem neuen $3 Rate, Casper Und wir müssen auch den Überblick über die Maus behalten. Bisher Maus gleich und Sie drei Punkt-Überläufer zu und lassen Sie uns zurück zu den drei Jazz-Aktien und kopieren Sie diese direkt von dort. Das wird also die Positionierung der Maus im Auge behalten. Gehen Sie zurück die in diesem Schritt weiter, aber kopieren Sie den Ereignis-Listener. Jedes Mal, wenn der Benutzer sich bewegt, würde der Mund wissen, wo das auf dem Bildschirm ist . Ok. Und jetzt lassen Sie uns die Gräfin so einrichten, dass sie Klicks erhalten, damit unsere Leinwand Dokumente entspricht. Darts bekommen auf meinen Tag-Namen bekam den ersten Canvass und diesen Ereignis-Listener. Also, wenn jemand klickt, wird es eine Funktion aufrufen, so kann hinzugefügt und Listener gestartet werden. Klicken Sie auf Kerzen. Klicken Sie auf. Es reißt die Funktion auf dem Campus. Okay, wir richten den Ray Kaster ein und wir schnappen uns mehr dieses Also Break House für Set von der Kamera. Wir verwenden die Maus, und die Kamera erhält eine Liste von allem, was unter der Maus ist, wenn sie darauf klicken , und die einzige Sache, die wir hinzufügen möchten, ist, dass dies rekursiv ist, also wollen wir es sein. Wenn jemand klickt, greift es nicht nur das oberste Element. Es verlässt irgendwie jedes einzelne Kind von dem, was für die Verwendung eines Objekts hilfreich ist. Drei. So schneidet Ray Kaster Objekte, gesehen Children True. Also, das wird dein Carson. Wir speichern einige Daten darüber, was sie tatsächlich angeklickt haben, und wir werden dies einrichten. Bisher ist Marker gleich no für einen Marker. Die Daten für den Marktnamen sind gleich no. Und jetzt werden wir sagen, wenn jemand klickt, dass, wenn intersexuelle Länge, wenn sie etwas angeklickt haben und es interagiert hat, wir werden ausloggen, was sie sammeln. Okay, jetzt, wenn ich hier auf einen Klick auf einen dieser Artikel zurückgehe Entschuldigung. Wir haben einen Fehler gefunden. Ich habe einen Tippfehler, wenn ich darauf klicke und das sagt uns, dass wir ein paar Elemente hier geklickt haben und wir werden einfach wieder zu unseren ursprünglichen Markern gehen und wir werden einige Daten hinzufügen, um uns zu helfen, tatsächlich zu erfassen, was sie gesammelt haben. , Was wir haben,sind Marker Kühlschrank auf einem eingekreiste Benutzerdaten Punkt Markennamen, People's Key. Ok, so heiß hier drinnen. Wenn intersex, wollen wir das Top-Objekt gehen und wir wollen in das Objekt und die Benutzerdaten und den Markennamen zu verankern . Gehen wir einfach ins Fenster zurück. Standardmäßig wird dies eine Liste aller Objekte zurückgeben, auf die geklickt wurde. Und sie sind irgendwie sortiert, da es Ihnen zuerst die nächste geben wird. Und wir wollen uns in die Daten dahinter verwurzeln. Also geh schnapp dir. Das oberste Objekt wird in die Wurzel gehen, wir gehen in das Objekt davon, und wir werden in die Benutzerdaten gehen und nach mehr ihrem Namen suchen Also, wenn wir Markierungsnamen gesetzt sehen , bedeutet das, dann haben sie tatsächlich auf eine -Marker. Wenn wir einfach auf die Bassgitarre klicken würden, gäbe es kein Marketing-Set. Also und wir gehen auf ein nur schnappen das. Also werden wir das wieder an das Objekt von oben binden , was bedeutet, wenn sie gesammelt haben, wird das den Schlüssel dafür schnappen. Und der Schlüssel, den wir verwenden, ist der gleiche wie der Schlüssel aus unseren Marktdaten. Wenn Sie also auf die erste Markierung klicken, würde es Null zurückgeben. Wenn wir auf die zweite Markierung klicken, würde es eine zurückgeben. Und so, wenn wir rausgeflippt sind, können wir irgendwie den tatsächlichen Dad, der damit verbunden ist, schnappen. Wenn Sie also auf die 1. 1 klicken, wird es Position, Überschrift und Beschreibung auf Let's vielleicht zu etwas mehr Details ändern. Also gehen wir Tail Piece und Rick. Also jetzt, wenn ich mich lange erwiesen habe, sollte ich sehen, ob ich auf diese Rückkehr klicke. Okay, also haben wir dieses spezielle Schwanzstück gesammelt oder auf diesen speziellen Marker geklickt, der diese Position hat oder diese Beschreibung und Überschrift hat. Und im nächsten Video zeigen wir, wie man das im Frühjahr positioniert. Nun, da wir genau wissen, was sie gesammelt haben und wir sehen uns dann 12. Tooltips: Also lasst uns jetzt einige Informationen auftauchen. Sobald der Benutzer tatsächlich auf einen Marker klickt und wir gehen zurück zu unserer Basis. Andi war draußen. Platzhalter, so genannte Division, entspricht der QuickInfo. Und was passiert ist, wenn jemand auf einen Marker klickt, wird dieser Tooltip angezeigt und mit Informationen über diesen bestimmten Marker gefüllt . So Werkzeugspitze Position wird absolut sein. Ähm, wir halten es von der Leinwand oder außerhalb der Kamera, denke ich, standardmäßig. Also gruppiert Strumpfhosen und wir werden es einfach schaffen. Wenn jemand darauf klickt, wird es sichtbar sein auf jenseits von Con Straining. So übergeben Sie es E ein und auch eine Masse mit 300 Pixel und Entwicklung von Auto. Okay, gehen wir hinter die Code-Basis und positionieren sie. Wir haben diesen Code. Wir wissen, dass jemand einen Marker sammelt, und wir wissen, was spezifischer Markt ist. Jetzt gehen wir zu Jewell Tipp Container Punkt innere HTML Leute. Es verdient gehen starke Marktdaten. Ihr Name Punkt-Schlagzeile. Okay, was passieren wird, ist, dass jemand darauf klickt, und es wird die Marktdaten bekommen und diese Informationen von oben einholen . So wird es die Schlagzeile füllen. Es wird die Beschreibung in etwas HTML füllen und diesen HTML-Code in den Tool-Tipp ablegen. Und ich schätze, das letzte, was wir tun müssen, ist, dem Tooltip zu sagen, wo er auf dem Bildschirm sein soll , weil er direkt über dem Marker sein muss. Also gehen wir, wenn Marker Name. Also setzen wir hier den Markennamen ein , der jetzt standardmäßig ist. Also wollen wir sagen, wenn jemand tatsächlich auf einen Marker geklickt hat, dann wird der aktive Marker dieser Tooltip Container Punkt Klasse hinzufügen oder Punkt schließen Liste sein. Nicht hinzufügen ist sichtbar. Sonst aktive Marker? Nein und bis Tip-Klassenlisten entfernen. Ist es so ausgeblendet? Wenn jemand den Bildschirm gesammelt hat und es keinen Marconi gibt, müssen wir reden, um den Marker zu positionieren. Also gehen, was könnte eine Funktion für die Erfassung der Ex-Frauen-Werte der Maus klicken und den Markt dort positionieren. Also Karina Funktion für diese Funktion Positionsmarker, und wir werden nur greifen. Lassen Sie Position gleich Bildschirmposition aktive Markerkamera, und wir werden eine Funktion erstellen, um Bildschirmposition Tipps genannt. Das wird uns also genau sagen, wo wir gesammelt haben, was dieser X Y-Wert ist. Bisher. Faktor ist gleich neu. Es wird uns im Grunde sagen, wie der Bildschirm dreht sich wie die X Y Position eines Objekts in der drei D-Szene ist. Und ich schätze, anstatt nur den statischen Wert zu erfassen, wenn jemand darauf klickt , wollen wir es immer wissen, wie wenn sich der Marker bewegt, wenn jemand den Bildschirm dreht , Stelle, an der sich dieser QuickInfo auf dem Bildschirm befindet. Die Tooltip-Daten werden also mit dem Markierungszweifel selbst gedreht. Vektor entspricht also neuen drei Punktfaktor drei. Und ich werde nur diese Codebasis greifen, was ich woanders gestohlen habe, aber das wird im Wesentlichen den X Y-Wert jedes Objekts in der Szene zurückgeben . Also jetzt, wenn dies abmelden wollen, würde er mir sagen, wenn ich diesen Gruppen-Tooltip-Container sammle. Oh, und er findet tatsächlich den Werkzeugtipp. Also haben Werkzeuge Container gleich Dokument? Ich bekomme Element von d nie, um dies zu klicken, es würde uns sagen, dass die Exposition 700 ist. Die weiße Position ist zu 41 diese an Position ist Null. Und wie Sie sehen können, wie es rotiert, um eine Art von bekommen einen Geschmack, dass so Jetzt, wo ich diese Daten habe, möchte ich gehen. Wenn Position X kleiner als Null ist, ist der Containerpunktstil links gleich Null. Was bedeutet, wenn dieser Tooltip im Wesentlichen außerhalb des Bildschirms ist, bewegen Sie den Tooltip nicht aus dem Bildschirm und halten Sie ihn Null sonst, wenn Position Punkt x plus Tooltip Container Nicht alle mit seinem Lektion Fenster Punkt Innen mit gesetzt. Das Gegenteil wäre also, wenn dieser Marker tatsächlich außerhalb des Bildschirms auf der rechten Seite ist. Positionieren Sie die Werkzeugspitze nicht weiter. Wie nicht positionieren Sie Ihre Daten aus dem Bildschirm Sido Position ist, dass die Standardeinstellung die Position dieses Info-Fensters direkt auf dem Marker ist, wenn es im Grunde innerhalb des Bildschirms ist, okay. Und das setzt die Exposition und setzt die y-Position so ein, dass die Standardeinstellung ist . Wenn wir nun darauf klicken, sollte es den Tooltip füllen und die Unfallposition so einstellen, dass sich der Marker befindet . Und es tut das, außer wir setzen keine Hintergrundfarbe. Also, äh, nun, stellen Sie den Hintergrund der QuickInfo. Hintergrundfarbe ist also weiße Reihenfolge. Farbe ist schwarz und viel zu müssen. Es ist ein 10 Pixel und fand heraus, Familien Ariel. Also, da gehst du hin. Wir klicken darauf. Wir haben tatsächlich den Tooltip schweben darüber und dass Grenzen und Auftauchen. Lass uns das ein bisschen dicker machen, okay? Aber Sie werden sehen, dass es sich nicht wirklich bewegt, wenn ich das Modell drehe, also wollen wir das auch tun. Wir gehen zurück. Also jetzt, was wir auch tun wollen, ist zurück auf die Kamera Update gehen, wo wir auf Rotation überprüft und sagen, wann die Kamera aktualisiert Positionsmarker. Das ist also die gleiche Funktion, die wir gerade verwendet haben, um den Marker auf seinen entsprechenden Bereich zu legen . sich die Kamera bei der Kamera-Aktualisierung dreht, positionieren Sie sie, falls eine aktive Markierung vorhanden ist. Also, jetzt, ich drehe, können Sie sehen, dass das Werkzeug Tip zusammen mit ihm rotiert und vielleicht einfach die Polsterung hier ein wenig aufräumen , weil das ein wenig zu viel ist, und das ist eine letzte Ruhe. Wir werden nur unser Werkzeug entfernen, um ihr zu helfen. Und jetzt, da wir gelernt haben, wie Teoh Positionsmarkierungen sie hinzugefügt haben, können wir das etwas mehr ausspülen. Also, jetzt wirst du Sinn bekommen, wie man Marker den Körper hinzufügen, und wir werden sehen, dass im nächsten Video 13. Schlussbemerkung: und das ist das Ende des Kurses. Wir haben die Grundlagen des Erstellens einer Szene, des Importierens externer Modelle, Beleuchtung, so dass nur zwei erforscht werden oder Narren werden und Vergewaltigungscasting verwenden. Mit der Methode gingen wir über, um Co-Ordinaten zu bekommen. Ich habe dem Modell noch ein paar Verwandte hinzugefügt, und hier sind die Endergebnisse. Von hier aus könnten wir Dinge wie bei einem Pre-Loader tun, oder drehen Sie das Objekt, um die Benutzer freien Import gefördert passen. Also würde ich gerne sehen, wo du dieses Wissen als Nächstes nimmst. Also definitiv, wenn du etwas hast, das du liebst, mit mir zu teilen, liebe es, einen Blick darauf . Ich liebe es, über dieses Zeug zu reden, also zögern Sie nicht, mich zu erreichen. Und abgesehen davon, danke für das Zuschauen und wir sehen uns nächstes Mal.