Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Introduktionen af ​​3D-gengivelse har ændret brugerinteraktion med internetteknologier. Til at begynde med er webapps blevet mere fordybende og giver en engagerende og interaktiv oplevelse via webbrowseren.

Denne teknologi er allerede blevet ivrigt taget til sig af gaming og augmented/virtual reality-felterne. Det tilbyder en realistisk og fordybende måde at interagere med virtuelle elementer på.

Find ud af, hvordan du gengiver 3D-objekter i en React-applikation.

Det grundlæggende i 3D-modellering og -programmering

Før du går i gang med 3D-gengivelse, er der et par punkter, du skal være opmærksom på:

  • 3D-objekter indeholder individuelle punkter eller hjørner, der definerer deres struktur i tre dimensioner. Sammenføjning af disse punkter skaber ansigter, der udgør objektets form på skærmen.
  • Moderne browsere har den indbyggede evne til at gengive 3D ved hjælp af teknologier som WebGL. Det gør de ved at udnytte kraften fra den grafiske processorenhed i din maskine til at gengive 3D-modeller og scener hurtigt.
    instagram viewer
  • Ethvert 3D-objekt, som din browser gengiver, består af tre hovedkomponenter. Det er scenen, kameraet og rendereren, og de spiller alle en afgørende rolle. Scenen udgør basisplatformen til at opsætte alle dine 3D-elementer, inklusive lys og kameraer. Kameraet giver dig mulighed for at se 3D-objektet fra forskellige vinkler. Til sidst monterer rendereren og viser scenen oven på et lærreds HTML-element.

3D-gengivelse med Three.js og React Three Fiber

Three.js er et JavaScript-bibliotek, som du kan bruge til at gengive 3D-objekter i en webbrowser. Ved hjælp af dets indbyggede komponenter kan du nemt oprette og gengive 3D-objekter i din browser sammen med andre funktioner i din React-applikation.

React-tre-fiber-pakken fungerer oven på Three.js. Det forenkler processen med at bruge Three.js-komponenter til at skabe og gengive 3D-objekter i browseren. Interessant nok giver det også brugerdefinerede Reager kroge som er nyttige, når du opretter 3D-objekter i React.

Gengivelse af 3D-objekter i en React-applikation

Følg nedenstående trin for at gengive en simpel 3D-form på din browser såvel som en Blender-skabt 3D-model. Hvis du ikke er bekendt med Blender, lære at komme i gang som nybegynder.

Opret en React-applikation, tænd din terminal for at køre kommandoen nedenfor, og installer de nødvendige afhængigheder:

npm installer tre @react-three/fiber @react-three/drei

Installer pakkerne Three.js, react-three-fiber og react-three-drei. React-three-drei-biblioteket arbejder sammen med react-three-fiber for at skabe 3D-scener og -objekter.

Gengiv en 3D-form

Du kan gengive en simpel 3D-boksform i en browser med meget lidt kode. Åbn src/app.js fil, slet al kedelplade React-koden, og tilføj følgende:

importere Reagere fra"reagere";
importere {Lærred} fra"@reager-tre/fiber";
importere {OrbitControls} fra"@reager-tre/drei";
fungereBoks() {
Vend tilbage (
<mesh>
<boxBufferGeometrivedhæfte ="geometri" />
<meshLambert Materialevedhæfte="materiale"farve="Hot pink" />
mesh>
 )
}
eksportStandardfungereApp() {
Vend tilbage (
<divklassenavn="App">
<divklassenavn="App-header">
<Lærred>
<OrbitControls />
<omgivende lysintensitet ={0.5} />
<spotlightposition={[10,15,10]} vinkel={0.3} />
<Boks />
Lærred>
div>
div>
 );
}

Denne kode gør følgende:

  • Det Boks komponent bruger mesh-, boxBufferGeometry- og meshLambertMaterial-komponenterne fra react-three-fiber til at gengive en 3D-boks. Disse tre komponenter arbejder hånd i hånd for at skabe boksens form.
  • BoxBufferGeometry-komponenten opretter boksen, og denne kode indstiller meshLambertMaterial-komponentens farveegenskab til hot pink.
  • Det gengiver derefter Canvas-elementet, der huser bokskomponenten, med omgivende lys, en spotlight og indstillingen af ​​Orbit Controls-komponentegenskaberne.
  • Egenskaben til omgivende lyskomponent tilføjer et blødt lys til lærredet. SpotLight-komponenten tilføjer et fokuseret lys fra en bestemt position med en vinkel på 0,3. Endelig giver OrbitControls-komponenten dig mulighed for at styre kameraet omkring 3D-objektet.

Importer og gengiv app.js-komponenten i index.js-filen, og drej en udviklingsserver op for at se resultaterne i din browser på http://localhost: 3000.

Gengiv en Blender-skabt 3D-model

Blender er et open source-værktøj, der bruges af kreative inden for forskellige felter til at skabe 3D-modeller, visuelle effekter og interaktive 3D-applikationer. Du kan bruge Blender til at oprette 3D-modeller til din webapplikation.

Til denne tutorial vil du gengive en BMW 3D-model efter SRT-ydelse tilgængelig på Sketchfab.

Kredit: RadeonGamer/ Sketchfab
Creative Commons Navngivelse

For at komme i gang skal du downloade modellen fra Sketchfab i GLTF (GL Transmission Format). Dette format gør det nemt at gengive 3D-modeller på browseren. Når overførslen er færdig, skal du åbne modellens mappe og flytte modellens fil til den offentlige mappe i din React-applikation.

Gå nu over til din app.js-fil og udfyld den med koden nedenfor.

  • Importer følgende komponenter: 
    importere {useGLTF, Stage, PresentationControls} fra"@reager-tre/drei";
  • Opret modelkomponenten og tilføj koden nedenfor: 
    fungereModel(rekvisitter){
    konst {scene} = brugGLTF("/bmw.glb");
    Vend tilbage<primitivobjekt={scene} {...rekvisitter} />
    }
    eksportStandardfungereApp() {
    Vend tilbage (
    <divklassenavn="App">
    <divklassenavn="App-header">
     dpr={[1,2]} 
     skyggekamera={{fav: 45}}
     stil={{"position": "absolut"}}
     >
     hastighed={1,5} 
    global zoom={0.5}
     polar={[-0.1, Matematik.PI / 4]}
     >
    <Scenemiljø={nul}>
    <Modelvægt={0.01} />
    Scene>
    Præsentationskontrol>
    Lærred>
    div>
    div>
     );
    }
  • useGLTF-krogen fra React-three-drei-biblioteket definerer en scenevariabel og tildeler den værdien af ​​modelfilen, der er placeret på stien "/bmw.glb". Komponenten returnerer derefter et primitivt objekt, der danner scenen for 3D-modellen.
  • Canvas-elementet gengiver hovedkomponenterne, der udgør modellen, med de specificerede egenskaber, såsom enhedspixelforhold (DPR), skygger, kameravinkel og stil.
  • Du angiver derefter egenskaberne for PresentationControls-komponenten, såsom hastighed og global zoom. Disse egenskaber definerer, hvordan du vil styre modellen på skærmen.
  • Til sidst skal du konfigurere Stage-komponenten, der monterer modellen på browserskærmen.

Drej udviklingsserveren op for at opdatere ændringerne på din applikation. Du bør se modellen gengivet i din browser.

Gengivelse af 3D-modeller i din webapplikation

Gengivelse af 3D-modeller i dine webapplikationer kan give flere fordele, såsom at forbedre brugeroplevelsen ved at give en mere realistisk og interaktiv 3D-følelse. Som et resultat kan brugerne bedre engagere sig i produktet.

Gengivelse af 3D-elementer kan dog have sine ulemper, såsom at påvirke applikationens ydeevne negativt. 3D-modeller kræver flere ressourcer at gengive, hvilket kan få din app til at indlæse langsommere.