こんにちは、これはテクノクラートのブログです。通常、私たちはデジタルビジネスの変革を行いますが、今日は、プロモーションキャンペーンのためにLandingで行ったライブラリとthree.jsシェーダーの使用方法の歴史があります。主なストーリーテラーは、開発者のArtemです。
開始時
, . -, . .
, , :
. «» , -. , . : , , .
, , - , . -, - , -. -, - , - : . , .
, . 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 — . , , . , . !
通常はすべてをtypescriptで記述しますが、この場合は型チェックは実際には必要ないため、純粋なJSで記述することにしました。アセンブリを気にしないようにするために、我々は小包を使用する-それは、私たちは（ページ上のコンテンツの多くがある場合に便利である）設定を行わなくてもお互いにHTMLをインポートし、スタイルのためのスタイラスを使用して助けました。
残りはすべて
アニメーションに多くの時間を費やさないために、animate.cssを使用しました。また、いくつかの効果はcodepenから取得されました。
出力の代わりに有用なリンクを残しましょう。
Threejs Basics Interactive Book