Hola, este es el blog de Tecnocracia. Por lo general, hacemos transformación de negocios digitales, pero hoy tenemos para ti la historia de cómo usar la biblioteca y los shaders de three.js que hicimos Landing para nuestra campaña promocional. El narrador principal es nuestro desarrollador Artem .
Al principio
, . -, . .
, , :
. «» , -. , . : , , .
, , - , . -, - , -. -, - , - : . , .
, . 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 — . , , . , . !
Por lo general, escribimos todo en mecanografiado, pero en este caso no necesitamos la verificación de tipos, por lo que decidimos escribir en JS puro. Para no molestarnos con el ensamblaje, usamos parcel : nos ayudó a importar HTML entre sí sin configuración (lo cual es conveniente cuando hay mucho contenido en la página) y usar Stylus para estilos.
Todo el resto
Para no dedicar mucho tiempo a la animación, usamos animate.css. También se tomaron algunos efectos de codepen.
Dejemos enlaces útiles en lugar de resultados.
Ejemplos de trabajo en threejs
Libro interactivo de Threejs Basics
Excelente curso sobre sombreadores en GLSL