SPEISEKARTE

[Super Einführung] Reagieren Sie drei Faser × DREI × Typenkript! Grundlagen von 3D -Ausdrücken mit Standardobjekten

Werbung
Reagieren Sie drei.js

Das 3D-Design lenkt jetzt nicht nur in der Spieleentwicklung, sondern auch in der Welt der Websites und Schnittstellen der nächsten Generation viel Aufmerksamkeit. Haben Sie jemals gedacht: "Ich möchte diese charmante Welt selbst schaffen!"?

Viele Menschen stellen jedoch wahrscheinlich fest, dass 3D schwierig ist. Die Realität ist, dass traditionelle Methoden zur Verwendung von drei.Js direkt komplexe Konfigurationen und das Schreiben von Code erfordern, was für Anfänger etwas schwierig ist.

In der Zwischenzeit React Three Faser die es Ihnen ermöglicht, innerhalb des React -Ökosystems einfach und intuitiv zu realisieren Darüber hinaus von Typenkripten eine sicherere und effizientere Entwicklung.

Es gibt jedoch immer noch nur sehr wenige Erklärungen, dass selbst Anfänger die Kombination von React Three Faser und Typscript ohne Anstrengung lernen können.

In diesem Artikel die Grundlagen der 3D -Entwicklung erläutern Wir führen auch praktische Beispiele für das Erstellen von Hintergründen und Animationen im Spielstil mit Standardobjekten (Geometrie und Materialien)

diejenigen, die neu in der 3D -Entwicklung sind, können es mit Zuversicht lesen. Beginnen Sie also gemeinsam damit.

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.

Darüber hinaus werden wir erläutern, wie Sie eine Umgebung in " Erstellen einer 3D -Umgebung für Typscript X Reagieren Sie drei Faser mit vite " auf.

Möglicherweise möchten Sie auch lesen
[Super Einführung] Einfach auch für Anfänger! Erstellen Sie eine 3D -Umgebung für Typscript X Reagieren Sie drei Faser mit vite! Vor kurzem haben wir im Internet immer mehr interaktivere und schöne 3D -Darstellungen gesehen. Zum Beispiel 3D-Animationshintergrund, Game-Stil-Designs und sogar das Internet der nächsten Generation ...
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.

Maschen

Um 3D -Objekte zu zeichnen, verwenden Sie die Netzkomponente.
Mesh besteht aus Geometrien und Materialien.

Es gibt Eigenschaften wie Position, Rotation, Skalierung, Castshadow und Empfänger.
Sie können auch Ereignisse wie Onclick definieren. Weitere Informationen finden Sie in der Dreier -Dokumentation.

Möglicherweise möchten Sie auch lesen
drei.js docs 
Funktion App (): jsx.element {return (return ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh position={[0, 1, 0]} // 位置 rotation={[Math.PI / 4, 0, 0]} // 回転（ラジアン） scale={[2, 2, 2]} // スケール（拡大） castShadow // 影を投げる receiveShadow // 影を受け取る ><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color="red" /></mesh></Canvas> ); } standardmäßige App exportieren;

Geometrie

Was ist Geometrie?

Die Geometrie definiert die Position, Größe und Konnektivität der Eckpunkte, Kanten und Gesichter, aus denen ein Objekt besteht.

  • Scheitelpunkte (blau): Sie sind individuelle Punkte im 3D -Raum, die die Form des Objekts definieren. Jeder Scheitelpunkt hat Koordinaten (x, y, z), die seine Position im 3D -Raum bestimmt. Scheitelpunkte sind an den Kanten angeschlossen, um ein Gesicht zu bilden
  • Kante (grün): Kanten sind Linien, die Eckpunkte verbinden. Diese definieren die Form des Objekts und können gerade oder gebogen werden. Jede Kante besteht aus einer Reihe von Indizes, die sich auf die Eckpunkte beziehen.
  • Gesicht (gelb): Gesichter sind Polygone, die durch Anschließen von Scheitelpunkten gebildet werden. Gesichter definieren die Oberfläche eines Objekts und können Dreiecke, Quadrate oder andere Polygone sein. Jedes Gesicht besteht auch aus einer Reihe von Indizes, die sich auf die Eckpunkte beziehen.

Arten von Geometrien

Reagieren Sie drei Faser (drei.Js) haben viele fertige Geometrie.
Im Folgenden finden Sie einige der häufigsten.

Boxgeometrie

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;

Spheregometrie

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><sphereGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Flugzeuggeometrie

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><planeGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Circiregometrie

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><circleGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Zylindergeometrie

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><cylinderGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Kapsulegeometrie

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><capsuleGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Konegeometrie

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><coneGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Dodecahedrongeometrie

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><dodecahedronGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Extrudgeometrie

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><extrudeGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

ICOSADONDRONGEOMETRIE

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><icosahedronGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Kräftigkeit

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><latheGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Oktaedrongeometrie

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><octahedronGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Polyedergeometrie

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 {const vertices = [0, 0, 1, // Vertex 1 0, 1, 0, // Vertex 2 1, 0, 0, // Vertex 3 -1, 0, 0, // Vertex 4]; constindizes = [0, 1, 2, // Gesicht 1 0, 1, 3, // Gesicht 2 0, 2, 3, // Gesicht 3 1, 2, 3, // Face 4]; zurückkehren ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><polyhedronGeometry args={[vertices, indices, 1, 0]} /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Tetraedrongeometrie

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><tetrahedronGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Torusgeometrie

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><torusGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Torusknotgeometrie

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><torusKnotGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Tubeometrie

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><tubeGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Ringgeometrie

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><ringGeometry /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

ShapeGeometrie

import {form, 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 {const form = new Shape (); // Herzform definieren.Moveto (0, 0,5); Form.bezierCurveto (0,5, 1, 1, 0,5, 0, 0); Form.bezierCurveto (-1, 0,5, -0,5, 1, 0, 0,5); zurückkehren ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><shapeGeometry args={[shape]} /><meshNormalMaterial /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

REDGEGEOMETRIE

import {vector3, boxgeometry} aus "drei"; importieren {canvas} aus "@react-drei/faser"; Import {Kanten, meshdiscardmaterial, OrbitControls} von "@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 }}> {/ * reag-drei-faser nur */} <lineSegments><edgesGeometry args={[new BoxGeometry(1)]} /><lineBasicMaterial color="blue" /></lineSegments> {/ * react-drei-drii */} <mesh position={[2, 0, 0]}><boxGeometry args={[1, 1, 1]} /><MeshDiscardMaterial /><Edges color="red" /></mesh><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Wenn Sie Kanten nur mit React-Drei-Faser verwenden, müssen Sie drei.js direkt für Argumente verwenden.
mit drei.js schreiben, aber die Ränder von React-Drei-Dreie zeichnen auch Gesichter

Wireframegeometrie

import {vector3, boxgeometry} aus "drei"; importieren {canvas} aus "@react-drei/faser"; Import {OrbitControls, Wireframe} 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 }}> {/ * React-Drei-Faser */} <lineSegments><wireframeGeometry args={[new BoxGeometry(1)]} /><lineBasicMaterial color="blue" /></lineSegments> {/ * react-drei-drii */}<mesh position={[2, 0, 0]}><boxGeometry args={[1, 1, 1]} /><Wireframe stroke="red" /></mesh> {/ * Eine weitere Lösung für React-Drei-Faser */} <mesh position={[4, 0, 0]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color="green" wireframe /></mesh><OrbitControls /><ambientLight /></Canvas> ); } standardmäßige App exportieren;

Eine React-Drei-Drii-Komponente namens Wireframe zeichnet auch Gesichter.
Eine andere Lösung für React-Drei-Faser könnte am einfachsten zu bedienen sein.

Materialien

Material definiert Informationen, die das Material bestimmt, das bestimmt, wie die Oberfläche eines Objekts aussieht, wenn es gezogen wird.
Eigenschaften bestehen wie Objektfarbe, Textur, Transparenz und Reflexionsvermögen.

Um das Material zu überprüfen, benötigen Sie ein Licht. Ich werde bei einer anderen Gelegenheit über Lichter erklären. Daher fügen Sie diesmal das Ambient Light und DirectionAllight wie folgt ein.

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><torusKnotGeometry /><meshNormalMaterial /></mesh><ambientLight intensity={0.5} /> // Licht hinzufügen<directionalLight position={[0, 5, 5]} intensity={0.7} /> // Licht hinzufügen<OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Arten von Materialien in React Three Faser (drei.js)

Reagieren Sie drei Faser (drei.Js) haben viele vorgefertigte Materialien.
Im Folgenden finden Sie einige der häufigsten.

Meshbasicmaterial

Meshbasicmaterial ist ein einfaches Material, das nicht von Lichtquellen betroffen ist. Zeigt Texturen und Farben so an.
Es wird häufig in Drahtgas, Rendering, Hintergrund usw. verwendet.

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><torusKnotGeometry /><meshBasicMaterial color="red" /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

meshnormalmaterial

Meshnormalmaterial ist ein spezielles Material, das die Normalen von Scheitelpunkten und Oberflächen visualisiert. Dies wird auch nicht vom Licht beeinflusst.
Es wird häufig zum Debugging -Zweck verwendet, um zu überprüfen, ob die Struktur und die Normalen des Modells korrekt sind.

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><torusKnotGeometry /><meshNormalMaterial /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

meshambertmaterial

Meshlambertmaterial ist ein leichtes Material mit nur diffuser Reflexion. Es berechnet diffuse Reflexionen und erzeugt einen matten Look. Es ist leicht, aber nicht realistisch.

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><torusKnotGeometry /><meshLambertMaterial color="red" /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Meshphongmaterial

Meshphongmaterial ist ein Material mit Spiegelreflexion zusätzlich zu den Eigenschaften von Lambert. Es ist möglich, Spiegelreflexionen auszudrücken, aber dies ist auch nicht realistisch.

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><torusKnotGeometry /><meshPhongMaterial color="red" shininess={100} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

methstandardmaterial

Messtandardmaterial ist ein Material, das PBR (physikalisches Rendering) unterstützt. Erzeugt realistische Lichtreflexionen und Schatten. Sie können die Metallheit und Rauheit einstellen und eine ziemlich realistische Textur schaffen.

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><torusKnotGeometry /><meshStandardMaterial color="red" metalness={1} roughness={0.5} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

meshphysicalmaterial

Meshphysicalmaterial ist eine Erweiterung des
Messtandardmateriales Fortgeschrittene physikalische Eigenschaften wie Übertragung, Reflexionsvermögen und klarer Schicht wurden hinzugefügt. Es ist möglich, Getriebe und Brechung wie Glas- oder Wassertröpfchen auszudrücken. Es ermöglicht es, realistischer auszudrücken, aber es erfordert auch mehr Rechenaufwand.

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><torusKnotGeometry /><meshPhysicalMaterial color="red" metalness={1} // 金属感を最大に roughness={0.5} // 表面の粗さ（滑らか） clearcoat={0.8} // 反射の強さ clearcoatRoughness={0.1} // 反射面の粗さ /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;
MerkmalemeshambertmaterialMeshphongmaterialmethstandardmaterialmeshphysicalmaterial
SchattierungsmodellLambert ShadingFon ShadingPhysikalische Schattierung (PBR)Physikalische Schattierung (PBR)
Metallisches GefühlkeinerkeinerMetallisches Gefühl mit Metallness Metallisches Gefühl mit Metallness
RauheitkeinerkeinerOberflächenrauheit mit Rauheit Oberflächenrauheit mit Rauheit
SpiegelungkeinerSpekulare Reflexion ( Glanz )Einfache Reflexion möglichFügen Sie die reflektierende Schicht mit Klarlack
Transparenz und BrechungkeinerkeinerkeinerAusgedrückt unter Verwendung von Transparenz und Brechungstratio
Leistunghohe GeschwindigkeitEs ist ein bisschen spätEin wenig schwerSchwerest (Managementintensiv)
GebrauchszweckEinfache Szenen, leistungsorientiertGlänzende Oberflächen (Kunststoff, Metall)Szenen, die einen realistischen physischen Ausdruck erfordernSzenen, die realistische Reflexion, Brechung, metallisches Gefühl und Transparenz erfordern
EigenschaftenEinfache diffuse ReflexionDiffuse und spiegelende Reflexionen (Highlights)Physisch genaue Reflexion, diffuse Reflexion, metallisches Gefühl, RauheitPhysisch genaue Reflexion, Transparenz, Brechung, metallisches Gefühl

meshtoonmaterial

MeshtoonMaterial ist ein Material mit einer stufenlosen Schattierung im Animationsstil. Anstatt realistisch zu sein, wird es oft verwendet, um karikaturistische Stile auszudrücken.

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><torusKnotGeometry /><meshToonMaterial color="red" /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

MeshdepthMaterial

MeshdepthMaterial ist ein spezielles Material, das die Farbe basierend auf der Tiefe ändert. Der Abstand vom Objekt zur Kamera wird in Farbe ausgedrückt. Dieser ist auch nicht vom Licht betroffen.

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><torusKnotGeometry /><meshDepthMaterial /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Meshmatcapmaterial

Meshmatcapmaterial ist ein Material, das 2D -Texturen (MATCAP) verwendet, um eine realistische Schattierung zu reproduzieren, ohne die Lichtquelle zu berücksichtigen.
Das Bild enthält leichte Informationen, die es ermöglicht, realistische Ausdrücke zu erstellen.

import {vector3} aus "drei"; Import {canvas, useloader} aus "@react-three/faser"; Import {OrbitControls} aus "@react-three/drei"; importieren {textureloLoder} aus "drei"; // Konstante const initial_camera_position: vector3 = neuer vector3 (3, 3, 3); Funktion app (): jsx.element {// MATCAP-Textur mit textureloLoder const matcaptexture = useloader (textureloloader, "https://thhreejs.org/examples/textures/matcaps/matcap-porcelain-white.jpg")); zurückkehren ( <Canvas camera={{ position: INITIAL_CAMERA_POSITION }}><mesh><torusKnotGeometry /><meshMatcapMaterial matcap={matcapTexture} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Arten von Materialien in reagieren drei Drei

React Three DREI bietet noch fortschrittlichere Materialien.

Meshdiscardmaterial

Meshdiscardmaterial ist ein Material, das nichts macht. Sie können Objekte vor der Szene ausblenden und dennoch Schatten und Kinder anzeigen.

importieren {canvas} aus "@react-drei/faser"; Import {meshdiscardmaterial, OrbitControls} aus "@react-three/drei"; import {vector3} aus "drei"; const initial_camera_position = new vector3 (3, 3, 3); Funktion App (): jsx.element {return (return (<Canvas shadows camera={{ position: INITIAL_CAMERA_POSITION }} style={{ background: "lightblue" }} ><mesh castShadow receiveShadow><torusKnotGeometry /><MeshDiscardMaterial /></mesh> {/ * Boden (scharfer Schatten) */} <mesh receiveShadow position={[0, -1.8, 0]} rotation={[-Math.PI / 2, 0, 0]} ><planeGeometry args={[5, 5]} /><meshStandardMaterial color="lightgray" /></mesh> {/ * Beleuchtungseinstellungen */} <ambientLight intensity={0.3} /><directionalLight position={[5, 5, 5]} intensity={0.7} castShadow shadow-mapSize-width={1024} shadow-mapSize-height={1024} /> {/ * Kameraoperation */}<OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Meshdistortmaterial

Meshdistortmaterial ist ein Material, das die Geometrie verzerren kann. Es ist nicht nur durch Farbe und Textur, sondern auch durch Bewegung gekennzeichnet.

import {vector3} aus "drei"; importieren {canvas} aus "@react-drei/faser"; Import {meshdistortmaterial, OrbitControls} von "@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><torusKnotGeometry /><MeshDistortMaterial distort={1} speed={10} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Mesheflectormaterials

Mesheflectormaterial ist ein Material, mit dem Sie Ihrem Netz leicht Reflexionen und verschwommen sind. Die metandardmaterialische Expansion erleichtert es, einen spiegelähnlichen Ausdruck zu erzeugen.

import {vector3} aus "drei"; importieren {canvas} aus "@react-drei/faser"; importieren {meshdistortmaterial, meshreflectormaterials, Orbitcontrols,} von "@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><torusKnotGeometry /><MeshDistortMaterial distort={1} speed={10} /></mesh> {/ * Reflektierende Oberfläche (Boden) */} <mesh rotation-x={-Math.PI / 2} position={[0, -3, 0]}><planeGeometry args={[10, 10]} /><MeshReflectorMaterial blur={[200, 100]} // X, Y方向のぼかしを設定 mixBlur={0.5} // ぼかしの強さを調整 mixStrength={0.7} // 反射の強さ mixContrast={1} // 反射のコントラストを調整 resolution={512} // 解像度、値を上げるほどきれいになるがパフォーマンスに影響 mirror={1} // 環境から反射を取得 depthScale={0.1} // 深さのスケール reflectorOffset={0.2} // 反射面のオフセット /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

MeshtransmissionMaterial

MeshtransmissionMaterial ist ein Material, das eine verbesserte Version von MeshphysicalMaterial ist. Es ist so konzipiert, dass es einfacher wird, Getriebe und Brechung zu behandeln. wichtige den IOR festzulegen

IOR (Index der Brechung) : Dies ist eine Zahl, die das Verhältnis zwischen der Geschwindigkeit darstellt, mit der Licht durch Material fließt, und der Geschwindigkeit, mit der es durch die Luft reist, und wenn dies leicht eingestellt werden kann, ist es sehr einfach, Glas, Diamant, Wasser usw. zu beschreiben.

  • Luft IOR: 1.0
  • Glas IOR: 1.5
  • Diamond IOR: 2.42
  • Wasser IOR: 1.33
importieren {canvas} aus "@react-drei/faser"; importieren {atepatics, meshtransmissionmaterial, Orbitcontrols,} von "@react-three/drei"; import {vector3} aus "drei"; // anfängliche Kameraposition const initial_camera_position = new vector3 (3, 3, 3); Funktion App (): jsx.element {return (return ( <Canvas shadows camera={{ position: INITIAL_CAMERA_POSITION, fov: 45 }}><color attach="background" args={["#f0f0f0"]} /><Caustics color="#FF8F20" position={[0, -0.5, 0]} lightSource={[5, 5, -10]} worldRadius={0.01} ior={1.2} intensity={0.005} causticsOnly={false} backside={false} ><mesh castShadow receiveShadow position={[-2, 0.5, -1]} scale={0.5}><sphereGeometry args={[1, 64, 64]} /><MeshTransmissionMaterial resolution={1024} distortion={0.25} color="#FF8F20" thickness={1} anisotropy={1} /></mesh></Caustics><mesh><boxGeometry /><meshNormalMaterial /></mesh> {/ * Beleuchtungseinstellungen */}<ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /> {/ * Kameraoperation */}<OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Meshwobblematerial

Meshwobblematerial ist ein Material, das wellige Geometrie schütteln kann. Dies ist auch ein Material, das auf Bewegung angewendet werden kann.

import {vector3} aus "drei"; importieren {canvas} aus "@react-drei/faser"; importieren {meshwobblematerial, 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><torusKnotGeometry /><MeshWobbleMaterial factor={1} speed={10} /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 5, 5]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Softshadows

Softshadows ist eine Komponente, die es einfacher macht, realistischere Schatten hinzuzufügen, obwohl dies kein Material ist. Sie können die Schatten der Schatten leicht ausdrücken.

importieren {canvas} aus "@react-drei/faser"; Import {Softshadows, OrbitControls} aus "@react-three/drei"; import {vector3} aus "drei"; const initial_camera_position = new vector3 (3, 3, 3); Funktion App (): jsx.element {return (return (<Canvas shadows camera={{ position: INITIAL_CAMERA_POSITION }} style={{ background: "lightblue" }} >{/ * Aktivieren Sie Softshadows */} <SoftShadows /><mesh castShadow receiveShadow><torusKnotGeometry /><meshStandardMaterial color="red" /></mesh> {/ * Boden (scharfer Schatten) */} <mesh receiveShadow position={[0, -1.8, 0]} rotation={[-Math.PI / 2, 0, 0]} ><planeGeometry args={[5, 5]} /><meshStandardMaterial color="lightgray" /></mesh> {/ * Beleuchtungseinstellungen */} <ambientLight intensity={0.3} /><directionalLight position={[5, 5, 5]} intensity={0.7} castShadow shadow-mapSize-width={1024} shadow-mapSize-height={1024} /> {/ * Kameraoperation */}<OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Es ist ein bisschen verwirrend, aber es kann im Vergleich zu den zuvor erwähnten Schatten von Meshdiscardmaterial einfacher zu verstehen sein.

Über Material vorne und hinten

Ein Material hat eine Seite, die definiert, welche Seite zu rendern ist.
Standardmäßig ist es Frontside, aber Sie können die Rückseite auch durch die Rückseite rendern.

import {vector3} aus "drei"; importieren {canvas} aus "@react-drei/faser"; Import {OrbitControls} aus "@react-three/drei"; Import * als drei von "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 position={[0, 0, 0]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color="red" side={THREE.FrontSide} // Optional as it's the default /></mesh><mesh position={[2, 0, 0]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color="red" side={THREE.BackSide} // Optional as it's the default /></mesh><ambientLight intensity={0.5} /><directionalLight position={[0, 3, 3]} intensity={0.7} /><OrbitControls /></Canvas> ); } standardmäßige App exportieren;

Erstellen von 3D -Inhalten mithilfe von Standardgeometrie und Materialien

Erstellen Sie einen einfachen, unterhaltsamen und interaktiven 3D -Inhalt mit Standardgeometrie und Materialien von React Three Faser und reagieren Sie drei DREI.

Login -Bildschirm (Spielstil)

Ich habe den Bildschirm reproduziert, um ein Poke -Poke -Paket auszuwählen und ihn ein wenig angepasst !!
3D -Hintergrund , den ich erstelle

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

YouTube
[Super Easy] Einführung in Reagieren von drei Faser x Drei x TypyScript! Poke Poke Style 3D -Hintergrund mit Standardobjekten! Reagieren Sie drei Faser x Drei x Einführung in Typenkript! Poke Poke Style 3D -Hintergrund mit Standardobjekten! Klicken Sie auf den Bildschirm, um das kürzlich beliebte Pokepoke -Paket auszuwählen, um React Three Faser zu sehen und drei Drei zu reagieren ...
Möglicherweise möchten Sie auch lesen
[Super Easy] Einführung in Reagieren von drei Faser x Drei x TypyScript! Poke Poke Style 3D -Hintergrund mit Standardobjekten! In letzter Zeit gab es immer mehr Fälle, in denen 3D -Grafiken in der Entwicklung von Web -Apps verwendet werden. Insbesondere, wenn Sie React Three Faser (R3F) verwenden, können Sie es einfach zu einer React -Komponente machen, sodass es einfach ist, drei zu verwenden.

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

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
Reagieren Sie drei.js
Teilen Sie, wenn Sie möchten!

Wer hat diesen Artikel geschrieben

Takus Avatar 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!

Verwandte Artikel

Inhaltsverzeichnis