Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

3D atvaizdavimo įdiegimas pakeitė vartotojų sąveiką su interneto technologijomis. Iš pradžių žiniatinklio programos tapo labiau įtraukiančios, suteikdamos patrauklią ir interaktyvią patirtį naudojant žiniatinklio naršyklę.

Šią technologiją jau nekantriai perėmė žaidimų ir papildytos/virtualios realybės sritys. Tai realistiškas ir įtraukiantis būdas bendrauti su virtualiais elementais.

Sužinokite, kaip „React“ programoje pateikti 3D objektus.

3D modeliavimo ir programavimo pagrindai

Prieš pradėdami naudoti 3D atvaizdavimą, turite žinoti keletą dalykų:

  • 3D objektuose yra atskirų taškų arba viršūnių, kurios apibrėžia jų struktūrą trimis matmenimis. Sujungus šiuos taškus, sukuriami veidai, kurie sudaro objekto formą ekrane.
  • Šiuolaikinės naršyklės turi integruotą galimybę pateikti 3D naudojant tokias technologijas kaip WebGL. Jie tai daro išnaudodami jūsų įrenginio grafinio apdorojimo bloko galią, kad greitai atvaizduotų 3D modelius ir scenas.
    instagram viewer
  • Bet koks 3D objektas, kurį pateikia jūsų naršyklė, susideda iš trijų pagrindinių komponentų. Tai yra scena, kamera ir atvaizduotojas, ir jie visi atlieka lemiamą vaidmenį. Scena yra pagrindinė platforma, leidžianti nustatyti visus 3D elementus, įskaitant šviesas ir kameras. Kamera leidžia žiūrėti 3D objektą įvairiais kampais. Galiausiai, atvaizdavimo priemonė pritvirtina ir parodo sceną ant drobės HTML elemento.

3D atvaizdavimas naudojant Three.js ir „React Three Fiber“.

Three.js yra „JavaScript“ biblioteka, kurią galite naudoti 3D objektams pateikti žiniatinklio naršyklėje. Naudodami integruotus komponentus galite lengvai kurti ir pateikti 3D objektus naršyklėje kartu su kitomis React programos funkcijomis.

React-three-fiber paketas veikia kartu su Three.js. Tai supaprastina Three.js komponentų naudojimą kuriant ir pateikiant 3D objektus naršyklėje. Įdomu tai, kad tai taip pat suteikia užsakymą Reaguoti kabliukai kurie praverčia kuriant 3D objektus programoje „React“.

3D objektų atvaizdavimas „React“ programoje

Atlikite toliau nurodytus veiksmus, kad naršyklėje pateiktumėte paprastą 3D formą ir Blender sukurtą 3D modelį. Jei nesate susipažinę su Blender, išmokti pradėti kaip pradedantysis.

Sukurkite programą „React“., paleiskite terminalą, kad paleistumėte toliau pateiktą komandą ir įdiekite reikiamas priklausomybes:

npm įdiegti tris @react-three/fiber @react-three/drei

Įdiekite paketus Three.js, react-three-fiber ir react-tree-drei. „React-tree-drei“ biblioteka veikia kartu su „react-three-fiber“, kad sukurtų 3D scenas ir objektus.

Pateikite 3D figūrą

Galite pateikti paprastą 3D dėžutės formą naršyklėje naudodami labai mažai kodo. Atidaryk src/app.js failą, ištrinkite visą „React“ kodą ir pridėkite:

importuoti Reaguoti iš"reaguoti";
importuoti {drobė} iš„@react-three/fiber“;
importuoti {OrbitControls} iš„@react-three/drei“;
funkcijaDėžė() {
grąžinti (
<Tinklelis>
<boxBufferGeometryprikabinti ="geometrija" />
<tinklelisLambertMedžiagaprikabinti="medžiaga"spalva="ryški rausva spalva" />
Tinklelis>
 )
}
eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (
<divklasės pavadinimas="Programėlė">
<divklasės pavadinimas="Programos antraštė">
<Drobė>
<OrbitControls />
<ambientLightintensyvumo ={0.5} />
<taškinė šviesapadėtis={[10,15,10]} kampu={0.3} />
<Dėžė />
Drobė>
div>
div>
 );
}

Šis kodas atlieka šiuos veiksmus:

  • The Dėžė komponentas naudoja tinklelį, boxBufferGeometry ir meshLambertMaterial komponentus iš react-three-fiber, kad atvaizduotų 3D dėžutę. Šie trys komponentai veikia kartu, kad sukurtų dėžutės formą.
  • „boxBufferGeometry“ komponentas sukuria langelį ir šis kodas nustato „meshLambertMaterial“ komponento spalvos ypatybę į karštą rožinę.
  • Tada jis atvaizduoja elementą „Canvas“, kuriame yra dėžutės komponentas, su aplinkos apšvietimu, prožektoriumi ir „Orbit Controls“ komponento ypatybių rinkiniu.
  • Aplinkos šviesos komponento savybė suteikia drobei švelnios šviesos. „SpotLight“ komponentas prideda sufokusuotą šviesą iš konkrečios padėties 0,3 kampu. Galiausiai, OrbitControls komponentas leidžia valdyti kamerą aplink 3D objektą.

Importuokite ir pateikite app.js komponentą index.js faile ir sukurkite kūrimo serverį, kad peržiūrėtumėte rezultatus naršyklėje adresu http://localhost: 3000.

Pateikite Blender sukurtą 3D modelį

„Blender“ yra atvirojo kodo įrankis, kurį įvairių sričių kūrėjai naudoja 3D modeliams, vaizdiniams efektams ir interaktyvioms 3D programoms kurti. Naudodami Blender galite kurti 3D modelius savo žiniatinklio programai.

Šioje pamokoje pateiksite BMW 3D modelio pagal SRT našumą Sketchfab.

Kreditas: RadeonGamer/ Sketchfab
„Creative Commons“ priskyrimas

Norėdami pradėti, atsisiųskite modelį iš „Sketchfab“ GLTF (GL perdavimo formatu). Šis formatas leidžia lengvai atkurti 3D modelius naršyklėje. Kai atsisiuntimas bus baigtas, atidarykite modelio aplanką ir perkelkite modelio failą į viešąjį „React“ programos katalogą.

Dabar eikite į failą app.js ir užpildykite jį toliau pateiktu kodu.

  • Importuokite šiuos komponentus: 
    importuoti {useGLTF, Stage, PresentationControls} iš„@react-three/drei“;
  • Sukurkite modelio komponentą ir pridėkite toliau esantį kodą: 
    funkcijaModelis(rekvizitai){
    konst {scene} = useGLTF("/bmw.glb");
    grąžinti<primityvusobjektas={scene} {...rekvizitas} />
    }
    eksportuotinumatytasfunkcijaProgramėlė() {
    grąžinti (
    <divklasės pavadinimas="Programėlė">
    <divklasės pavadinimas="Programos antraštė">
     dpr={[1,2]} 
     shadows camera={{fav: 45}}
     style={{"pozicija": "absoliutus"}}
     >
     greitis = {1,5} 
    globalus zoom={0.5}
     polinis={[-0.1, Matematika.PI / 4]}
     >
    <Scenaaplinką={null}>
    <Modelisskalė={0.01} />
    Scena>
    PresentationControls>
    Drobė>
    div>
    div>
     );
    }
  • UseGLTF kabliukas iš React-three-drei bibliotekos apibrėžia scenos kintamąjį ir priskiria jam modelio failo, esančio kelyje „/bmw.glb“, vertę. Tada komponentas grąžina primityvų objektą, kuris sukuria 3D modelio sceną.
  • Drobės elementas pateikia pagrindinius modelio komponentus su nurodytomis savybėmis, tokiomis kaip įrenginio pikselių santykis (DPR), šešėliai, kameros kampas ir stilius.
  • Tada nurodote PresentationControls komponento ypatybes, tokias kaip greitis ir visuotinis mastelio keitimas. Šios savybės apibrėžia, kaip valdysite modelį ekrane.
  • Galiausiai sukonfigūruokite Stage komponentą, kuris pritvirtina modelį naršyklės ekrane.

Pasukite kūrimo serverį, kad atnaujintumėte programos pakeitimus. Turėtumėte pamatyti modelį, pateiktą jūsų naršyklėje.

3D modelių atvaizdavimas žiniatinklio programoje

3D modelių pateikimas žiniatinklio programose gali pasiūlyti keletą privalumų, pvz., pagerinti naudotojo patirtį suteikiant tikroviškesnį ir interaktyvesnį 3D pojūtį. Dėl to vartotojai gali geriau įsitraukti į produktą.

Tačiau 3D elementų atvaizdavimas gali turėti neigiamų pusių, pavyzdžiui, neigiamai paveikti programos veikimą. 3D modeliams pateikti reikia daugiau išteklių, todėl programa gali būti įkeliama lėčiau.