Cos'è Three.JS?

Three.JS è una libreria JavaScript cross-browser e un'API utilizzata per creare e visualizzare grafica 3D animata nei browser Web.

Three.JS consente la creazione di animazioni 3D con accelerazione GPU utilizzando il linguaggio JavaScript senza fare affidamento sui plug-in

Cos'è React Three Fiber?

react-three-fiber è un renderer React per Three.JS che non ha costi aggiuntivi. I componenti partecipano a un ciclo di rendering unificato al di fuori di React. Supera Three.JS su larga scala grazie alle capacità di pianificazione di React.

Impostare

Ci sono molte dipendenze per questo:

yarn add three @react-three/fiber @react-three/drei @react-three/postprocressing

L' Canvasoggetto è dove inizi a definire la tua React Three Fiber Scene.

Nel codice sopra, ho appena creato una tela con fotocamera e ombre configurate

Luci e ombre

All'interno della tela, abbiamo bisogno delle luci e delle ombre, quindi i nostri modelli avranno le loro ombre e sembreranno luminosi

Crea i cuori

Per prima cosa, dobbiamo creare la forma del cuore:

Quindi moltiplicalo per diversi fattori e velocità:

Poiché vogliamo che i nostri cuori fluttuino, fisseremo la loro posizione conuseFrame

Infine, lanceremo i cuori con Instancese li metteremo Canvassopra

Infine, abbiamo bisogno di alcuni effetti

Conclusione

I risultati

Dimostrazione dal vivo:https://threejs-floating-hearts.vercel.app/

Codice sorgente:https://github.com/leduc1901/threejs-floating-hearts

Ultime parole

Sebbene i miei contenuti siano gratuiti per tutti, ma se trovi utile questo articolo, puoi offrirmi un caffè qui