Come eseguire il rendering di oggetti 3D in un’applicazione React

L’introduzione del rendering 3D ha trasformato l’interazione dell’utente con le tecnologie Internet. Per cominciare, le app web sono diventate più coinvolgenti, fornendo un’esperienza coinvolgente e interattiva tramite il browser web.

Questa tecnologia è già stata adottata con entusiasmo dai campi dei giochi e della realtà aumentata/virtuale. Offre un modo realistico e coinvolgente per interagire con elementi virtuali.

Scopri come eseguire il rendering di oggetti 3D in un’applicazione React.

Le basi della modellazione e della programmazione 3D

Prima di iniziare con il rendering 3D, ci sono alcuni punti di cui devi essere a conoscenza:

• Gli oggetti 3D contengono singoli punti, o vertici, che definiscono la loro struttura in tre dimensioni. L’unione di questi punti crea facce che compongono la forma dell’oggetto sullo schermo.
• I browser moderni hanno la capacità integrata di eseguire il rendering 3D utilizzando tecnologie come WebGL. Lo fanno utilizzando la potenza dell’unità di elaborazione grafica nella tua macchina per eseguire rapidamente il rendering di modelli e scene 3D.
• Qualsiasi oggetto 3D visualizzato dal browser è costituito da tre componenti principali. Questi sono la scena, la telecamera e il renderer, e giocano tutti un ruolo cruciale. La scena fornisce la piattaforma di base per configurare tutti i tuoi elementi 3D, comprese le luci e le telecamere. La fotocamera consente di visualizzare l’oggetto 3D da varie angolazioni. Infine, il renderer monta e visualizza la scena sopra un elemento HTML canvas.

Rendering 3D con Three.js e React Three Fiber

Three.js è una libreria JavaScript che puoi utilizzare per eseguire il rendering di oggetti 3D in un browser web. Utilizzando i suoi componenti integrati, puoi facilmente creare ed eseguire il rendering di oggetti 3D nel tuo browser insieme ad altre funzionalità della tua applicazione React.

Il pacchetto react-three-fiber funziona su Three.js. Semplifica il processo di utilizzo dei componenti Three.js per creare ed eseguire il rendering di oggetti 3D nel browser. È interessante notare che fornisce anche ganci React personalizzati che sono utili durante la creazione di oggetti 3D in React.

Rendering di oggetti 3D in un’applicazione React

Segui i passaggi seguenti per eseguire il rendering di una semplice forma 3D sul tuo browser e di un modello 3D creato da Blender. Se non hai familiarità con Blender, scopri come iniziare come principiante.

Crea un’applicazione React, avvia il tuo terminale per eseguire il comando seguente e installa le dipendenze richieste:

npm install three @react-three/fiber @react-three/drei

Installa i pacchetti Three.js, react-three-fiber e react-three-drei. La libreria react-three-drei funziona insieme a react-three-fiber per creare scene e oggetti 3D.

Rendering di una forma 3D

Puoi eseguire il rendering di una semplice forma di scatola 3D in un browser con pochissimo codice. Apri il file src/app.js , elimina tutto il codice React boilerplate e aggiungi quanto segue:

import React from "react";
import {Canvas} from "@react-three/fiber";
import {OrbitControls} from "@react-three/drei";


function Box() {
  return (
    <mesh>
      <boxBufferGeometry attach ="geometry" />
      <meshLambertMaterial attach="material" color="hotpink" />
    </mesh>
  )
}

export default function App() {
  return (
    <div className="App">
      <div className="App-header">
        <Canvas>
          <OrbitControls />
          <ambientLight intensity ={0.5} />
          <spotLight position={[10, 15,10]} angle={0.3} />
          <Box />
        </Canvas>
      </div>
    </div>
  );
}

Questo codice fa quanto segue:

• Il componente Box utilizza i componenti mesh, boxBufferGeometry e meshLambertMaterial di react-three-fiber per eseguire il rendering di un box 3D. Questi tre componenti lavorano mano nella mano per creare la forma della scatola.
• Il componente boxBufferGeometry crea la scatola e questo codice imposta la proprietà color del componente meshLambertMaterial su hot pink.
• Quindi esegue il rendering dell’elemento Canvas che ospita il componente box con la luce ambientale, un riflettore e il set di proprietà del componente Orbit Controls.
• La proprietà del componente luce ambientale aggiunge una luce soffusa alla tela. Il componente spotLight aggiunge una luce focalizzata da una posizione specifica con un angolo di 0,3. Infine, il componente OrbitControls ti consente di controllare la telecamera intorno all’oggetto 3D.

Importa ed esegui il rendering del componente app.js nel file index.js e avvia un server di sviluppo per visualizzare i risultati nel tuo browser all’indirizzo http://localhost:3000.

Rendering di un modello 3D creato da Blender

Blender è uno strumento open source utilizzato da creativi in ​​diversi campi per creare modelli 3D, effetti visivi e applicazioni 3D interattive. Puoi usare Blender per creare modelli 3D per la tua applicazione web.

Per questo tutorial, eseguirai il rendering di un modello 3D BMW con le prestazioni SRT disponibili su Sketchfab .

Per iniziare, scarica il modello da Sketchfab in GLTF (GL Transmission Format). Questo formato semplifica il rendering dei modelli 3D nel browser. Una volta completato il download, apri la cartella del modello e sposta il file del modello nella directory pubblica all’interno della tua applicazione React.

Ora vai al tuo file app.js e popolalo con il codice qui sotto.

• Importa i seguenti componenti: import {useGLTF, Stage, PresentationControls} from "@react-three/drei";
• Crea il componente del modello e aggiungi il codice seguente: function Model(props){
  const {scene} = useGLTF("/bmw.glb");
  return <primitive object={scene} {...props} />
}


  export default function App() {
  return (
    <div className="App">
      <div className="App-header">
        <Canvas
          dpr={[1,2]}
          shadows camera={{fav: 45}}
          style={{"position": "absolute"}}
        >
          <PresentationControls
            speed={1.5}
            global zoom={0.5}
            polar={[-0.1, Math.PI / 4]}
          >
            <Stage environment={null}>
              <Model scale={0.01} />
            </Stage>
          </PresentationControls>
        </Canvas>
      </div>
    </div>
  );
}


• L’hook useGLTF della libreria React-three-drei definisce una variabile di scena e le assegna il valore del file del modello che si trova nel percorso “/bmw.glb”. Il componente restituisce quindi un oggetto primitivo che pone la scena per il modello 3D.
• L’elemento Canvas esegue il rendering dei componenti principali che costituiscono il modello, con le proprietà specificate, come il rapporto pixel del dispositivo (DPR), le ombre, l’angolazione della telecamera e lo stile.
• Poi specifichi le proprietà del componente PresentationControls come la velocità e lo zoom globale. Queste proprietà definiscono come controllerai il modello sullo schermo.
• Infine, configura il componente Stage che monta il modello sulla schermata del browser.

Avvia il server di sviluppo per aggiornare le modifiche sulla tua applicazione. Dovresti vedere il modello renderizzato sul tuo browser.

Rendering di modelli 3D nella tua applicazione web

Il rendering di modelli 3D nelle tue applicazioni web può offrire diversi vantaggi, come migliorare l’esperienza dell’utente fornendo una sensazione 3D più realistica e interattiva. Di conseguenza, gli utenti possono interagire meglio con il prodotto.

Tuttavia, il rendering di elementi 3D può avere i suoi svantaggi, ad esempio influire negativamente sulle prestazioni dell’applicazione. I modelli 3D richiedono più risorse per il rendering, il che può rallentare il caricamento dell’app.