Verwenden Sie three.js, um coole 3D-Seiteneffekte im Acid-Stil zu erzielen

In diesem Artikel wird hauptsächlich die Verwendung des Technologie-Stacks React+three.js zum Laden von 3D-Modellen, Hinzufügen von 3D-Text, Erhöhen der Animation, Klicken der Interaktion usw. und zum Zusammenarbeiten mit dem Stildesign vorgestellt, um eine designreiche Seite im 🤢`Acid-Stil zu erstellen.

Hintergrund

Ich habe mir vor Kurzem einige Grundkenntnisse zu WebGL und Three.js angeeignet und möchte daher den in letzter Zeit beliebten Acid-Designstil kombinieren, um meine persönliche Homepage zu dekorieren und einige meiner erworbenen Kenntnisse zusammenzufassen. In diesem Artikel wird hauptsächlich beschrieben, wie Sie mit dem Technologie-Stack React + three.js 3D模型laden, 3D文字hinzufügen, die Animation verbessern, die Klickinteraktion usw. und in Zusammenarbeit mit dem Stildesign eine Seite im 🤢 -Stil voller Design erstellen.

Grundlagen

Three.js

Three.js ist eine 3D引擎, die im Browser läuft und auf dem nativen WebGL Paket basiert. Damit können verschiedene dreidimensionale Szenen erstellt werden, darunter Kameras, Lichter, Schatten, Materialien und andere Objekte. Es ist eine sehr weit verbreitete 3D-Engine. Ausführlichere Informationen erhalten Sie in der offiziellen chinesischen Dokumentation von three.js.

Säure-Design

Der Begriff酸性設計, übersetzt von Acid Graphics , stammt ursprünglich aus der Acid-House-Musik, der elektronischen Tanzmusik und der Hippie-Kultur der上世紀90年代. Im Designbereich steht diese Acid-Ästhetik自由的主張, groteske Grafiken, kräftige und helle Farben, besondere Materialtexturen und eine Vielzahl von Schriftarten, die zusammen einen einzigartigen Acid-Designstil bilden.

Kurz gesagt, die Kombination aus鮮艷高飽和度Farben,五彩斑斕的黑mit Schwarz und Grau als Basis und stark gesättigten熒光色zur Verschönerung des Bildes, die futuristischen, coolen und technologischen Materialien wie液態金屬,玻璃,鋁箔塑料usw., die Anordnung隨機Elemente und Grafiken sowie die ständige重復, das Schneiden und die Kombination幾何圖形sind allesamt ätzende Design-Stile. Der Acid-Stil erfreut sich auch zunehmender Beliebtheit bei Albumcovern, visuellen Postern, Buch- und Filmcovern und im Webdesign.

Ergebnisse erzielen

Online-Vorschau: https://tricell.fun

erreichen

3D-Modell

Szeneninitialisierung

🌏 Erstellen Sie eine Szene

Szene = neue DREI.Szene();

📷 initialisieren

4個Parameter透視相機PerspectiveCamera sind: Sichtfeld, Seitenverhältnis, nahe Ebene und ferne Ebene.

Kamera = neue DREI.Perspektivkamera (70, Fenster.innereBreite / Fenster.innereHöhe, 0,1, 1000);
// Kameraposition einstellen camera.position.set(600, 20, -200);
// Die Kamera fokussiert auf die Bildschirmmitte camera.lookAt(new THREE.Vector3(0, 0, 0));

💡 initialisieren

半球光源HemisphereLight hinzufügen: Erstellen Sie eine natürlichere Lichtquelle für Außeneffekte

Licht = neues THREE.HemisphereLight(0xffffff, 0x444444);
Licht.Position.Set(0, 20, 0);
Szene.Hinzufügen(Licht);
Licht = neues DREI.Richtungslicht(0xffffff);
Licht.Position.Set(0, 20, 10);
Licht.castShadow = wahr;
Szene.Hinzufügen(Licht);

Fügen Sie環境光AmbientLight hinzu:

var ambiColor = "#0C0C0C";
var ambientLight = neues THREE.AmbientLight(ambiColor);
Szene.Hinzufügen(Umgebungslicht);

Eingabehilfen hinzufügen (optional)

📦

GridHelper können Hilfslinien zum Raster hinzugefügt und auch Dekorationen erstellt werden, die über GridHelper(size, divisions, colorCenterLine, colorGrid) umgesetzt werden.

• size : Rasterbreite, Standardwert ist 10 . divisions : gleiche Divisionen, der Standardwert ist 10 .
• colorCenterLine : Farbe der Mittellinie, der Standardwert ist 0x444444 .
• colorGrid : Gitterlinienfarbe, der Standardwert ist 0x888888 .

var grid = neu THREE.GridHelper(1000, 100, 0x000000, 0x000000);
Gitter.Material.Deckkraft = 0,1;
Gitter.Material.transparent = wahr;
Rasterposition.set(0, -240, 0);
Szene.Hinzufügen(Raster);

📦

Mit der Kamerasteuerung OrbitControls kann die dreidimensionale Szene skaliert, verschoben und gedreht werden. Verändert wird dabei im Wesentlichen nicht die Szene, sondern die Parameter der Kamera. OrbitControls.js muss während der Entwicklung separat eingeführt werden.

Steuerungen = neue THREE.OrbitControls(Kamera, Renderer.domElement);
steuert.Ziel.set(0, 0, 0);
steuert.update();

📦 zur Leistungsanzeige hinzufügen

stats ist eine von Three.js entwickelte Hilfsbibliothek, die hauptsächlich dazu dient, die Anzahl der Frames während einer laufenden Animation zu erkennen. stats.js muss auch separat importiert werden.

Statistiken = neue Statistiken();
Container.Untergeordnetes Anhängen(stats.dom);

Laden des Modells

Das in diesem Artikel verwendete 3D Modell der扔鐵餅的人stammt von threedscans.com und kann免費😄 heruntergeladen und verwendet werden. Am Ende dieses Artikels werden mehrere Websites zum kostenlosen Herunterladen von Modellen bereitgestellt, die 200多頁mit kostenlosen Modellen enthalten. Wenn Sie interessiert sind, können Sie Ihr Lieblingsmodell zum Herunterladen und Verwenden auswählen. Natürlich können Studierende mit Modellierungskenntnissen auch professionelle Modellierungssoftware wie blender und 3dmax verwenden, um ihre Lieblingsmodelle zu erstellen.

Laden Sie obj oder fbx -Modell

Sie müssen FBXLoader.js oder OBJLoader.js separat importieren. Die Modelllademethoden der Formate .fbx und .obj sind identisch.

// var loader = neuer THREE.FBXLoader();
var loader = neuer THREE.OBJLoader();
loader.load(Modell, Funktion (Objekt) {
  Objekt.traverse(Funktion (Kind) {
    wenn (Kind.istMesh) {
      Kind.castShadow = wahr;
      Kind.receiveShadow = wahr;
    }
  });
  Objekt.Rotation.y = Math.PI / 2;
  Objekt.Position.Set(0, -200, 0);
  Objekt.Skalierung.Satz (0,32, 0,32, 0,32);
  Modell = Objekt;
  Szene.Hinzufügen(Objekt);
});

GLTF-Modell wird geladen

GLTFLoader.js muss separat vorgestellt werden. Die Methode zum Laden von Modellen im .gltf Format ist etwas anders. Es ist zu beachten, dass das Durchlaufobjekt des Modells und die endgültige Ergänzung zur Szene object.scene statt object ist.

var loader = neuer THREE.GLTFLoader();
loader.load(Modell, Funktion (Objekt) {
  Objekt.Szene.Traverse(Funktion (Kind) {
    wenn (Kind.istMesh) {
      Kind.castShadow = wahr;
      Kind.receiveShadow = wahr;
    }
  });
  Objekt.Szene.Rotation.y = Math.PI / 2;
  Objekt.Szene.Position.Set(0, -240, 0);
  Objekt.Szene.Skalierung.Satz (0,33, 0,33, 0,33);
  Modell = Objekt.Szene;
  Szene.Hinzufügen(Objekt.Szene);
});

Der Effekt nach dem Hinzufügen des Netzes und dem Laden des Modells wird in der folgenden Abbildung dargestellt.

Drehscheibenanimation hinzufügen

Fügen Sie den Drehscheiben-Animationseffekt hinzu, indem Sie die Seite mit requestAnimationFrame aktualisieren. window.requestAnimationFrame() teilt dem Browser mit, dass Sie eine Animation durchführen möchten, und fordert den Browser auf, die angegebene Rückruffunktion aufzurufen, um die Animation vor dem nächsten Neuzeichnen zu aktualisieren. Diese Methode erfordert die Übergabe einer Callback-Funktion als Parameter, die vor dem nächsten Neuzeichnen des Browsers ausgeführt wird.

Funktion animieren () {
  requestAnimationFrame(animieren);
  // Während die Seite neu gezeichnet wird, wird rotation.y der Szene kontinuierlich geändert, um eine Rotation zu erreichen scene.rotation.y -= 0.015;
  renderer.render(Szene, Kamera);
}

Hinzufügen von Klickinteraktionen

Wenn wir in der Three.js Szene auf ein Modell klicken möchten, um dessen Informationen abzurufen oder andere Vorgänge auszuführen, müssen wir Raycaster（光線投射） verwenden. Das Prinzip besteht darin, an der Stelle, an der Sie mit der Maus klicken, einen Strahlenstrahl auszusenden, und alle Objekte im Strahl werden aufgezeichnet. Die grundlegende Syntax ist Raycaster(origin, direction, near, far) , wobei:

• origin : Der Startpunktvektor des Strahls.
• direction : Der Richtungsvektor des Strahls.
• near : Alle zurückgegebenen Ergebnisse sollten weiter als near liegen. Der Wert darf nicht negativ sein und der Standardwert ist 0 .
• far : Alle zurückgegebenen Ergebnisse sollten „näher als far sein. Darf nicht kleiner als near sein, der Standardwert無窮大.

Die grundlegenden Schritte der Codeimplementierung sind: Koordinaten der Maus auf dem Bildschirm abrufen → Bildschirmkoordinaten in Standardgerätekoordinaten umwandeln → Standardgerätekoordinaten in Weltkoordinaten umwandeln → Weltkoordinaten der Maus in der Szene abrufen → Einheitsvektor für die Strahlausrichtung basierend auf den Weltkoordinaten und der Kamera generieren → Raycaster-Objekt basierend auf dem Einheitsvektor für die Strahlausrichtung erstellen.

//Raycaster- und Mausvariablen deklarieren var raycaster = new THREE.Raycaster();
var Maus = neuer DREI.Vektor2();
beiMausklick = Ereignis => {
  //Konvertieren Sie die Bildschirmkoordinaten der Mausklickposition in Standardkoordinaten in Threejs, mit der Bildschirmmitte als Ursprung und einem Wertebereich von -1 bis 1.
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
  // Berechnen Sie den Raycaster basierend auf der Position des Mauszeigers und der aktuellen Kameramatrix
  raycaster.setFromCamera(Maus, Kamera);
  // Holen Sie sich die Array-Sammlung der Schnittpunkte zwischen der Raycaster-Linie und allen Modellen. let intersects = raycaster.intersectObjects(scene.children);
  wenn (Schnittpunkt.Länge > 0) {
    Alarm('HALLO WELT')
    // Durch Klicken auf die verschiedenen Meshes können durch Durchqueren unterschiedliche Interaktionen ausgelöst werden, wie zum Beispiel:
    Lassen Sie selectedObj = intersects[0].object;
    wenn (selectedObj.name === 'Auto') {
      Alarm('Auto 🚗')
    }
  }
}
window.addEventListener('click', beiMausklick, false);

3D-Text hinzufügen

Verwenden Sie TextGeometry(text : String, parameters : Object) um 3D文字hinzuzufügen. Im Folgenden finden Sie Beschreibungen der Eigenschaften, die festgelegt werden können:

• size : Schriftgröße, normalerweise die Höhe der Großbuchstaben.
• height : Die Dicke des Textes. weight : Der Wert ist normal oder bold gibt an, ob fett gedruckt werden soll.
• font : Schriftart, der Standard ist helvetiker , der der referenzierten Schriftartdatei entsprechen muss.
• style : Der Wert ist normal oder italics gibt an, ob es kursiv ist
• bevelThickness : Fasendicke.
• bevelSize : Abschrägungsbreite.
• curveSegments : Die Anzahl der Bogensegmente, die die Kurve des Textes glatter machen.
• bevelEnabled : Boolescher Wert, ob eine Fase verwendet werden soll, d. h. eine Abschrägung an den Kanten.

var loader = neuer THREE.FontLoader();
loader.load('gentilis_regular.typeface.json', Funktion (Schriftart) {
  var textGeo = new THREE.TextGeometry('HALLO WELT', {
    Schriftart: Schriftart,
    Größe: .8,
    Höhe: .8,
    Kurvensegmente: .05,
    AbschrägungDicke: .05,
    AbschrägungGröße: .05,
    bevelEnabled: wahr
  });
  var textMaterial = neues THREE.MeshPhongMaterial({ Farbe: 0x03c03c });
  var mesh = neues THREE.Mesh(textGeo, textMaterial);
  mesh.position.set(0, 3.8, 0);
  Szene.Hinzufügen(Netz);
}); 

Optimierung

Jetzt ist das Laden des Modells im Wesentlichen abgeschlossen, aber das Volumen der 3D -Modelle ist im Allgemeinen groß. Nach der Bereitstellung stellte ich fest, dass das Laden der Webseite sehr langsam ist, was sich auf die Benutzererfahrung auswirkt. Es ist sehr wichtig, die Modellgröße zu reduzieren. Ich habe lange im Internet nach Komprimierungstools gesucht und festgestellt, dass ich mit obj2gltf größere Modelle im OBJ -Format in gltf -Modelle konvertieren kann, ohne eine umfangreiche 3D建模軟件installieren zu müssen. Dadurch kann ich das Modellvolumen effektiv optimieren und die Ladegeschwindigkeit der Webseite verbessern.

Installieren

npm installiere obj2gltf --save

Kopieren Sie das Obj-Modell in das folgende Verzeichnis

node_modules\obj2gltf\bin

Transkodierungsanweisungen ausführen

Knoten obj2gltf.js -i demo.obj -o demo.gltf

Wie in der Abbildung gezeigt, wird der obige Inhalt angezeigt und die Transkodierung ist abgeschlossen. Vergleicht man die Dateigrößen vor und nach der Konvertierung, beträgt in diesem Beispiel die ursprüngliche Dateigröße von kas.obj 9.7M und die konvertierte Datei kas.gltf nur 4.6M , also die Hälfte der Größe. Zu diesem Zeitpunkt wird das konvertierte Modell auf die Seite geladen und mit bloßem Auge ist die Änderung des Modelleffekts kaum zu erkennen. Gleichzeitig wird die Seitenladegeschwindigkeit erheblich verbessert.

obj2gltf kann auch als Bibliothek verwendet werden, um Modelle in Echtzeit über node服務zu konvertieren. Interessierte Studierende können über den Link am Ende des Artikels mehr erfahren.
Sie können auch 3D Modellierungssoftware wie blender verwenden, um das Modell manuell zu komprimieren und zu optimieren, indem面數und縮小體積. Dieser Optimierungseffekt ist deutlicher.

Vollständiger Code

var Modell = erforderlich('@/assets/models/kas.gltf');
Var-Container, Statistiken, Steuerelemente;
var Kamera, Szene, Renderer, Licht, Modell;
Klasse Kas erweitert React.Component {
  rendern () {
    zurückkehren (
      <div id="kas"></div>
    )
  }
  componentDidMount() {
    dies.initThree();
  }
  initDrei () {
    init();
    animieren();
    Funktion init () {
      Container = Dokument.getElementById('kas');
      Szene = neue DREI.Szene();
      Szene.Nebel = neuer THREE.Nebel(0xa0a0a0, 200, 1000);
      // Perspektivkamera: Sichtfeld, Seitenverhältnis, Nahebene- und Fernebene-Kamera = neue THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0,1, 1000);
      Kamera.Position.eingestellt(600, 20, -200);
      Kamera.lookAt(neu DREI.Vektor3(0, 0, 0));
      // Halbkugel-Lichtquelle: Erstellen Sie eine natürlichere Lichtquelle für Außeneffekte light = new THREE.HemisphereLight(0xffffff, 0x444444);
      Licht.Position.Set(0, 20, 0);
      Szene.Hinzufügen(Licht);
      Licht = neues THREE.DirectionalLight(0xffffff);
      Licht.Position.Set(0, 20, 10);
      Licht.castShadow = wahr;
      Szene.Hinzufügen(Licht);
      // Umgebungslicht var ambiColor = '#0C0C0C';
      var ambientLight = neues THREE.AmbientLight(ambiColor);
      Szene.Hinzufügen(Umgebungslicht);
      // Raster var grid = new THREE.GridHelper(1000, 100, 0x000000, 0x000000);
      Gitter.Material.Deckkraft = 0,1;
      Gitter.Material.transparent = wahr;
      Rasterposition.set(0, -240, 0);
      Szene.Hinzufügen(Raster);
      // GLTF-Modell laden var loader = new THREE.GLTFLoader();
      loader.load(Modell, Funktion (Objekt) {
        Objekt.Szene.Traverse(Funktion (Kind) {
          wenn (Kind.istMesh) {
            Kind.castShadow = wahr;
            Kind.receiveShadow = wahr;
          }
        });
        Objekt.Szene.Rotation.y = Math.PI / 2;
        Objekt.Szene.Position.Set(0, -240, 0);
        Objekt.Szene.Skalierung.Satz (0,33, 0,33, 0,33);
        Modell = Objekt.Szene;
        Szene.Hinzufügen(Objekt.Szene);
      });
      Renderer = neuer THREE.WebGLRenderer({ Antialiasing: true, Alpha: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(Fenster.innereBreite, Fenster.innereHöhe);
      renderer.setClearAlpha(0);
      renderer.shadowMap.enabled = true;
      container.anhängenUntergeordnetesElement(renderer.domElement);
      window.addEventListener('Größe ändern', () => {
        Kamera.Aspekt = Fenster.Innenbreite / Fenster.Innenhöhe;
        Kamera.updateProjectionMatrix();
        renderer.setSize(Fenster.innereBreite, Fenster.innereHöhe);
      }, FALSCH);
      Statistiken = neue Statistiken();
      Container.Untergeordnetes Anhängen(stats.dom);
    }
    Funktion animieren () {
      var Uhr = neue DREI.Uhr()
      requestAnimationFrame(animieren);
      var delta = clock.getDelta();
      Szene.Rotation.y -= 0,015;
      renderer.render(Szene, Kamera);
      statistiken.update();
    }
    // Klickereignis hinzufügen // Raycaster- und Mausvariablen deklarieren var raycaster = new THREE.Raycaster();
    var Maus = neuer DREI.Vektor2();
    Funktion beiMausklick(Ereignis) {
      // Berechnen Sie die Position des vom Raycaster benötigten Punkts durch die Mausklickposition, mit der Bildschirmmitte als Ursprung und einem Wertebereich von -1 bis 1.
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
      // Berechnen Sie den Raycaster basierend auf der Position des Mauszeigers und der aktuellen Kameramatrix
      raycaster.setFromCamera(Maus, Kamera);
      // Holen Sie sich die Array-Sammlung der Schnittpunkte zwischen der Raycaster-Linie und allen Modellen var intersects = raycaster.intersectObjects(scene.children);
      wenn (Schnittpunkt.Länge > 0) {
        Alarm('HALLO WELT')
      }
    }
    window.addEventListener('click', beiMausklick, false);
  }
}

Andere Designelemente

In diesem Artikel wird hauptsächlich das Laden von 3D元素vorgestellt. Aufgrund der begrenzten Länge des Artikels und der Zeit (博主太懶😂 maybe wird die Implementierung anderer Elemente nicht im Detail erläutert (vielleicht fasse ich es später zusammen). Interessierte Schüler können die folgenden hervorragenden Artikel anderer großer Meister lesen.

Flüssiger Hintergrund

靜態flüssige Hintergründe können mit SVG-Filtern erstellt werden. Lesen Sie „Muster mit SVG filter erstellen“. Um動態flüssige Hintergründe zu erstellen, können Sie Three.js in Kombination mit nativem GLSL verwenden. Zur Implementierung können Sie das CodePen Shader Template-Beispiel zu Rate ziehen.

Informationen zu Acid-Effekt-Schriftarten wie Metall-, Neon- und Glitch-Effekten finden Sie in meinem anderen Artikel „Erzielen Sie visuelle Effekte im Stil von Cyberpunk 2077 mit nur wenigen CSS-Schritten“ oder Sie können die Designgenerierung verwenden. Aus Zeitgründen werden der Metalleffekt-Text in diesem Projekt und der Text in der Bannerüberschrift dieses Artikels alle mithilfe einer Website zur Generierung von Online-Kunstschriftarten generiert. Interessierte Schüler können versuchen, ihn selbst zu entwerfen.

Weitere Optimierungen in der Zukunft

• #todo -Stil Implementierung eines flüssigen Hintergrunds.
• #todo 3D模型Flüssigmetalleffekt.

three.js hervorragende Fallempfehlung

Abschließend möchte ich Ihnen einige tolle three.js -Projekte empfehlen, die Sie gemeinsam erleben und lernen können. Ob Seiteninteraktion, visuelles Design oder Leistungsoptimierung, sie haben das Beste erreicht und Sie können viel von ihnen lernen.

GitHub-Homepage: 3D地球zeigt die beliebtesten Repositories der Welt in Echtzeit.

kodeclubs: Ein Low-Polygon 3D城市in der dritten Person.

Sneaker-Anzeige: Dynamische 720度-Anzeige von Sneakers.

Sandskulpturentanz: Sandskulpturen-Tänzertiere.

Zenly-Software: Chinesische Homepage Zenly App .

Verweise

three.js: https://threejs.org

obj2gltf: https://github.com/CesiumGS/obj2gltf

Über 200 Seiten mit kostenlosen 3D-Modellen https://www.turbosquid.com

Kostenlose 3D-Statuen: https://threedscans.com

Kostenlose 3D-Modelle: https://free3d.com

Online-Generierung künstlerischer Schriftarten: https://cooltext.com

Was ist Acid Design: https://www.shejipi.com/361258.html

Autor: dragonir Artikel-URL: https://www.cnblogs.com/dragonir/p/15350537.html

Dies ist das Ende dieses Artikels über die Verwendung von three.js zur Implementierung einer coolen 3D-Seite im Acid-Stil. Weitere verwandte Inhalte zu 3D-Seiten im Acid-Stil von three.js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!