[Super Easy] Einführung in Reagieren von drei Faser x Drei x TypyScript! Poke Poke Style 3D -Hintergrund mit Standardobjekten!

[Super Easy] Einführung in Reagieren von drei Faser x Drei x TypyScript! Poke Poke Style 3D -Hintergrund mit Standardobjekten!

In letzter Zeit 3D -Grafiken in der Entwicklung von Web -Apps verwendet werden. Insbesondere React Three Faser (R3F) ermöglicht es Ihnen, drei.js als React -Komponente problemlos zu handhaben.

Dieses Mal werden wir auch Drei farbenfrohe "Pokepoke" 3D -Hintergründe mit React + TypeScript implementieren

📌 Darüber hinaus werden wir diesmal keine speziellen 3D -Modelle verwenden!
Auf diese Weise kann das Ausdrücken nur mit den grundlegenden Objekten (Box, Ebene usw.) als Standard in drei.js durchgeführt Wir werden das erleben lassen.

💡 Abgeschlossenes Bild
👇 Erstellen Sie einen 3D -Hintergrund 👇 👇 👇

📺 Sehen Sie sich die Demo auf YouTube an : Sie können sie aus diesem Link


mit farbenfrohen Karten in einer kreisförmigen Form -
, der spiegelende Reflexionen verwendet, eine Benutzeroberfläche, die HTML/CSS kombiniert

🚀 Schauen wir uns den Punkt an, dass "keine speziellen 3D -Modelle erforderlich sind! Sie können dies mit nur Standardobjekten tun!"

Jetzt schreiben wir tatsächlich einen Code!

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

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!

Inhaltsverzeichnis

🚀Inführung in technische Elemente: Tools und Bibliotheken, die in diesem Projekt verwendet werden können

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 einen "3D-Hintergrund im Pokepoke-Stil" mit React Three Faser × DREI × TypeScript!

📌Die Umweltkonstruktion wird in diesem Artikel

📌Diese Zeit verwenden wir keine speziellen 3D -Modelle, sondern nur Standardobjekte, die in React Three Faser erhältlich sind und drei DREI reagieren.
Wenn Sie mehr über Standardobjekte erfahren möchten, lesen Sie bitte auch diesen Artikel

Bitte überprüfen Sie GitHub für den vollständigen Quellcode, den Sie dieses Mal erstellt haben.

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

💡 Schalten Sie ein Anmeldeformular !!

Erstellen Sie zunächst einfach ein Anmeldeformular mit React.
Wir verwenden Tailwind-CSS als CSS-Bibliothek.

// === Haupt -App -Komponent === const loginScreen = () => {return (<> {/ * LoginForm */} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Login </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Login</button></form></div></> ); }; Standard -LoginScreen exportieren;

💡Show Canvas im Hintergrund !!

Platzieren Sie zuerst Ihre Leinwand und halten Sie eine Kamera und eine Beleuchtung bereit.

importieren {canvas} aus "@react-drei/faser"; Import {OrbitControls,} aus "@react-three/drei"; // === Haupt -App -Komponent === const loginScreen = () => {return (<> {/ * canvas in drei.js */}<Canvas camera={{ position: [0, 0, 10], fov: 50 }}><color attach="background" args={["white"]} /> {/ * Schreiben */}<ambientLight intensity={10} /><directionalLight position={[0, 5, 0]} intensity={15} /> {/ * Kameraoperation */} <OrbitControls enablePan={false} enableZoom={false} minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /></Canvas> {/ * Anmeldeformular erstellt mit HTML/CSS */} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Login </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Login</button></form></div></> ); }; Standard -LoginScreen exportieren;

💡 Platz von Kartenpackobjekten !!

Legen Sie als nächstes ein Objekt, das wie ein Poke -Poke -Kartenpaket im Hintergrund aussieht.
Sieht es so wie der Bildschirm nicht aus, um ein Poke -Poke -Paket auszuwählen? (Lol)

importieren {canvas} aus "@react-drei/faser"; importieren {meshreflectormaterials, OrbitControls,} von "@react-three/drei"; // === Platzieren Sie eine von einem Kartenpaket in einem Kreis inspirierte Box, die um [0,0,0] === const circularCardpack = ({Radius = 5, count = 10, Cardize = [1, 1,5, 0,1], // Breite, Höhe, Tiefe}: {Radius? Größe}) => {const karten = array.from ({Länge: count}); // Array -Return erstellen (Return (<group> {cards.map ((_, i) => {const Angle = (i / count) * math.pi * 2; // Winkel auf dem Umfang const x = radius * math.cos (Winkel); // x Koordinate const z = Radius * Math.sin (Winkel); // Z -Koordinaten -Koordinate -Verdrehung der Central -ATATATIONSRETZUNG (-Math. <mesh key={i} position={[x, -1, z]} // カードの位置 rotation={[0, rotationY, 0]} // カードの向き ><boxGeometry args={cardSize} /><meshStandardMaterial color={`hsl(${(i / count) * 360}, 70%, 50%)`} /></mesh> ); })}</group> ); }; // === Haupt -App -Komponent === const loginScreen = () => {return (<> {/ * canvas in drei.js */}<Canvas camera={{ position: [0, 0, 10], fov: 50 }}><color attach="background" args={["white"]} /> {/ * Schreiben */}<ambientLight intensity={10} /><directionalLight position={[0, 5, 0]} intensity={15} /> {/ * Kameraoperation */} <OrbitControls enablePan={false} enableZoom={false} minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /> {/ * Kartenobjekt */}<CircularCardPack /></Canvas> {/ * Anmeldeformular erstellt mit HTML/CSS */} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Login </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Login</button></form></div></> ); }; Standard -LoginScreen exportieren;

💡 Legen Sie eine Spiegelfläche unter die Packung !!

Als ich überprüfte, wo ich mich für Poke -Poke -Packs entschieden habe, scheinen die Packs reflektierend zu sein, also habe ich versucht, auf die gleiche Weise eine Spiegeloberfläche unter dem Rudel hinzuzufügen.

importieren {canvas} aus "@react-drei/faser"; importieren {meshreflectormaterials, OrbitControls,} von "@react-three/drei"; // === Spiegelkomponenten === Const ReflectionPlane = () => {return (<><mesh rotation-x={-Math.PI / 2} position={[0, -2, 0]}><planeGeometry args={[100, 100]} /> {/ * Größerer Spiegel, um den gesamten Hintergrund abzudecken */} <MeshReflectorMaterial blur={[200, 100]} mixBlur={0.7} mixStrength={1} mixContrast={1} resolution={1024} mirror={1} depthScale={0.1} reflectorOffset={0.2} /></mesh></> ); }; // === Platzieren Sie eine von einem Kartenpaket in einem Kreis inspirierte Box mit der Mitte von [0,0,0] === const circularCardpack = ({radius = 5, count = 10, cardize = [1, 1,5, 0,1], // Breite, Höhe, Tiefe}: {Radius? }) => {const karten = array.from ({Länge: count}); // Erstellen Sie eine Array -Rückgabe (<group> {cards.map ((_, i) => {const Angle = (i / count) * math.pi * 2; // Winkel auf dem Umfang const x = radius * math.cos (Winkel); // x Koordinate const z = Radius * Math.sin (Winkel); // Z -Koordinaten -Koordinate -Verdrehung der Central -ATATATIONSRETZUNG (-Math. <mesh key={i} position={[x, -1, z]} // カードの位置 rotation={[0, rotationY, 0]} // カードの向き ><boxGeometry args={cardSize} /><meshStandardMaterial color={`hsl(${(i / count) * 360}, 70%, 50%)`} /></mesh> ); })}</group> ); }; // === Haupt -App -Komponent === const loginScreen = () => {return (<> {/ * canvas in drei.js */}<Canvas camera={{ position: [0, 0, 10], fov: 50 }}><color attach="background" args={["white"]} /> {/ * Schreiben */}<ambientLight intensity={10} /><directionalLight position={[0, 5, 0]} intensity={15} /> {/ * Kameraoperation */} <OrbitControls enablePan={false} enableZoom={false} minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /> {/ * Cardpack -Objekt */}<CircularCardPack /> {/ * Spiegelobjekt */}<ReflectivePlane /></Canvas> {/ * Anmeldeformular erstellt mit HTML/CSS */} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Login </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Login</button></form></div></> ); }; Standard -LoginScreen exportieren;

💡Adged Hintergrund !!

Das braucht es nicht, aber ich war ein wenig einsam, also werde ich auch einen Hintergrund hinzufügen.
Der Hintergrund ist auch Standard von React Three Drei.

importieren {canvas} aus "@react-drei/faser"; Import {Umgebung, mesheflectormaterials, Orbitcontrols,} von "@react-three/drei"; // === Const ReflectionPlane = () => {return (<><mesh rotation-x={-Math.PI / 2} position={[0, -2, 0]}><planeGeometry args={[100, 100]} /> {/ * Größerer Spiegel, um den gesamten Hintergrund abzudecken */} <MeshReflectorMaterial blur={[200, 100]} mixBlur={0.7} mixStrength={1} mixContrast={1} resolution={1024} mirror={1} depthScale={0.1} reflectorOffset={0.2} /></mesh></> ); }; // === Platzieren Sie eine von einem Kartenpaket in einem Kreis inspirierte Box mit der Mitte von [0,0,0] === const circularCardpack = ({radius = 5, count = 10, cardize = [1, 1,5, 0,1], // Breite, Höhe, Tiefe}: {Radius? }) => {const karten = array.from ({Länge: count}); // Erstellen Sie eine Array -Rückgabe (<group> {cards.map ((_, i) => {const Angle = (i / count) * math.pi * 2; // Winkel auf dem Umfang const x = radius * math.cos (Winkel); // x Koordinate const z = Radius * Math.sin (Winkel); // Z -Koordinaten -Koordinate -Verdrehung der Central -ATATATIONSRETZUNG (-Math. <mesh key={i} position={[x, -1, z]} // カードの位置 rotation={[0, rotationY, 0]} // カードの向き ><boxGeometry args={cardSize} /><meshStandardMaterial color={`hsl(${(i / count) * 360}, 70%, 50%)`} /></mesh> ); })}</group> ); }; // === Haupt -App -Komponent === const loginScreen = () => {return (<> {/ * canvas in drei.js */}<Canvas camera={{ position: [0, 0, 10], fov: 50 }}><color attach="background" args={["white"]} /> {/ * Schreiben */}<ambientLight intensity={10} /><directionalLight position={[0, 5, 0]} intensity={15} /> {/ * Kameraoperation */} <OrbitControls enablePan={false} enableZoom={false} minPolarAngle={Math.PI / 2} maxPolarAngle={Math.PI / 2} /> {/ * Cardpack -Objekt */}<CircularCardPack /> {/ * Spiegelobjekt */}<ReflectivePlane /> {/ * Hintergrund */}<Environment preset="night" background /></Canvas> {/ * Anmeldeformular erstellt mit HTML/CSS */} <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white/90 rounded-lg p-8 shadow-lg text-center"><h2 className="text-2xl font-semibold text-gray-700 mb-6"> Login </h2><form><div className="mb-4"><input type="text" placeholder="ユーザー名" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div><div className="mb-6"><input type="password" placeholder="パスワード" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" /></div> <button type="submit" className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" >Login</button></form></div></> ); }; Standard -LoginScreen exportieren;

schließlich

Dieses Mal haben wir den Bildschirm "Pokepoke Pack Pack" mit nur Standardobjekten als "Pokepoke -Stil 3D -Hintergrund aus Standardobjekten" reproduziert!

Sie können ein detailliertes Verständnis der tatsächlichen Bewegungen erhalten, indem Sie die YouTube unten ansehen!

📺 Sehen Sie sich die Demo auf YouTube an : Sie können sie aus diesem Link

📌Der Code, den ich dieses Mal erstellt habe, ist auf GitHub veröffentlicht. Bitte schauen Sie sich auch an!

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

📌 Wenn Sie Mesh verwenden und es durch ein 3D -Objekt ersetzen, können Sie sich Ihrem Ideal sogar näher kommen !!

Meshy ist ein Dienst, mit dem Sie mit AI problemlos 3D -Objekte generieren können.
Wenn Sie dies verwenden, können Sie Ihr ideales 3D -Objekt problemlos erstellen, damit Sie Ihrem Ideal noch näher kommen können!

📺 Mesh überprüfen : Sie können es auf der offiziellen Seite von diesem Link

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

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

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!

Teilen Sie, wenn Sie möchten!

Wer hat diesen Artikel geschrieben

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!

Inhaltsverzeichnis