Salut, c'est le blog Technocracy. En général , nous faisons la transformation de l' entreprise numérique, mais aujourd'hui nous avons pour vous l'histoire de la façon d'utiliser la bibliothèque et Three.js shaders que nous avons fait d' atterrissage pour notre campagne de promotion. Le principal conteur est notre développeur Artem .
Au début
, . -, . .
, , :
. «» , -. , . : , , .
, , - , . -, - , -. -, - , - : . , .
, . 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 — . , , . , . !
Habituellement, nous écrivons tout en tapuscrit, mais dans ce cas, nous n'avons pas vraiment besoin de vérification de type, nous avons donc décidé d'écrire en pur JS. Afin de ne pas nous soucier de l'assemblage, nous avons utilisé parcel - cela nous a aidés à importer du HTML l'un dans l'autre sans configuration (ce qui est pratique lorsqu'il y a beaucoup de contenu sur la page) et à utiliser Stylus pour les styles.
Tout le reste
Afin de ne pas passer beaucoup de temps sur l'animation, nous avons utilisé animate.css. Certains effets ont également été tirés de codepen.
Laissons des liens utiles au lieu de la sortie.
Exemples de travail dans threejs
Livre interactif Threejs Basics
Excellent cours sur les shaders en GLSL
De nombreux modèles 3D gratuits