Olá, este é o blog da Tecnocracia. Normalmente fazemos transformação de negócios digitais, mas hoje temos para você a história de como usar a biblioteca e os shaders three.js que fizemos Landing para nossa campanha promocional. O principal contador de histórias é nosso desenvolvedor Artem .
No começo
, . -, . .
, , :
. «» , -. , . : , , .
, , - , . -, - , -. -, - , - : . , .
, . Figma , .
, , . , .
3D- —
. , , . 3D- .
, , . - — . . PNG, . 3D three.js.
, , . : , , . , , .
— , . , .
Three.js:
Bloom ( );
Film ;
Glitch ;
? HTML, WebGL. : , .
: CSS. , .
. , . , , - .
-:
, , , . , : , , , .
. — .
, GLSL, . ? . 1 64. . « » . .
, , « » CPU GPU:
three.js?
. . 4 — 4 . 3D- 2D . , , . (, ).
— , three.js.
- . . , , .
, . FullHD 2 .
, . ( 0 1) . — .
: — , — . , .
3D-, . , . .
3D-max — . , . . , , .
, RGB .
— , .
, . , , , , R. Y G, . , , , .
? . 3D- , , .
: , — . . , .
?
:
UV , , . .
. : .
, ,
, , .
uniforms ( ), X Y ( / ) .
— COVID-19 . 3D max — . , , . , . !
Normalmente escrevemos tudo em texto digitado, mas, neste caso, não precisamos realmente de verificação de tipo, então decidimos escrever em JS puro. Para não nos incomodarmos com a montagem, usamos o parcel - ele nos ajudou a importar HTML uns para os outros sem configuração (o que é conveniente quando há muito conteúdo na página) e usar a Stylus para estilos.
Todo o resto
Para não perder muito tempo com animação, usamos animate.css. Além disso, alguns efeitos foram obtidos do codepen.
Vamos deixar links úteis em vez de saída.
Exemplos de trabalho em três anos
Livro interativo de Threejs Basics
Excelente curso sobre shaders em GLSL