Three.js realisiert den dynamischen 3D-Logoeffekt von Facebook Metaverse

In diesem Artikel wird hauptsächlich beschrieben, wie Sie mit dem Technologie-Stack Three.js + Blender das coole dynamische 3D-Logo von Meta realisieren, einschließlich grundlegender Modellringe, Torusknoten, Pipelines und Modellgenerierung, Modellladen, Hinzufügen von Animationen, Hinzufügen von Klickereignissen, Ändern von Materialien usw.

Hintergrund

Facebook hat vor Kurzem den Namen seiner Muttergesellschaft in Meta geändert und angekündigt, dass es offiziell begonnen hat, in元宇宙🪐 einzusteigen. In diesem Artikel wird hauptsächlich beschrieben, wie Sie mit dem Technologie-Stack Three.js + Blender das coole dynamische 3D - Logo von Meta realisieren, einschließlich grundlegender Modellringe, Torusknoten, Pipelines und Modellgenerierung, Modellladen, Hinzufügen von Animationen, Hinzufügen von Klickereignissen, Ändern von Materialien usw.

Was ist das Metaverse?

Der Begriff Metaverse stammt aus Neal Stephensons 《雪崩》 aus 1992 , der eine virtuelle Welt namens Metaverse parallel zur realen Welt beschreibt, in der alle Menschen im wirklichen Leben einen Netzwerk-Avatar ( Avatar ) haben.維基百科beschreibt das Metaversum wie folgt: 3D virtueller Raum auf Grundlage des Internets der Zukunft mit Funktionen zur Linkwahrnehmung und zum Teilen, der eine virtuell erweiterte physische Realität darstellt, die Konvergenz und physische Beständigkeit aufweist.

Die Konnotation des Metaversums hat die Errungenschaften der Informationsrevolution 5G/6G , der Internetrevolution web3.0 , der Revolution der künstlichen Intelligenz sowie VR , AR , MR und insbesondere der Revolution der Virtual-Reality-Technologie, einschließlich Spiele-Engines, aufgenommen und den Menschen die Möglichkeit aufgezeigt, parallel zur traditionellen physischen Welt eine holografische digitale Welt aufzubauen. Sie hat die Interaktion zwischen Informationswissenschaft, Quantenwissenschaft, Mathematik und Biowissenschaften angestoßen und das wissenschaftliche Paradigma verändert, Durchbrüche in der traditionellen Philosophie, Soziologie und sogar in den Geisteswissenschaften gefördert und umfasst alle digitalen Technologien. Genau wie in der Szene im Film 《頭號玩家》 werden die Menschen eines Tages in der Lage sein, jederzeit und überall ihre Identität zu wechseln, frei zwischen der physischen und der digitalen Welt zu reisen und im Metaversum aus virtuellen Raum- und Zeitknoten zu leben und zu studieren.

Ergebnisse erzielen

Kommen wir zur Sache und schauen uns die Implementierungswirkung des Beispiels in diesem Artikel an.

🔗 -Vorschau: https://dragonir.github.io/3d-meta-logo (Aufgrund der Größe des Modells kann der Ladevorgang langsam sein, bitte haben Sie Geduld)

Entwicklung und Implementierung

📌 : Die obige Beispielanimation zeigt Versuch 4. Wenn Sie den Versuch-und-Irrtum-Prozess (Versuch 1, Versuch 2, Versuch 3) nicht sehen möchten, können Sie direkt zu Versuch 4 springen, um den detaillierten Implementierungsprozess anzuzeigen. Die Schwierigkeiten sind im fehlgeschlagenen Prozess aufgeführt. Wenn Sie die Lösung kennen, teilen Sie sie gerne im Kommentarbereich mit.

Werfen wir vor der Entwicklung einen Blick auf Meta Logo . Wir sehen, dass es sich um einen gefalteten und verdrehten Kreis handelt. Daher können wir bei der Implementierung mit der Implementierung des Kreises beginnen.

Versuch 1: DREI.TorusGeometry

Die von Three.js bereitgestellte grundlegende Geometrie ist THREE.TorusGeometry , eine einfache Grafik, die wie ein Donut 🍩 aussieht. Hauptparameter:

• radius : optional. Definiert die Radiusgröße des Rings. Der Standardwert ist 1 .
• tube : Optional. Definiert den Radius des Torusrohrs. Der Standardwert ist 0.4 .
• radialSegments : Optional. Definiert die Anzahl der Segmente entlang der Ringlänge. Der Standardwert ist 8 .
• tubularSegments : Optional. Definiert die Anzahl der Segmente entlang der Ringbreite. Der Standardwert ist 6 .
• arc : Optional. Definiert die Länge des gezeichneten Kreises. Der Wertebereich beträgt 0 bis 2 * π . Der Standardwert ist 2 * π (ein voller Kreis).

Syntaxbeispiel:

DREI.TorusGeometry(Radius, Rohr, Radialsegmente, Rohrsegmente, Bogen);

😭 失敗: Ich habe keine Möglichkeit gefunden, den Ring zu verdrehen.

Versuch 2: DREI.TorusKnotGeometry

THREE.TorusKnotGeometry können Sie einen dreidimensionalen Torusknoten erstellen. Dabei handelt es sich um einen speziellen Knoten, der wie eine mehrmals um sich selbst gedrehte Röhre aussieht. Hauptparameter:

• radius : optional. Legt den Radius des gesamten Kreises fest. Der Standardwert ist 1 .
• tube : Optional. Legen Sie den Radius des Rohrs fest. Der Standardwert beträgt 0.4 .
• radialSegments : Optional. Geben Sie die Anzahl der Segmente des Rohrquerschnitts an. Je mehr Segmente vorhanden sind, desto glatter wird der Rohrquerschnitt. Der Standardwert ist 8 . tubularSegments : Optional. Geben Sie die Anzahl der Segmente der Pipeline an. Je mehr Segmente vorhanden sind, desto gleichmäßiger verläuft die Pipeline. Der Standardwert ist 64 .
• p : Optional. Bestimmt, wie oft die Geometrie um ihre Rotationssymmetrieachse gedreht wird. Der Standardwert ist 2 .
• q : Optional. Bestimmt, wie oft sich die Geometrie um ihren inneren Ring dreht. Der Standardwert ist 3 .

Syntaxbeispiel:

DREI.TorusKnotGeometry(Radius, Rohr, Radialsegmente, Rohrsegmente, p, q);

😭 失敗: Ich habe keine Möglichkeit gefunden, den Grad der manuellen Verzerrung zu steuern.

Versuch 3: THREE.TubeGeometry

THREE.TubeGeometry extrudiert ein Rohr entlang eines dreidimensionalen Splines. Sie können einige Punkte angeben, um den Pfad zu definieren, und dann THREE.TubeGeometry verwenden, um die Röhre zu erstellen. Hauptparameter:

• path : Diese Eigenschaft verwendet ein THREE.SplineCurve3 -Objekt, um den Pfad anzugeben, dem die Pipeline folgen soll.
• segments : Diese Eigenschaft gibt die Anzahl der Segmente an, die zum Erstellen dieses Rohrs verwendet werden. Der Standardwert ist 64 Je länger der Pfad, desto mehr Segmente sollten angegeben werden.
• radius : Diese Eigenschaft gibt den Radius des Rohrs an. Der Standardwert ist 1 .
• radiusSegments : Diese Eigenschaft gibt die Anzahl der Segmente des Rohrumfangs an. Der Standardwert ist 8 Je mehr Segmente vorhanden sind, desto runder sieht das Rohr aus.
• closed : Wenn diese Eigenschaft auf true gesetzt ist, werden Kopf und Ende des Rohrs verbunden. Der Standardwert ist false .

Codebeispiel

// ...
var Steuerelemente = neue Funktion () {
  //Punktkoordinaten this.deafultpoints = [
    [0, 0,4, -0,4],
    [0,4, 0, 0],
    [0,4, 0,8, 0,4],
    [0, 0,4, 0,4],
    [-0,4, 0, 0],
    [-0,4, 0,8, -0,4],
    [0, 0,4, -0,4]
  ]
  diese.Segmente = 64;
  dieser.radius = 1;
  dies.radiusSegments = 8;
  dies.geschlossen = wahr;
  diese.punkte = [];
  diese.neuePunkte = Funktion () {
    var Punkte = [];
    für (var i = 0; i < controls.deafultpoints.length; i++) {
      var _x = Steuerelemente.Standardpunkte[i][0] * 22;
      var _y = Steuerelemente.Standardpunkte[i][1] * 22;
      var _z = Steuerelemente.Standardpunkte[i][2] * 22;
      Punkte.push(neu DREI.Vektor3(_x, _y, _z));
    }
    Kontrollen.Punkte = Punkte;
    steuert.neuzeichnen();
  };
  dies.redraw = Funktion () {
    redrawGeometryAndUpdateUI(gui, Szene, Steuerung, Funktion() {
      returniere generatePoints(Steuerelemente.Punkte, Steuerelemente.Segmente, Steuerelemente.Radius, Steuerelemente.RadiusSegmente,
        Kontrollen.geschlossen);
    });
  };
};
steuert.neuePunkte();
Funktion generatePoints(Punkte, Segmente, Radius, RadiusSegmente, geschlossen) {
  wenn (spGroup) Szene.entfernen(spGroup);
  spGroup = neues THREE.Object3D();
  var material = neues THREE.MeshBasicMaterial({ Farbe: 0xff0000, transparent: false });
  Punkte.fürJeden(Funktion (Punkt) {
    var spGeom = neues THREE.SphereGeometry(0.1);
    var spMesh = neues THREE.Mesh(spGeom, Material);
    spMesh.position.copy(Punkt);
    spGroup.add(spMesh);
  });
  Szene.Hinzufügen(spGroup);
  gibt neue THREE.TubeGeometry zurück (neue THREE.CatmullRomCurve3 (Punkte), Segmente, Radius, RadiusSegmente, geschlossen);
}
// ...

😊 勉強成功: Aber der Kreis, den die Rohre bilden, ist nicht rund genug. Um einen perfekten Bogen zu erhalten, sind genaue Koordinaten erforderlich, und ich habe noch keinen Weg gefunden, die Koordinaten zu berechnen.

Testversion 4: Blender + Three.js

Obwohl dies mit THREE.TubeGeometry erreicht werden kann, ist der Effekt nicht gut. Um einen glatten Ring zu erzielen, muss dem Rohr eine präzise Funktion für verdrehte Ringkurvenpfade hinzugefügt werden. Aufgrund meiner begrenzten mathematischen Fähigkeiten 🤕️ habe ich noch keine Möglichkeit gefunden, den verdrehten Bogenpfad zu berechnen. Daher haben wir beschlossen, das Problem auf der Modellierungsebene zu lösen.

成功😄 : Aber ich habe viel Zeit damit verbracht, es mit Blender zu modellieren 💔

Modellierungs-Tutorial

Als ich in B站bin ich auf dieses Schatzvideo gestoßen, das dieser große Kerl gepostet hat, und das hat mein Problem gelöst.

🎦 : [Tutorial zum dynamischen Design] Wie spielt man mit AE+Blender? Das dynamische Logo von Facebook Metaverse wurde vollständig analysiert und zu 100 % gelernt

Modellieren mit Blender

Verwenden Sie Blender zum Modellieren und exportieren Sie es im fbx -Format, das Animationen unterstützen kann. Vergessen Sie nicht, beim Exportieren die Option烘焙動畫zu aktivieren.

Abhängigkeiten laden

<script src="./assets/libs/three.js"></script>
<script src="./assets/libs/loaders/FBXLoader.js"></script>
<script src="./assets/libs/inflate.min.js"></script>
<script src="./assets/libs/OrbitControls.js"></script>
<script src="./assets/libs/stats.js"></script>

Szeneninitialisierung

var Container, Statistiken, Steuerungen, Erstellen, Kamera, Szene, Renderer, Licht, anklickbare Objekte = [], Mixer, MixerArr = [], manMixer;
var Uhr = neue DREI.Uhr();
init();
animieren();
Funktion init() {
  Container = Dokument.ErstellenElement('div');
  Dokument.Body.AnhängenUntergeordnetesElement(Container);
  // Szene Szene = neue THREE.Scene();
  Szene.transparent = wahr;
  Szene.Nebel = neuer THREE.Nebel(0xa0a0a0, 200, 1000);
  // Perspektivkamera: Sichtfeld, Seitenverhältnis, Nahebene- und Fernebene-Kamera = neue THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0,1, 1000);
  Kamera.Position.einstellen(0, 4, 16);
  Kamera.lookAt(neu DREI.Vektor3(0, 0, 0));
  // Halbkugel-Lichtquelle: Erstellen Sie eine natürlichere Lichtquelle für Außeneffekte light = new THREE.HemisphereLight(0xefefef);
  Licht.Position.Set(0, 20, 0);
  Szene.Hinzufügen(Licht);
  // Gerichtetes Licht light = new THREE.DirectionalLight(0x2d2d2d);
  Licht.Position.Set(0, 20, 10);
  Licht.castShadow = wahr;
  Szene.Hinzufügen(Licht);
  // Umgebungslicht var ambientLight = new THREE.AmbientLight(0xffffff, .5);
  Szene.Hinzufügen(Umgebungslicht);
  // Raster var grid = new THREE.GridHelper(100, 100, 0xffffff, 0xffffff);
  Rasterposition.set(0, -10, 0);
  Gitter.Material.Deckkraft = 0,3;
  Gitter.Material.transparent = wahr;
  Szene.Hinzufügen(Raster);
  Renderer = neuer THREE.WebGLRenderer({ Antialiasing: true, Alpha: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.outputEncoding = DREI.sRGBEncoding;
  renderer.setSize(Fenster.innereBreite, Fenster.innereHöhe);
  //Setze die Hintergrundfarbe auf transparentrenderer.setClearAlpha(0);
  // Shadowrenderer aktivieren.shadowMap.enabled = true;
  container.anhängenUntergeordnetesElement(renderer.domElement);
  // Objektiv-Controller-Steuerelemente hinzufügen = neues THREE.OrbitControls(Kamera, Renderer.domElement);
  steuert.Ziel.set(0, 0, 0);
  steuert.update();
  window.addEventListener('Größe ändern', beiFenstergröße ändern, false);
  // Leistungs-Plugin initialisieren stats = new Stats();
  Container.Untergeordnetes Anhängen(stats.dom);
}
// Bildschirmzoomfunktion onWindowResize() {
  Kamera.Aspekt = Fenster.Innenbreite / Fenster.Innenhöhe;
  Kamera.updateProjectionMatrix();
  renderer.setSize(Fenster.innereBreite, Fenster.innereHöhe);
}

📌 Sie den detaillierten Prozess der Szeneninitialisierung kennenlernen möchten, können Sie meinen anderen Artikel „Mit three.js coole 3D-Seiten im Acid-Stil erstellen“ lesen.

Logomodell wird geladen

Verwenden Sie FBXLoader , um das Modell zu laden und die Position und Größe des Modells festzulegen.

var loader = neuer THREE.FBXLoader();
loader.load('assets/models/meta.fbx', Funktion (Netz) {
  mesh.traverse(Funktion (Kind) {
    wenn (Kind.istMesh) {
      Kind.castShadow = wahr;
      Kind.receiveShadow = wahr;
    }
  });
  Netz.Rotation.y = Math.PI / 2;
  mesh.position.set(0, 1, 0);
  Mesh.Scale.Set (0,05, 0,05, 0,05);
  Szene.Hinzufügen(Netz);
});

Materialien hinzufügen

Logo dieses Artikels verwendet MeshPhysicalMaterial , ein PBR physikalisches Material, das Lichtberechnungen besser simulieren kann. Im Vergleich zum High-Light-Mesh-Material MeshPhongMaterial ist der Rendering-Effekt realistischer. Verwenden Sie THREE.TextureLoader , um dem Material ein map Attribut hinzuzufügen und die Modelltextur zu laden. Das Bild unten ist eine Texturkarte einer metallischen Textur.

var texLoader = new THREE.TextureLoader();
loader.load('assets/models/meta.fbx', Funktion (Netz) {
  mesh.traverse(Funktion (Kind) {
    wenn (Kind.istMesh) {
      if (child.name === 'Bézier-Kreis') {
        untergeordnetes Material = neues THREE.MeshPhysicalMaterial({
          Karte: texLoader.load("./assets/images/metal.png"),
          Metallgehalt: .2,
          Rauheit: 0,1,
          Belichtung: 0,4
        });
      }
    }
  });
})

Animation hinzufügen

• AnimationMixer -Objekt ist ein Animationsplayer für ein bestimmtes Objekt in der Szene. Wenn mehrere Objekte in einer Szene unabhängig voneinander animiert werden, können Sie für jedes Objekt einen AnimationMixer verwenden.
• Die Methode clipAction des AnimationMixer -Objekts generiert eine Instanz, die die Ausführung der Animation steuern kann.

loader.load('assets/models/meta.fbx', Funktion (Netz) {
  mesh.animations.map(Element => {
    mesh.traverse(Kind => {
      // Da das Modell mehrere Objekte enthält und jedes eine andere Animation hat, fügt dieses Beispiel nur dem Bezier-Kreisnetz eine Animation hinzu, wenn (child.name === 'Bezier-Kreis') {
        let mixer = neues THREE.AnimationMixer(Kind);
        mixerArr.push(Mixer);
        lass animationClip = Element;
        animationClip.Dauer = 8;
        let clipAction = mixer.clipAction(animationClip).play();
        animationClip = clipAction.getClip();
      }
    })
  })
});

Vergessen Sie nach dem Hinzufügen der Animation nicht, die Animation in requestAnimationFrame zu aktualisieren.

Funktion animieren() {
  renderer.render(Szene, Kamera);
  // Zeitintervall zwischen zwei Ausführungen dieser Methode abrufen let time = clock.getDelta();
  // Logoanimation aktualisieren mixerArr.map(mixer => {
    Mixer && Mixer.update(Zeit);
  });
  // Charakteranimation aktualisieren manMixer && manMixer.update(time);
  statistiken.update();
  requestAnimationFrame(animieren);
}

Ladefortschritt anzeigen

FBXLoader gibt außerdem zwei Rückruffunktionen zurück, die wie folgt verwendet werden können, um den Ladefortschritt des Modells und die logische Implementierung bei Ladefehlern anzuzeigen.

<div Klasse="wird geladen" id="wird geladen">
  <p class="text">Ladefortschritt<span id="progress">0 %</span></p>
<div>

var loader = neuer THREE.FBXLoader();
loader.load('assets/models/meta.fbx', mesh => {
}, res => {
  // Ladefortschritt let progress = (res.loaded / res.total * 100).toFixed(0);
  document.getElementById('progress').innerText = Fortschritt;
  wenn (Fortschritt === 100) {
    document.getElementById('wird geladen').style.display = 'keine';
  }
}, err => {
  // Laden fehlgeschlagen console.log(err)
});

Ergebnisse erzielen

Klicken Sie hier, um das Material zu ändern

Hören Sie auf das Klickereignis der Seite und holen Sie sich das aktuelle Klickobjekt über HREE.Raycaster . Um das Beispiel zu zeigen, habe ich das Material des Klickobjekts THREE.MeshStandardMaterial geändert und ihm eine zufällige color , metalness und roughness zugewiesen.

//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 basierend auf der Position des Mausklicks, 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, wo sich die Raycaster-Linie mit allen Modellen schneidet. let intersects = raycaster.intersectObjects(clickableObjects);
  wenn (Schnittpunkt.Länge > 0) {
    Konsole.log(schneidet[0].Objekt)
    Lassen Sie selectedObj = intersects[0].object;
    selectedObj.material = neues THREE.MeshStandardMaterial({
      Farbe: `#${Math.random().toString(16).slice(-6)}`,
      Metallhaftigkeit: Math.random(),
      Rauheit: Math.random()
    })
  }
}
window.addEventListener('click', beiMausklick, false);

📌 Informationen zu Mesh-Materialien finden Sie unter dem Link am Ende des Artikels.

Charaktermodell wird geladen

Der Ladevorgang für das Charaktermodell ist derselbe wie für das Logo . Ich habe eine Figur hinzugefügt, die Kamehameha ausführt, und ich hatte nicht erwartet, dass sie perfekt zur Rotationsanimation des Logo passt 😂 .

loader.load('assets/models/man.fbx', Funktion (Mesh) {
  mesh.traverse(Funktion (Kind) {
    wenn (Kind.istMesh) {
      Kind.castShadow = wahr;
      Kind.receiveShadow = wahr;
    }
  });
  mesh.rotation.y = Math.PI / 2;
  Mesh.Position.Set(-14, -8.4, -3);
  Mesh.Scale.Set (0,085, 0,085, 0,085);
  Szene.Hinzufügen(Netz);
  manMixer = neues THREE.AnimationMixer(mesh);
  let animationClip = mesh.animations[0];
  : let clipAction = manMixer.clipAction(animationClip).play();
  animationClip = clipAction.getClip();
}, res => {
  lass Fortschritt = (res.geladen / res.total * 100).toFixed(0);
  document.getElementById('Fortschritt').innerText = Fortschritt + '%';
  wenn (Zahl(Fortschritt) === 100) {
    document.getElementById('wird geladen').style.display = 'keine';
  }
}, err => {
  console.log(fehler)
});

Die Beispiel-Charaktermodelle in diesem Artikel stammen von mixamo.com, wo es Hunderte von Charakteren und Tausende von Aktionen gibt, die frei kombiniert und免費heruntergeladen werden können. Sie können Ihre Lieblingscharaktere und Animationsaktionen auswählen, um Three.js zu üben.

Zusammenfassen

Zu den wichtigsten Wissenspunkten in diesem Artikel gehören:

• THREE.TorusGeometry : Ein Torus.
• THREE.TorusKnotGeometry : Torusknoten.
• THREE.TubeGeometry : Rohr.
• Blender : Modellierung.
• FBXLoader : lädt das Modell und zeigt den Ladefortschritt an
• . TextureLoader : Lädt Texturen.
• THREE.AnimationMixer : Lädt Animationen.
• THREE.Raycaster : Erfasst Klicks auf das Modell.

🔗 Code: https://github.com/dragonir/3d-meta-logo

Verweise

[1]. Mit three.js eine coole 3D-Seite im Acid-Stil erstellen

[2]. Materialien in ThreeJs verstehen

[3]. Erster Eindruck von Threes Animation

[4]. Was ist das Metaverse?

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

Dies ist das Ende dieses Artikels über die Implementierung des dynamischen 3D-Logos von Facebook Metaverse mit Three.js. Weitere verwandte Inhalte zum dynamischen 3D-Logo von Three.js finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!