Tutorial: React Three Fiber e Three.js para criar cenas em 3D impressionantes
Three.js é algo que cada vez mais está me impressionando, e para quem não conhece, é uma biblioteca que possibilita você utilizar JavaScript para criar aplicações na web que rodam com WebGL. Em cima disso, criaram uma abstração chamada React Three Fiber para você utilizar todo o poder do Three.js em forma de componentes (e assumindo vários valores default para acelerar sua produtividade).
Esta cena abaixo é de um dos tutoriais listados aqui nessa publicação:
Por onde começar?
Eu esbarrei numa série de tutoriais legais e que gostaria de compartilhar aqui no TabNews, mas este primeiro é o mais especial:
Eu gostaria de saber isso antes de usar o React Three Fiber
Este tutorial é muito bem feito, pois o autor coloca lado a lado uma implementação usando nativamente o Three.js e depois React Three Fiber para você realmente entender os conceitos básicos e o que cada biblioteca abstrai para você.
Link: https://youtu.be/DPl34H2ISsk
Three.js na prática
Esta é uma ótima playlist que mostra como utilizar o Three.js para valer, incluindo misturando outras lógicas de programação e como que isso reage com a biblioteca.
Link: https://www.youtube.com/playlist?list=PLWP0narTpO8lAmalqspXgv-x1pq9CHnvR
React Three Fiber na prática
Do mesmo autor da playlist passada, agora chegou a hora de aprender a utilizar para valer o React Three Fiber, incluindo como construir a cena do carro 3D que destaquei no início do post. Fora essa cena do carro, você também irá aprender a criar uma cena 3D abstrata de um portal flutuando.
Link: https://www.youtube.com/playlist?list=PLWP0narTpO8n9YwsTLVO7-vbIzLELrwwS
Conclusão
Essas são tecnologias que continuam me impressionando e que podem ser utilizadas de forma que abraçam o seu site por inteiro ou apenas adicionam detalhes interessantes, principalmente para visualização de dados ou conceitos.