Wenn es um das Bloggen geht, muss jeder damit vertraut sein. Ob Sie ein Veteran sind, der viele Jahre am Arbeitsplatz hart gearbeitet hat, oder ein junger Vogel, der in der Schule hart gearbeitet hat, Sie sollten die Erfahrung gemacht haben, sich „anzuziehen“. " ein Blog, wie z. B.: Stellen Sie Bilder ein, die Ihnen gefallen, fügen Sie coole Interaktionen hinzu, wechseln Sie zu einem DIY-Blog-Thema und mehr. Aber egal, wie man sich „verkleidet“, man kann dem flachen „sterblichen Körper“ nicht entkommen.
Heute bringt Ihnen HelloGitHub ein Open-Source-3D-Blogprojekt. Um ehrlich zu sein, war ich schockiert, als ich diesen Blog zum ersten Mal besuchte, was die Erkenntnis des Blogs untergrub. Nach dem Betreten müssen Sie ein 3D-Auto steuern, um den Artikel zu "finden", bevor Sie ihn lesen können, was sehr interessant ist!
Online: https://bruno-simon.com/
Als Nächstes stellt dieser Artikel zunächst vor, wie das Projekt lokal ausgeführt wird, erklärt dann den Quellcode und die zugehörigen Technologien und bringt Ihnen schließlich bei, wie Sie den Code ändern und Ihre eigenen Blog-Posts darin einfügen, um zu einem 3D-Blog zu aktualisieren! Lassen Sie uns nun in diesen Open-Source-3D-Blog gehen und Überraschung in Interesse verwandeln.
1. Einleitung
1.1 Installationsschritte
Reden Sie nicht viel, laufen Sie einfach und sprechen Sie, es dauert nur 4 Schritte. Der Befehl lautet wie folgt:
# 1.下载项目
git clone [email protected]:brunosimon/folio-2019.git
# 2.安装了 Parcel（Web 应用打包工具）
npm install -g parcel-bundler
# 3.安装依赖（仅第一次需要）
npm i
# 4.运行
npm run dev
Tipp: Ich werde hier nicht zu viel vorstellen , wie man Node.js installiert !
1.2 Betriebseffekt
Schauen wir uns zunächst an, wie dieser Blog aussieht:
Ein roter, niedlicher kleiner Jeep, der frei über die grenzenlose Karte galoppiert, Sie können auch hupen, um den Spaß zu erhöhen, ja! Dieser Blog kommt auch mit Soundeffekten.
1.3 Minispiele
Gerade als Sie das Auto „fahren“ und singen, werden Sie plötzlich von der vom Autor geschaffenen 3D-Welt „entführt“! Denn er hat nicht nur einfache Modelle, sondern kommt auch mit einigen sehr interessanten Minispielen daher.
Sie können zum Beispiel plötzlich beschleunigen und diese drei "Schaumwände" treffen:
Oder "Bowling" im kleinen Jeep:
Oder absolvieren Sie ein „spannendes“ Langlauftraining:
Sind diese kleinen Spiele sehr interessant?
1.4 Über den Autor
Der Autor, der einen so interessanten 3D-Blog schreiben kann, muss auch ein sehr interessanter Mensch sein, aber er hat auch sein eigenes Leben in dieses Projekt „dargestellt“.
Wir können ungefähr erahnen, dass der Alltag dieses Chefs in etwa „eine Person, ein Hund“ ist, und er liebt seinen Hund sehr. Neben Spielen gehören Fitness, Ausgehen und andere Aktivitäten dazu.
Ah! Was für ein angenehmes Leben~ Wo ist das Leben eines Programmierers? Dies ist offensichtlich ein Leben in Reichtum und Freiheit! Wer denkt, dieser Blog sei nur ein Lebenslauf, der irrt: Wenn unser kleiner Jeep zum „Projekt“ fährt, sehen wir viele technische Blogbeiträge der Autoren.
Nachdem wir uns über Hausaufgaben unterhalten haben, betreten wir die Welt des Codes!
2. Projektübersicht
2.1 Projektstruktur
Schauen wir uns zunächst die Projektstruktur an:
Eine kurze Übersicht dieser Verzeichnisse:
Gibt es viele Dateien, die ich nicht verstehe? Es spielt keine Rolle, beginnen wir mit der wichtigsten Datei, dem bekanntesten srcOrdner , in dem der gesamte Kerncode abgelegt wird. Und die wichtigste Codedatei, glaube ich, sieht man auf einen Blick, ja! Das ist index.js.
import './style/main.css'
import Application from './javascript/Application.js'
window.application = new Application({
$canvas: document.querySelector('.js-canvas'),
useComposer: true
})
index.jsIst das nicht sehr einfach, es sagt uns nur, dass alle Effekte, die wir gerade gesehen haben, eins sind canvas! Die Codes für die Verarbeitungslogik stammen aus Application.js, hier extrahieren wir einige wichtige Technologie-Stacks und Kernbibliotheken, die im Projekt verwendet werden, und geben eine kurze Einführung.
Ich glaube, viele Freunde haben es schon erraten, ja! Das ist Three.js.
2.2 Drei.js
Three.js ist eine 3D-JavaScript-Bibliothek, mit der Entwickler 3D-Erlebnisse im Web erstellen können, und sie ist der beste Partner für WebGL.
Adresse: https://github.com/mrdoob/three.js
Was ist also WebGL? WebGL ist eine JavaScript-API, die mit den meisten modernen Browsern kompatibel ist und die Graphics Processing Unit (GPU) direkt verwendet, was eine hervorragende Optimierung und mehr Kontrolle ermöglicht und schnell ist.
Natives WebGL ist jedoch schwierig und kompliziert. Die Verwendung von nativem WebGL zum Zeichnen eines Dreiecks auf der Leinwand erfordert mindestens 100 Codezeilen . In diesem Fall kann das Hinzufügen von Perspektive, Beleuchtung, Modellen, Animationen usw. sich vorstellen, wie sehr es kahl wird. Um den Programmierern die Haare zu sparen, wurde die Three.js-Bibliothek geboren. Sein Wert besteht darin, dass es den Prozess des Umgangs mit all den oben genannten Punkten vereinfacht und Sie mit nur wenigen Codezeilen eine animierte 3D-Szene erhalten können .
2.3 dat.gui
Eine weitere Bibliothek, die in diesem 3D-Blogprojekt verwendet wird, ist: dat.gui.js, eine leichtgewichtige grafische Benutzeroberfläche zum Ändern von Variablen in JavaScript.Mit dieser Bibliothek ist es einfach, Schnittstellenkomponenten zu erstellen. Die implementierte Schnittstelle sieht ungefähr so aus:
3. Erklären Sie den Quellcode
Nachdem wir die wichtigen technischen Punkte vorgestellt haben, gehen wir zurück zur Kerndatei der Logikverarbeitung Application.jsund beginnen Erläuterung des Quellcodes.
3.1 Die Welt bauen
Aus der Codestruktur können wir sehen, dass der Eintrag this.setWorldin , werfen wir einen kurzen Blick auf den Code hier:
constructor(_options)
{
// Options
this.config = _options.config
this.debug = _options.debug
...
// Set up
this.container = new THREE.Object3D()
this.container.matrixAutoUpdate = false
this.setSounds() // 声音
this.setControls() // 一些按键控制等
this.setFloor() // 地板设置
this.setAreas() // 区域设置
this.setStartingScreen() // 首屏动画（loading > start）
}
Ich glaube, dass Sie einige der oben genannten Einstellungen auf einen Blick verstehen können. Hier sind einige Methodennamen, die Zweifel hervorrufen können, und eine kurze Erklärung. this.setControlsEs umfasst hauptsächlich zwei Methoden: this.setActionsund this.setKeyboard, hier ist die Tastensteuerung des kleinen Jeeps, der fährt und hupt.
Und es ist this.setFloorhauptsächlich für die Konfigurationsdatei des Bodenstils der aktuellen Szene. Wenn Ihnen das ursprüngliche Farbschema nicht gefällt, können Sie eine "bunte" Farbe anpassen, aber die Prämisse ist, eine bestimmte Ästhetik zu haben, sonst kann es sein wie unten gezeigt umgedreht werden .
Hier passen wir nur die Farben der vier Ecken der Szene an (oben links, oben rechts, unten links und unten rechts). Das Code-Snippet lautet wie folgt:
// Colors 修改前
this.colors = {}
this.colors.topLeft = '#f5883c'
this.colors.topRight = '#ff9043'
this.colors.bottomRight = '#fccf92'
this.colors.bottomLeft = '#f5aa58'
// Colors 修改后
this.colors = {}
this.colors.topLeft = 'red'
this.colors.topRight = 'yello'
this.colors.bottomRight = 'blue'
this.colors.bottomLeft = 'black'
Der Rest ist this.setAreashauptsächlich für einige Mausereignisse, damit wir die ganze "Welt" mit der Maus ziehen und erkunden können, einschließlich mousemove, mousedown, touchstartusw. Die entsprechenden Codes werden nicht veröffentlicht, und Interessierte können sie selbst erkunden~
3.2 Nach dem Start
Die obigen Konstruktionen sind Codes, die ausgeführt werden, wenn die Startseite angezeigt wird, was dem Laden einiger Ressourcen im Voraus entspricht, und der Rest des Ladens beginnt, nachdem wir auf „Start“ geklickt haben.
In World.jsder Datei finden wir auch den entsprechenden Code this.start.
// On interact, reveal 点击 start 的交互
this.startingScreen.area.on('interact', () =>
{
TweenLite.to(this.startingScreen.startLabel.material, 0.3, { opacity: 0, delay: 0.4 })
// 剩下的资源加载
this.start()
window.setTimeout(() =>
{
this.reveal.go()
}, 600)
})
Bei startdieser Methode werden mehr Inhalte geladen, z. B. das Laden des kleinen Jeeps und das Laden der Liste der Artikel, die wir am meisten wissen möchten.
start()
{
this.setCar() // 汽车加载
this.areas.car = this.car
this.setSections() // 文章加载
}
Das ist richtig, es ist das. Als nächstes müssen wir das Richtungsschild des Artikeleingangs finden. Das heißt, die x- und y-Achse geben die Koordinatenposition des Objekts auf der Leinwand an, und wir können es auch an eine beliebige Position verschieben.
// Projects
this.sections.projects = new ProjectsSection({
...options,
x: 30,
y: - 30
})
Hier müssen wir kurz das Koordinatenachsensystem Three.jsvon , das das rechtshändige Koordinatensystem annimmt, wie in der folgenden Abbildung gezeigt, und dem linkshändigen Koordinatensystem entspricht:
Wenn wir also den Wert von x erhöhen, werden wir feststellen, dass der Abstand des gesamten Artikels größer wird.In ähnlicher Weise hat das Ändern des Werts von y den gleichen Effekt.
3.3 Artikelliste
Beim Betrachten ProjectsSection.jsder Datei haben wir festgestellt, dass viele Bilder darin sind. Machen Sie sich keine Sorgen, wenn Sie nach unten schauen, und Sie werden eines sehen setList. Die Änderungen sind wie folgt:
setList()
{
this.list = [
{
name: 'HelloGitHub',
imageSources:
[
projectsThreejsJourneySlideESources
],
floorTexture: this.resources.items.projectsThreejsJourneyFloorTexture,
link:
{
href: 'https://hellogithub.com/',
// 控制按钮的位置
x: - 5.8,
y: - 4.5,
// 控制open按钮大小（0,0）的时候无边框
halfExtents:
{
x: 2,
y: 1
}
},
distinctions:
[
// 一个3d模型的图标,xy是坐标轴位置
{ type: 'fwa', x: 4.15, y: 5.15 }
]
}
]
}
Auf diese Weise haben Sie Ihren "eigenen" 3D-Blog, aber um bescheiden zu sein, 3D gehört anderen, und der Blog ist Ihr eigener . Sehen wir uns das einmal aus der Nähe an:
Lassen Sie uns in Kombination mit dem Bild den obigen Code erklären:
1. imageSources: Es ist das Bild auf der "Werbetafel". Ich habe hier nur ein Bild von der Homepage der HelloGitHub-Community gemacht. Du kannst auch mehrere Bilder wie im Original-Blog einstellen.
Bildspeicheradresse und Importregeln:
import projectsThreejsJourneySlideESources from '../../../models/projects/threejsJourney/slideE.jpg'
2. floorTextureDie "Bodentextur", also das Bild, das wir auf dem Boden "liegen" sehen, fragen Sie sich vielleicht: Warum können wir das Bild nicht einfach darauf legen und müssen es in eine textureTextur
Da dies eine 3D-Welt ist, ändert sich unsere Sicht auf das Diagramm, wenn wir die Maus nach oben und unten ziehen, also müssen wir das Diagramm in einen 3D-Container "stecken", damit die 3D-Welt, die wir bauen, real und real ist . Hier folgen wir also dem Code, um abzuleiten, wie dieser Graph generiert wird.
floorTexture: this.resources.items.projectsThreejsJourneyFloorTexture,
Wir erfahren, dass es unter resourcesdem Objekt . Nachdem wir Schicht für Schicht überprüft hatten, stellten wir fest, dass es geladen Application.jswurde als . Wenn wir in Resources.jsdie Datei , können wir feststellen, dass es viele Ressourcendateien wie und so weiter gibt..png.glb
Was ist eine glb-Datei?
.glbDateien mit der oben genannten Endung , die im GL Transfer Format (glTF) gespeicherte 3D-Modelle enthalten. Es speichert Informationen über das 3D-Modell in einem binären Format, z. B. Knotenhierarchie, Kameras und Materialien, Animationen und Netze. .glbfile ist die binäre Version .glTFder Datei .
3.4 Etwas tiefer gehen
Erkunden Sie dann oben: wie die Textur generiert wird, und folgen Sie Resources.jsder Datei, um sie zu sehen.
Wenn Resources.jsSie projectsThreejsJourneyFloorTexturedie Schlüsselwörter oben nicht direkt finden können, löschen Sie einige englische Wörter und versuchen Sie es erneut. Wir werden eine solche Codezeile in this.loader.loaddieser :
{ name: 'projectsThreejsJourneyFloor', source: projectsThreejsJourneyFloorSource, type: 'texture' },
Folgen Sie seinem sourceFeld um erneut zu suchen, und Sie werden die zugehörige Bilddatei finden:
import projectsThreejsJourneyFloorSource from '../models/projects/threejsJourney/floorTexture2.png'
Sie müssen neugierig sein, warum können Sie nicht direkt suchen? Lassen Sie uns den langen Code falten und einen Blick darauf werfen, Sie werden eine Handler-Funktion mit einem Namen finden:
this.loader.on('fileEnd', (_resource, _data) =>
{
this.items[_resource.name] = _data
// Texture
if(_resource.type === 'texture')
{
const texture = new THREE.Texture(_data)
texture.needsUpdate = true
this.items[`${_resource.name}Texture`] = texture
}
// Trigger progress
this.trigger('progress', [this.loader.loaded / this.loader.toLoad])
})
Richtig, die Verarbeitungsfunktion fügt dem Objektnamen automatisch ein Suffix Texturehinzu , was als sehr streng bezeichnet werden kann, da es sich von einer gewöhnlichen Bilddatei in eine "Textur"-Datei geändert hat, die an den 3D-Container angehängt werden muss.
Kehren wir nun zur obigen setListMethode . Andere Dateiverknüpfungen, Koordinatenachsenpositionen des Modells, ich glaube, Sie haben sie schon auf einen Blick gesehen!
Fünf, das Ende
Das Lesen des Quellcodes muss kein einfacher Prozess sein, insbesondere wenn man als Anfänger beginnt. Obwohl es schwierig ist, gibt es oft kleine Überraschungen, die mich inspirieren, zum Beispiel: Beim immer wieder Lesen des Quellcodes ist es sehr interessant, plötzlich einen kleinen Wissenspunkt zu entdecken.
In diesem 3D-Blogprojekt gibt es zum Beispiel viele Bilder wie dieses:
Als ich darauf klickte, sah ich ein dunkles Bild.Zuerst wusste ich nicht, was es war, aber als sich mein Verständnis des Codes vertiefte. Plötzlich dämmerte mir, dass dies die Position des Modells und die Darstellung des Schatteneffekts sind.
Endlich ist dieser kurze 3D-Blogeintrag da, und wir verabschieden uns gleich von allen Passagieren. Tatsächlich ist der Inhalt des gesamten Originaldokuments sehr reichhaltig, einschließlich vieler 3D-Modelldateien, optimierter Paketkonfigurationen usw., die einer eingehenderen und systematischeren Untersuchung wert sind, aber aufgrund des begrenzten Platzes und der begrenzten Fähigkeiten werde ich schreiben heute zuerst hier. Wenn Sie daran interessiert sind, den Quellcode zu durchsuchen, werden Sie weitere unerwartete Entdeckungen finden.
Das Obige ist der gesamte Inhalt dieses Artikels. Wenn Sie denken, dass dieser Artikel gut geschrieben ist, geben Sie mir bitte ein Like . Ihre Unterstützung ist die Motivation für mein Update.