So schmelzen Sie ein 3D-Objekt mit drei.js

Sep 11, 2025

wie man

Das Web, wie wir es wissen, ändert sich ständig und entwickelt sich. Was wir uns immer noch erinnern können, als ein einfaches und unkompliziertes Medium vor einigen Jahren eine andere Dimension gewonnen hat, und es sieht nicht so aus, als würde es auch dort aufhören. Für ein Webseitenersteller , was einst Teil von Science-Fiction-Film-Visual-Effekte ist, ist jetzt auf einer auf Ihrer Couch liegenden Tablet möglich, und es gibt Gebäude mit großen interaktiven Installationen, die eigentlich nur Vollbild-Google Chrome-Fenster sind.

Befolgen Sie die folgenden Schritte, um herauszufinden, wie Sie mit drei.js einen realistischen Schmelzwirkung erstellen können.

01. Richten Sie die drei.js-Szene ein

Greifen Sie auf die Drei.js-Bibliothek und fügen Sie es in Ihre Website ein. Sie müssen den Webglrenderer, die Szene und die PerspectiveCamera instanziieren müssen. Nachdem diese instanziiert sind, müssen Sie die Szene rendern AnfrageArbeitsrame. .

02. Fügen Sie der Szene Beleuchtung hinzu

Als nächstes müssen die Leuchten der 3D-Szene hinzugefügt werden. In diesem Beispiel werden zwei Leuchten verwendet: ein Umgebungslicht und ein Punktlicht. Das Umgebungslicht dient als allgemeine globale Farbe für die Szene, während das Punktlicht Licht emittiert, das mit der Entfernung verringert. Dies gibt der Szene einen Kontrast.

 VARBIENTLIGHT = NEUE TRITE DREIES.AMBARTIGKEIT (0xccccccc);
Szene.Add (Ambientlight);
VAR Pointlight = NEUE TRIEN.Pointlight (0xFFFFFF, 1);
Pointlight.Position.Set (10, 5, 0);

03. Laden Sie das 3D-Modell

Nun, da die Szene eingerichtet wurde, muss das 3D-Modell eingeladen werden. Das Modell kann mit einem beliebigen unterstützten Format (JSON, OBJ, DAE usw.) geladen werden. Nachfolgend finden Sie ein Beispiel, um ein DAE-Modell zu laden. In diesem Beispiel ist es sehr wichtig, dass das Modell genügend Polygone hat, um Scheitelpunktänderungen auszuführen.

Der Hirschschädel, der in diesem Beispiel verwendet wird, hat 3.500 Polys. Wenn die Polyzählung zu niedrig ist, sind die Scheitelpunktieranimationen zu explizit und verzerrt.

 Loader = Neuer drei.Colladaloader ();
loader.load ('dae / deer_skull / deer_skull.dae', onloadcomplethandler);

04. Fügen Sie eine Bump-Karte hinzu

Bump Maps eignen sich hervorragend zum Hinzufügen Ihrer Texturen zu einem niedrigen Preis. Sobald Sie Ihr Bump-Kartenbild erstellt haben, können Sie es implementieren, indem Sie ihn einfach auf das Material wie unten auftragen. Sie müssen auch die Skala Ihrer Bump-Map anpassen, um die Skala Ihres Modells anzupassen.

 Material.BumpMap = 'IMG / Deer_Skull / Deer-Bump.jpg';
material.bumpscale = .008;

05. Verwenden Sie den Vertex-Animator

In seiner gesamten Site nutzt Johnny eine Spielerweiterung von Jerome Etienne für drei.js, die es erleichtern, Scheitelpunktieranimationen zu leichtern. Diese Erweiterung ermöglicht einen einfachen Zugriff auf jeden Scheitelpunkt eines Modells an der Bildrate, wodurch es einfach ist, die Scheitelpunkte mit Wellenformen zu manipulieren.

Das Vertex-Animationserweiterung. ist über Etienne's Github erhältlich. Wir werden weiter gehen, wie es in den nächsten Schritten verwendet wird.

Users can interact with the 3D model and view from multiple angles — Benutzer können mit dem 3D-Modell und Ansicht von mehreren Winkeln interagieren

06. Fangen Sie an

Das Schmelzen eines Stücks der Geometrie beinhaltet einige Gesamtschritte. Zuerst wird jeder Punkt kontinuierlich nach unten gedrückt. Wenn ein Punkt den Boden erreicht, ist es mit dem, was wir einen "Push Vector" anrufen, gedrückt.

Als nächstes geben wir den Punkten, die sich entlang des Bodens eine Dicke sammeln, so dass die geschmolzene Geometrie nicht vollständig flach ist. Um dies zu erreichen, hat Johnny Code von Skeel Lees VFX Shader in Houdini und modifiziert.

07. Beginnen Sie mit dem Bewegen der Scheitelpunkte nach unten

Nachfolgend finden Sie ein Beispielnutzung der Verwendung des Vertex-Animators, um die Geometrie eines Modells die Geometrie eines Modells in Richtung Boden zu drücken.

 VAR PREXANIMATION = NEUE TRITEX.VERTEXANIMATION (Geometrie, Funktion (Ursprung, Position, Delta, JETZT) {Position.Y - = MellowAMOUNT * Modelhöhe;}

Dies führt zu den von der schmelzend . Denken Sie daran, auch "Update" auf Ihrer Scheitelpunktanimation in dem Render-Zyklus anzurufen.

08. Bestimmen Sie den Push-Vektor

Wenn ein Punkt den Boden erreicht hat, muss er nach außen gedrückt werden, um einen Schmelzwirkung zu erreichen. Der untenstehende Code ermittelt, welche Richtung in den X- und Z-Achsen den Scheitelpunkt drücken, so dass Sie eine einheitliche Verschiebung erhalten. Die Bedingung stellt sicher, dass nur Punkte, die die niedrigsten Grenzen des Modells (den Boden) erreicht haben, nach außen gedrückt werden.

 if (position.y & lt; bbox.min.e.y) {
  var centroid = bbox.max.clone (). Hinzufügen (bbox.min.clone ()). DIRESSCALAR (2.0);
PushVector = Position.Clone (). Sub (Centroid);
PushVector.Y = 0; }

09. Machen Sie die Schmelze natürlich

Der untenstehende Code verwendet Geräusche, um Zufälligkeit in der Bewegung zu schaffen, damit sich die Schmelze organisch anfühlt. Die Rauschvariablen können optimiert werden, um den gewünschten Effekt zu erhalten. Das Geräusch wird dann auf den Schubvektor zusammen mit aufgebracht schmelzend und Spreadamount. Um die Rate und Größe des geschmolzenen Pools zu steuern. Dieser äußere Vektor wird schließlich berechnet und anschließend auf den Scheitelpunkt selbst angewendet.

VAR n = Noiseamplitude * Generator.GETVAL ((position.x) * GeräuscheFrequenz + Geräuschoffset);
VAR OUTWARDVector = PushVector.multiplyscalar ((((((Smnelamount * Spreadamount) + N) * Outwardpeed);
Position.add (Outwardvector);

10. Gib der geschmolzenen Poolstärke

Der bisher erläuterte Code wird den Schmelzwirkung erzielen, aber zwei Dinge sind daran falsch. Erstens fühlt sich der Pool ziemlich flach an, da alle Punkte in derselben Y-Position geschmolzen sind. Zweitens, da sie alle dieselben y teilen, werden zu viele Punkte auf derselben Höhe gestapelt, die flackern kann. Um dies zu vermeiden, wird bei der Schmelzfrequenz eine Dicke aufgebracht:

 Position.Y + = Mellowamount * Poolthickness;

11. Probieren Sie es bei anderen Modellen aus

Mit dem obigen Code kann jedes Modell mit ausreichend Polygonen geschmolzen werden. Laden Sie eine ZIP-Datei herunter den Code herunter Hier Und tauschen Sie das Modell mit etwas aus, das Sie möchten. Habe Spaß!

Dieser Artikel erschien ursprünglich in Webdesigner Ausgabe 265. Kaufen Sie es Hier .

Zum Thema passende Artikel:

Erstellen Sie interaktive 3D-Visuals mit drei.js
Die besten Farbwerkzeuge für Webdesigner
Hüten Sie sich auf die Schneide des Webdesigns

So schmelzen Sie ein 3D-Objekt mit drei.js

01. Richten Sie die drei.js-Szene ein

02. Fügen Sie der Szene Beleuchtung hinzu

03. Laden Sie das 3D-Modell

04. Fügen Sie eine Bump-Karte hinzu

05. Verwenden Sie den Vertex-Animator

06. Fangen Sie an

07. Beginnen Sie mit dem Bewegen der Scheitelpunkte nach unten

08. Bestimmen Sie den Push-Vektor

09. Machen Sie die Schmelze natürlich

10. Gib der geschmolzenen Poolstärke

11. Probieren Sie es bei anderen Modellen aus

wie man - Die beliebtesten Artikel

Lino Printmaking: Eine Einführung

Animation zu SVG mit CSS

Alles, was Sie über JavaScript-Code-Splitting wissen müssen

Erste Schritte mit webvr

Affinity Designer: So verwenden Sie Gitter

Farbfarbe Graustufenarbeit in Photoshop

Wie man überzeugende Reflexionen malen

15 Tipps zur Quervorrichtungsoptimierung

Kategorien