O que é Three.JS?

Three.JS é uma biblioteca JavaScript cross-browser e API usada para criar e exibir gráficos 3D animados em navegadores da Web.

Three.JS permite a criação de animações 3D aceleradas por GPU usando a linguagem JavaScript sem depender de plugins

O que é React Three Fiber?

react -three-fiber é um renderizador React para Three.JS que não tem sobrecarga adicional. Os componentes participam de um loop de renderização unificado fora do React. Ele supera o Three.JS em escala devido às habilidades de agendamento do React.

Configurar

Existem muitas dependências para isso:

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

O Canvasobjeto é onde você começa a definir sua cena React Three Fiber.

No código acima, acabei de criar uma tela com câmera e sombras configuradas

Luzes e Sombras

Dentro da tela, precisamos das luzes e das sombras, para que nossos modelos tenham suas sombras e pareçam brilhantes

Crie os Corações

Primeiro, temos que criar a forma do coração:

Em seguida, multiplique por diferentes fatores e velocidade:

Porque queremos que nossos corações flutuem, vamos definir sua posição comuseFrame

Finalmente, vamos lançar os corações com Instancese colocá-lo para o Canvasacima

Por fim, precisamos de alguns efeitos

Conclusão

Os resultados

Demonstração ao vivo:https://threejs-floating-hearts.vercel.app/

Código fonte:https://github.com/leduc1901/threejs-floating-hearts

Últimas palavras

Embora meu conteúdo seja gratuito para todos, mas se você achar este artigo útil, pode me pagar um café aqui