[Super Einführung] Einfach auch für Anfänger! Erstellen Sie eine 3D -Umgebung für Typscript X Reagieren Sie drei Faser mit vite!

Die URL wurde kopiert!

Vor kurzem haben wir im Internet immer mehr interaktivere und schöne 3D -Darstellungen gesehen. Zum Beispiel 3D-Animationshintergründe, Game-Style-Designs und sogar Schnittstellen der nächsten Generation. Auf den ersten Blick mögen diese Dinge so aussehen, als ob sie fortschrittliche Technologie erfordern, aber React Three Faser können Sie eine 3D -Welt mit erstaunlicher Leichtigkeit schaffen, wenn Sie React reagieren.

Es gibt jedoch immer noch nur wenige Unterrichtsmaterialien, die leicht über die 3D -Entwicklung mit React Three Faser und Typscript erlernt werden können.

React Three Faser ist mit dem React -Ökosystem vollständig kompatibel und ist eine Bibliothek, mit der Sie die Leistung von drei.Js mit React maximieren können. Selbst das Lesen der offiziellen Dokumentation ist für Anfänger eine gewisse Hürde.
TypeScript wird zu einem wesentlichen Instrument zur Erhöhung der Sicherheit und Effizienz, aber nur wenige spezifische Kommentarartikel finden Sie in Verbindung mit React Three Faser.

die Kombination von React Three Faser und Typscript sorgfältig , damit sogar Anfänger sie ohne Schwierigkeiten verstehen können

Wir werden in Zukunft weiterhin Lektionen und Arbeiten von TypeScript X reagieren.
Wir werden eine Ankündigung auf YouTube machen. Abonnieren Sie also unseren YouTube -Kanal und warten Sie auf Benachrichtigungen!

📺 YouTube ansehen : Sie können es von diesem Link

YouTube

Hack Lab. 256 Teilen Sie Ihre Videos mit Freunden, Familie und Menschen auf der ganzen Welt

Typscript X Reagieren Sie drei Faser

Wenn Sie wissen möchten, was Reagieren von drei Fasern tun können, beziehen Sie sich bitte Folgendes!
Wir haben benutzerfreundliche Arbeiten zur Verfügung!

Klicken Sie hier für Werke mit React Three Faser

Inhaltsverzeichnis

Einführung technischer Elemente: Tools und Bibliotheken, die in diesem Projekt verwendet werden sollen

Sie können die Tools und Bibliotheken ändern, die Sie verwenden, die für sich selbst einfach zu bedienen sind, aber dieses Projekt erklärt diese Annahme.

VSCODE

Ein kostenloser Code -Editor von Microsoft.
Es muss kein VSCODE sein, aber es gibt viele Erweiterungen, also empfehle ich es.
Es wird auch empfohlen, Eslint oder hübscher einzuschließen.

Node.js

Eine JavaScript , die auf Chrome's V8 JavaScript Engine basiert .
Sie können JavaScript -Code außerhalb Ihres Browsers ausführen.
Dies wird auf der Grundlage der Annahme erklärt, dass es bereits installiert ist. Bitte laden Sie es also von
https://nodejs.org/ja *Wir empfehlen, die langfristige stabile Version von LTS herunterzuladen.

Vite

Ein Build -Tool für moderne Webprojekte. Es ist durch seine schnelle und leichte
Die zuvor verwendete "CRA (Create-React-App)" ist nicht auf der offiziellen Website aufgeführt und ist zu einer alten Technologie geworden.
Von nun an sollte Vite die beste Option beim Erstellen von Apps mit React sein.

Reagieren

Dies ist eine JavaScript -Bibliothek zum Erstellen einer Benutzeroberfläche (Benutzeroberfläche). Es wurde von Facebook entwickelt und wird heute noch in vielen Web -Apps verwendet.

Drei.js

Eine JavaScript -Bibliothek zum einfachen Erstellen von 3D -Grafiken. Es wird die komplexen Operationen von WebGL abstrahiert und die intuitive 3D -Entwicklung ermöglicht.
Es ist einfach, 3D -Grafiken zu erstellen und einfacher zu verwenden als direkte WebGL -Operationen.

Reagieren Sie drei Faser

Dies ist eine Bibliothek, in der drei.js mit React verwendet werden können. Es kombiniert die Komponentenstruktur von React mit drei.js 3D -Motor.
Drei.Js können im React -Entwicklungsstil verwendet werden, was eine intuitive und effiziente Entwicklung ermöglicht.

Reagieren Sie drei Drei

Eine Sammlung nützlicher Nutzkomponenten für React Three Faser. Es ist einfach, die häufig verwendeten drei.js -Funktionen hinzuzufügen.
Komplexe drei.js -Funktionen können mit kurzem Code erreicht werden, wodurch die Lernkosten gesenkt werden.

Erstellen Sie eine 3D

Erstellen Sie ein neues React -Projekt und erstellen Sie eine 3D -Umgebung für React Dreifiber.
Der Code, den ich dieses Mal erstellen werde, ist auf GitHub veröffentlicht. Schauen Sie sich also einen Blick darauf an, wenn Sie ihn benötigen.

💾 GitHub Repository : Überprüfen Sie den Quellcode unter diesem Link

Github

GitHub-Aazutaku/React-Drei-Faser-Typ-Type-Typ bei Typscript-X-React-Drei-Faser-Setup trägt zur Entwicklung von Aazutaku/React-Drei-Faser-Typ bei, indem ein Konto auf GitHub erstellt wird.

Aufbau einer React X -TypeScript -Umgebung mit vite

Diesmal werde ich vite benutzen. Wenn Sie viel CRA (Create-React-App) verwendet haben, empfehlen wir Ihnen, diese Gelegenheit zu nutzen, um auf VITE zu wechseln.

Es ist einfach zu tun. Führen Sie Folgendes unter dem Verzeichnis aus, in dem Sie das Projekt erstellen möchten.

npm erstellen vite@lunster

Sie werden gebeten, den Projektnamen und Framework einzugeben und auszuwählen. Bitte machen Sie Folgendes:

Projektname:… React-Drei-Faser-App Wählen Sie ein Framework aus: ›React Wählen

Dies ist der einzige Weg, um eine React X -TypeScript -Umgebung zu erstellen.
Versuchen Sie, die App zu starten.

CD React-Drei-Faser-App NPM Installation NPM Run Dev

Ich denke, Sie können jetzt die Vite + React -App starten.

Erstellen Sie eine 3D -Umgebung für Typscript X Reagieren Sie drei Faser

Installieren Sie React Three Faser in der App, die Sie mit VITE erstellt haben.
Verwenden Sie den folgenden Befehl, um die erforderlichen Bibliotheken zu installieren.

NPM installieren Sie drei @react-three/faser npm install--Save-dev @typen/drei

Dies allein ermöglicht es Ihnen, React Three Faser zu verwenden, also werde ich versuchen, die Box anzuzeigen.
Lassen Sie uns app.tsx wie folgt ändern:

importieren {canvas} aus "@react-drei/faser"; Funktion App (): jsx.element {return (return (<Canvas><mesh><boxGeometry /><meshNormalMaterial /></mesh></Canvas> )} Standard -App exportieren

Auf der linken Seite sehen Sie eine kleine Schachtel.

Ich möchte Canvas zum gesamten Bildschirm machen, also lösche ich App.css und schreibe index.css mit den folgenden.

#root {width: 100vw; Höhe: 100VH; } body {margin: 0; }

Jetzt ist der gesamte Bildschirm jetzt Leinwand.

Wenn es jedoch so weitergeht, sieht es nicht wie 3D aus. . .
Versuchen wir, die Kameraposition zu ändern.

Die Kamera schießt aus der Perspektive der virtuellen Kamera eine 3D -Szene und zeigt die Ergebnisse auf dem Bildschirm an. Wie bei einer tatsächlichen Kamera die Position , Ausrichtung , Betrachtungswinkel einstellen

import {vector3} aus "drei"; importieren {canvas} aus "@react-drei/faser"; // Konstante const initial_camera_position: vector3 = neuer vector3 (3, 3, 3); Funktion App (): jsx.element {return (return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><boxGeometry /><meshNormalMaterial /></mesh></Canvas> ); } standardmäßige App exportieren;

Verstehen Sie, dass dies die 3D -Repräsentation ermöglicht?

Einführung von React Three Drei

Einführung von React Three Drei, einer nützlichen Sammlung von Nutzkomponenten für React Three Faser.
Es handelt sich um eine häufig verwendete Bibliothek, da Sie die häufig verwendeten drei.js -Funktionen problemlos hinzufügen können.

npm install @react-drei/drei

Das ist die einzige Einführung.
Ich werde versuchen, "Orbitcontrols" zu verwenden. Dies ist eine Komponente, mit der Sie die Kamera problemlos bewegen und zoomen können.

import {vector3} aus "drei"; importieren {canvas} aus "@react-drei/faser"; Import {OrbitControls} aus "@react-three/drei"; // Konstante const initial_camera_position: vector3 = neuer vector3 (3, 3, 3); Funktion App (): jsx.element {return (return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><boxGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Jetzt sollten Sie das Feld aus einem kostenlosen Standpunkt wie diesem anzeigen können!

Der Code, den ich dieses Mal erstellt habe, ist auf GitHub veröffentlicht. Bitte überprüfen Sie ihn auch!

💾 GitHub Repository : Überprüfen Sie den Quellcode unter diesem Link

Github

GitHub-Aazutaku/React-Drei-Faser-Typ-Type-Typ bei Typscript-X-React-Drei-Faser-Setup trägt zur Entwicklung von Aazutaku/React-Drei-Faser-Typ bei, indem ein Konto auf GitHub erstellt wird.

Wenn Sie dies hilfreich fanden, abonnieren Sie bitte unseren Kanal!

📺 YouTube ansehen : Sie können es von diesem Link

YouTube

Hack Lab. 256 Teilen Sie Ihre Videos mit Freunden, Familie und Menschen auf der ganzen Welt

Typscript X Reagieren Sie drei Faser

Wenn Sie wissen möchten, was Reagieren von drei Fasern tun können, beziehen Sie sich bitte Folgendes!
Wir haben benutzerfreundliche Arbeiten zur Verfügung!

Klicken Sie hier für Werke mit React Three Faser

Teilen Sie, wenn Sie möchten!

Die URL wurde kopiert!

Wer hat diesen Artikel geschrieben

Taku

Dies ist ein Blog, in dem ich angefangen habe, Informationssicherheit zu studieren. Als neuer Angestellter würde ich mich freuen, wenn Sie mit einem breiten Herzen schauen könnten.
Es gibt auch Teech Lab, das eine Gelegenheit ist, Programmierspaß zu studieren. Wenn Sie also an der Softwareentwicklung interessiert sind, sollten Sie sich unbedingt ansehen!