Hai, ini adalah blog Teknokrasi. Biasanya kami melakukan transformasi bisnis digital, tetapi hari ini kami memiliki untuk Anda sejarah cara menggunakan perpustakaan dan shader three.js yang kami lakukan Landing untuk kampanye promosi kami. Pendongeng utama adalah pengembang kami Artem .
Di awal
, . -, . .
, , :
. «» , -. , . : , , .
, , - , . -, - , -. -, - , - : . , .
, . 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 — . , , . , . !
Biasanya kami menulis semuanya dalam skrip ketikan, tetapi dalam kasus ini kami tidak benar-benar memerlukan pemeriksaan tipe, jadi kami memutuskan untuk menulis dalam JS murni. Agar tidak repot dengan perakitan, kami menggunakan parcel - ini membantu kami mengimpor HTML satu sama lain tanpa konfigurasi (yang nyaman bila ada banyak konten di halaman) dan menggunakan Stylus untuk gaya.
Sisanya
Agar tidak menghabiskan banyak waktu untuk animasi, kami menggunakan animate.css. Juga beberapa efek diambil dari codepen.
Mari tinggalkan tautan yang berguna alih-alih keluaran.
Buku Interaktif Dasar-dasar Threejs
Kursus yang sangat baik tentang shader di GLSL