Erste Erfahrungen mit der Texterstellung mit Javascript Three.js

Inhaltsverzeichnis

Wirkung

Beginnen Sie mit der Texterstellung

Erstellen Sie zuerst den Font Loader
Schriftbibliothek laden
Erstellen von Textgeometrie
Berechnen Sie das Begrenzungsrechteck der Textgeometrie
Gespiegelten Text erstellen
Erstellen einer halbtransparenten Ebene

Rendern

Informationen zu Textkonstruktorparametern

Wenn CurveSegments niedriger eingestellt ist, können Sie sehen, dass der Text nicht so glatt ist

Wenn die Abschrägung eingeschaltet ist, können Sie beobachten, dass die Kanten der Schrift abgerundet und nicht mehr scharf werden.

Einstellen der Abschrägungsparameter

Vollständiger Code

Zusammenfassen

Wirkung

Bildbeschreibung hier einfügen

Stellen Sie zunächst die erforderlichen Komponenten vor

importiere './build/three.js';
importiere './libs/js/controls/OrbitControls.js'
importiere { FontLoader } aus './libs/jsm/loaders/FontLoader.js';
importiere { TextGeometry } aus './libs/jsm/geometries/TextGeometry.js';

Dann ist es notwendig, die Szene, den Renderer, die Kamera und den Controller zu initialisieren

		var Renderer, Szene, Kamera, Steuerungen
		// Initialisiere die Szenenfunktion initScene() {
            Szene = neue DREI.Szene();
            //Raucheffekt zur Szene hinzufügen// Parameter: Rauchfarbe, Rauchreichweite nah, Rauchreichweite fern
            Szene.Nebel = neu DREI.Nebel(0x000000, 0, 3000)
            // Achsen zur Szene hinzufügen var axes = new THREE.AxesHelper(100)
            Szene.add(Achsen)
        }
        // Initialisiere die Renderer-Funktion initRenderer() {
            // Ob Antialias aktiviert ist renderer = new THREE.WebGLRenderer({ antialias: true })
            renderer.setSize(Fenster.innereBreite, Fenster.innereHöhe)
            renderer.setClearColor(0xeeeeee)
            Dokument.body.appendChild(renderer.domElement);
        }
        // Initialisiere die Kamerafunktion initCamera() {
            Kamera = neue DREI.Perspektivkamera(45, Fenster.innereBreite / Fenster.innereHöhe, 0,1, 1000)
            Kameraposition.x = 50
            Kameraposition.y = 50
            Kameraposition.z = 50
        }
        // Initialisiere die Controller-Funktion initControls() {
            Steuerungen = neue THREE.OrbitControls(Kamera, Renderer.domElement)
            controls.enableZoom = false; //Ob Zoom aktiviert werden soll;
            controls.minPolarAngle = Math.PI / 2.5; //Begrenzung des minimalen Drehwinkels in vertikaler Richtung auf 0 Grad auf der positiven y-Achse controls.maxPolarAngle = Math.PI / 2.5; //Begrenzung des maximalen Drehwinkels in vertikaler Richtung auf 0 Grad auf der positiven y-Achse}

Initialisieren der Lichtquelle

		// Initialisiere die Lichtquellenfunktion initLight() {
        // Weißes Licht, Lichtstärke 1
            var Punktlicht = neues DREI.Punktlicht(0xffffff, 1);
            PunktLicht.Position.Setzen(0, 100, 100);
            Szene.Hinzufügen(PunktLicht);
            var Punktlicht = neues DREI.Punktlicht(0xffffff, 1);
            PunktLicht.Position.Setzen(0, 100, -100);
            Szene.Hinzufügen(PunktLicht);
        }

Beginnen Sie mit der Texterstellung

Erstellen Sie zuerst den Font Loader

var loader = neuer FontLoader();

Schriftbibliothek laden

Nach dem erfolgreichen Laden der Schriftbibliotheksressource wird die Schriftbibliothek an die Rückruffunktion übergeben

loader.load (Quelle, Rückruf)

Die Ressourcen der Schriftbibliothek können die gewünschte TTF-Schriftdatei über typeface.json auswählen, in eine JSON-Datei konvertieren und dann die Schriftgeometrie in der Rückruffunktion erstellen.

loader.load('./fonts/FZKaTong-M19S_Regular.json', Funktion (Antwort) {
               //Hier Text erstellen})

Erstellen von Textgeometrie

				// Textpuffergeometrie erstellen var textGeometry = new TextGeometry('TextGeometry', {
                	// Schriftart Schriftart: Antwort,
                    // Schriftgröße: 15,
                    // Schriftstärke Höhe: 1,
                    // Die Anzahl der Punkte auf der Textkurve. Je höher die Zahl, desto glatter die Schriftkurve. curveSegments: 12,
                    // Ob die Abschrägung (sanfter Übergang von Kanten und Ecken) eingeschaltet werden soll
                    bevelEnabled: false,
                    // Die Tiefe der Abschrägung des Textes bevelThickness: 0,1,
                    // Der Erweiterungsabstand zwischen der Abschrägung und der ursprünglichen Textkontur (Abschrägungsgröße)
                    Abschrägungsgröße: 0,1,
                    // Anzahl der Abschrägungssegmente bevelSegments: 3
                })

				//Textmaterial //Material-Array verwenden var textMaterial = [
                    // Das erste Element ändert die Vorder- und Rückseite des Textes new THREE.MeshPhongMaterial( { color: 0x00ff00, flatShading: true } ), // Vorderseite
                    // Das zweite Element ändert die Textseite (oben und unten)
					neues THREE.MeshPhongMaterial( { Farbe: 0x0000ff, flatShading: true } ) // Seite
                    // Phong Mesh-Material kann glänzende Oberflächen mit spiegelnden Glanzlichtern simulieren (wie beispielsweise lackiertes Holz)
				] 
				// Text erstellen var text = new THREE.Mesh(textGeometry, textMaterial)

Berechnen Sie das Begrenzungsrechteck der Textgeometrie

Wir können uns vorstellen, dass der geometrische Körper in einem unsichtbaren rechteckigen Würfelcontainer gespeichert ist und die Standardposition dieses Containers der Ursprung ist und sich nach außen entlang der positiven Richtung der x- und z-Achse erstreckt, sodass sich unser Text nicht in der Mitte des Sichtfelds befindet.
An diesem Punkt können wir das äußere Begrenzungsrechteck der Geometrie berechnen und die Position der Geometrie so einstellen, dass sie sich um die Hälfte ihrer Länge in die entgegengesetzte Richtung bewegt, sodass sie sich, unabhängig von ihrer Länge, immer in der Mitte des Sichtfelds befindet.

				// computeBoundingBox() berechnet das äußere Begrenzungsrechteck der aktuellen Geometrie textGeometry.computeBoundingBox();
                // console.log(textGeometry.boundingBox); Überprüfen Sie die Scheitelpunktposition des äußeren Begrenzungsrechtecks // Verschieben Sie die Textposition um die halbe Textlänge nach links var centerOffset = -0,5*(textGeometry.boundingBox.max.x-textGeometry.boundingBox.min.x)
                text.position.x = Mittenversatz
                text.position.z = 0  
                Szene.Hinzufügen(Text);

Gespiegelten Text erstellen

				//Erstelle einen Textspiegel var mirror = new THREE.Mesh(textGeometry, textMaterial)
                // Um 180 Grad drehen mirror.rotation.x = Math.PI
                Spiegelposition.x = Mittelpunktsversatz
                Spiegelposition y = -8
                Szene.Hinzufügen(Spiegel)

Erstellen einer halbtransparenten Ebene

				//Erstelle einen Textspiegel var mirror = new THREE.Mesh(textGeometry, textMaterial)
                // Um 180 Grad drehen mirror.rotation.x = Math.PI
                Spiegelposition.x = Mittelpunktsversatz
                Spiegelposition y = -8
                Szene.Hinzufügen(Spiegel)

Rendern

		Funktion rendern() {
            renderer.render(Szene, Kamera);
            AnfrageAnimationFrame(rendern)
        }
        Funktion start() {
            initRenderer()
            : InitScene();
            initCamera();
            initControls()
            initLight()
            initText()
            machen()
        }
        Start()

Informationen zu Textkonstruktorparametern

Wenn CurveSegments niedriger eingestellt ist, können Sie sehen, dass der Text nicht so glatt ist

// Die Anzahl der Punkte auf der Textkurve. Je höher der Punkt, desto glatter die Kurve. Kurvensegmente: 1,

Bildbeschreibung hier einfügen

Wenn die Abschrägung eingeschaltet ist, können Sie beobachten, dass die Kanten der Schrift abgerundet und nicht mehr scharf werden.

// Ob die Abschrägung (sanfter Übergang von Kanten und Ecken) eingeschaltet werden soll
bevelEnabled: wahr,

Bildbeschreibung hier einfügen

Einstellen der Abschrägungsparameter

// Die Tiefe der Abschrägung des Textes bevelThickness: 0,1,
// Der Erweiterungsabstand zwischen der Abschrägung und der ursprünglichen Textkontur (Abschrägungsgröße)
Abschrägungsgröße: .1,
// Anzahl der Abschrägungssegmente bevelSegments: 3

Vollständiger Code

<Skripttyp="Modul">
        importiere './build/three.js';
        importiere './libs/js/controls/OrbitControls.js'
        importiere { FontLoader } aus './libs/jsm/loaders/FontLoader.js';
        importiere { TextGeometry } aus './libs/jsm/geometries/TextGeometry.js';
        var Renderer, Szene, Kamera, Steuerungen
        // Initialisiere die Renderer-Funktion initRenderer() {
            // Ob Antialias aktiviert ist renderer = new THREE.WebGLRenderer({ antialias: true })
            renderer.setSize(Fenster.innereBreite, Fenster.innereHöhe)
            renderer.setClearColor(0xeeeeee)
            Dokument.body.appendChild(renderer.domElement);
        }
        // Initialisiere die Szenenfunktion initScene() {
            Szene = neue DREI.Szene();
            //Raucheffekt zur Szene hinzufügen// Parameter: Rauchfarbe, Rauchreichweite nah, Rauchreichweite fern
            Szene.Nebel = neu DREI.Nebel(0x000000, 0, 3000)
            // Achsen zur Szene hinzufügen var axes = new THREE.AxesHelper(100)
            Szene.add(Achsen)
        }
        // Initialisiere die Kamerafunktion initCamera() {
            Kamera = neue DREI.Perspektivkamera(45, Fenster.innereBreite / Fenster.innereHöhe, 0,1, 1000)
            Kameraposition.x = 50
            Kameraposition.y = 50
            Kameraposition.z = 50
        }
        // Initialisiere die Controller-Funktion initControls() {
            Steuerungen = neue THREE.OrbitControls(Kamera, Renderer.domElement)
        }
        // Initialisiere die Lichtquellenfunktion initLight() {
            var Punktlicht = neues DREI.Punktlicht(0xffffff, 1);
            PunktLicht.Position.Setzen(0, 100, 100);
            Szene.Hinzufügen(PunktLicht);
            var Punktlicht = neues DREI.Punktlicht(0xffffff, 1);
            PunktLicht.Position.Setzen(0, 100, -100);
            Szene.Hinzufügen(PunktLicht);
        }
        Funktion initText() {
            var loader = neuer FontLoader();
            loader.load('./fonts/FZKaTong-M19S_Regular.json', Funktion (Antwort) {
                // Textgeometrie erstellen var textGeometry = new TextGeometry('Textgeometrie ändern', {
                    Schriftart: Antwort,
                    // Schriftgröße: 15,
                    // Schriftstärke Höhe: 4,
                    // Die Anzahl der Punkte auf der Textkurve. Je höher der Punkt, desto glatter die Kurve. Kurvensegmente: 12,
                    // Ob die Abschrägung (sanfter Übergang von Kanten und Ecken) eingeschaltet werden soll
                    bevelEnabled: wahr,
                    // Die Tiefe der Abschrägung des Textes bevelThickness: 0,1,
                    // Der Erweiterungsabstand zwischen der Abschrägung und der ursprünglichen Textkontur (Abschrägungsgröße)
                    Abschrägungsgröße: .1,
                    // Anzahl der Abschrägungssegmente bevelSegments: 3
                })
                //Textmaterial //Material-Array verwenden var textMaterial = [
                    // Das erste Element ändert die Vorder- und Rückseite des Textes new THREE.MeshPhongMaterial( { color: 0x00ff00, flatShading: true } ), // Vorderseite
                    // Das zweite Element ändert die Textseite (oben und unten)
					neues THREE.MeshPhongMaterial( { Farbe: 0x0000ff, flatShading: true } ) // Seite
                    // Phong-Mesh-Material kann glänzende Oberflächen mit spiegelnden Glanzlichtern simulieren (wie beispielsweise lackiertes Holz)
				] 
                var text = neues THREE.Mesh(Textgeometrie, Textmaterial)
                // computeBoundingBox() berechnet das Begrenzungsrechteck der aktuellen Geometrie textGeometry.computeBoundingBox();
                // console.log(textGeometry.boundingBox);
                var centerOffset = -0,5*(textGeometry.boundingBox.max.x-textGeometry.boundingBox.min.x)
                text.position.x = Mittenversatz
                text.position.z = 0  
                Szene.Hinzufügen(Text);
                //Erstelle einen Textspiegel var mirror = new THREE.Mesh(textGeometry, textMaterial)
                Spiegel.Rotation.x = Math.PI
                Spiegelposition.x = Mittelpunktsversatz
                Spiegelposition y = -8
                Szene.Hinzufügen(Spiegel)
                // Eine halbtransparente Ebene erstellen var plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(200,200),new THREE.MeshBasicMaterial({color:0xffffff,opacity:.5,transparent:true}))
                Ebene.Rotation.x = -Math.PI / 2
                Ebene.Position.y = -3
                Szene.Hinzufügen(Flugzeug)
            })
        }
        Funktion rendern() {
            renderer.render(Szene, Kamera);
            AnfrageAnimationFrame(rendern)
        }
        Funktion start() {
            initRenderer()
            : InitScene();
            initCamera();
            initControls()
            initLight()
            initText()
            machen()
        }
        Start()
    </Skript>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren:

Three.js realisiert den dynamischen 3D-Logoeffekt von Facebook Metaverse
Detaillierter Prozess zum Zeichnen dreidimensionaler Pfeillinien mit three.js
Verwenden Sie three.js, um coole 3D-Seiteneffekte im Acid-Stil zu erzielen
So erzielen Sie mit three.js einen dynamischen 3D-Texteffekt
Three.js-Beispielcode zur Implementierung des Tautropfen-Animationseffekts
Detaillierte Erläuterung der Verwendung und Leistungstests von Multithreading in three.js

<<: So stellen Sie mit Node-Red eine Verbindung zur MySQL-Datenbank her

>>: Beispielcode zum Mischen von Float und Margin in CSS

MariaDB-Remote-Login-Konfiguration und Problemlösung

Inhaltsverzeichnis

Wirkung

Beginnen Sie mit der Texterstellung

Erstellen Sie zuerst den Font Loader

Schriftbibliothek laden

Erstellen von Textgeometrie

Berechnen Sie das Begrenzungsrechteck der Textgeometrie

Gespiegelten Text erstellen

Erstellen einer halbtransparenten Ebene

Rendern

Informationen zu Textkonstruktorparametern

Wenn CurveSegments niedriger eingestellt ist, können Sie sehen, dass der Text nicht so glatt ist

Wenn die Abschrägung eingeschaltet ist, können Sie beobachten, dass die Kanten der Schrift abgerundet und nicht mehr scharf werden.

Einstellen der Abschrägungsparameter

Vollständiger Code

Zusammenfassen

Artikel empfehlen