WebGLで液体効果を作成する方法

Sep 11, 2025
操作方法
Liquid effect Creative Bloq logo

多くのWebデザイナーは、サイトデザインに大きな影響を与える方法を探しています。そのため、ユーザーの注意を引くようにします。メソッドは、ヘッダグラフィックを使用して、ランディングページメニューの下にスライドショーを置くことから、フルブラウザの幅になるためにスライドショーを上回ることから進化しています - そして今や大多数のサイトがこの同じ形式に従う（あなた自身を簡単に作成すること）。 ウェブサイトビルダー ）。

今日、さまざまなWeb Awardsサイトで「日のサイト」を獲得したデザインは、一般的にもう少しユニークであることを行い、WebGLはこれに最適です。インタラクティブな要素を追加すると、本当にユーザーの注意を引くことができ、これがただ訪れた他のサイトと同じではないことを示しています。それは巨大なスライドショーといくつかを持っているよりもはるかに面白いです 視差スクロール 。あなたが複雑なニーズを持つサイトを持っているなら、あなたのことを確認してください ウェブホスティング サービスは点灯しています。

  • 14素晴らしいランディングページデザイン

このチュートリアルではスプラッシュ効果を得るためには、液体の反射面が追加され、これは転がり波が前方に移動してカメラに向かってアニメーション化されます。ルックアンドフィールを完了するために前進するパーティクルもあります。中央に現場のロゴがあり、シーン全体がユーザーのマウスの動きに反応し、コンテンツがずれて3Dを実際に際立たせます。

the ロゴデザイン 透明なPNGとしてレンダリングされています（それを安全に保つ クラウドストレージ そのため、これはあなた自身の設計に簡単にカスタマイズできます。色が軌道の周りに軌道を出し、シーン内の異なる波を強調するようにライトをアニメートします。

ファイルをダウンロードしてください このチュートリアルのために。

01.初期変数を追加します

プロジェクトファイルから開始フォルダを開き、これをコードエディタにドラッグします。開いた ' index.html 'そして、JavaScriptライブラリがすでにあなたにリンクされていることがわかります。空のスクリプトタグの中には、コードが行く場所です。ここでは、プロジェクトを実行できることを確認するためにWebGLが検出され、シーンで使用される全範囲の変数が追加されます。 

（！Detector.Webgl）Detector.AddgetWebGlmessage（）;
var screen_width = window.innerwidth;
var screen_height = window.innerHeight;
VARレンダラー、カメラ、シーン、ムーバーグループ、フロアメジャー、フロリマテリアル、Pointlight、PointLight2、Pgeometry。
var floor_res = 60;
var floor_ht = 650。
var stepcount = 0;
var noisescale = 9.5;
Var NoiseSeed = Math.random（）* 100;

02.より多くの変数を作成します

次の変数ブロックは、ウォーターフロアの大きさとそれが最初のマウス位置と共に移動する速度をハンドルします。画面の中心が取り除かれ、改良されたノイズライブラリが水の表面を作り出すために使用されています。 

 var floor_width = 3600。
var floor_depth = 4800;
var move_spd = 1.9。
var mousex = 0;
var mousey = 0;
var windowhalfx = window.innerwidth / 2;
var windowhalfy = window.innerHeight / 2;
var snoise =新しい改善されたinoise（）;
var textureloader = new three.textureloader（）;

03.マウスを計算します

シーンの後処理効果のためにいくつかの最終変数が追加されています。マウスの動きをチェックするイベントリスナーが追加されます。シーンはディスプレイポート内で移動してマウスの動きに反応します。ここに追加された関数は、移動する移動量を作動させます。

04.後処理設定を変更します

the パラメータ '関数は、後処理効果のすべての設定が格納される場所です。何も変更する必要がある場合は、これが行う場所です。チルトシフトブラーは最初の4行で覆われているので、フィルムは残りのラインを通過します。これは主に画面強度と雑音強度のためのものです。

05.最終的なパラメータを設定します

最後のパラメータは、画面の端の周りの暗いビネットの場合です。 the 初期化 'そして'と ' anim anim '関数は実行されるように呼び出されます。 the anim anim '関数はチュートリアルではるかに後で作成されますが、 初期化 '関数はここで作成されます。カメラとシーンは、3Dコンテンツの閲覧を可能にするために設定されています。 

 EffectVignette.uniforms ["offset"]。値= 1.0;
  EffectVignette.uniforms ["闇"].value = 1.3。
}
初期化（）;
animate（）;
関数init（）{
  camera = new 3.perspeceCamera（70、window.innerwidth / window.innerHeight、1,4000）;
  camera.position.z = 2750。
  scene = new three.scene（）;
  SCENE.FOG = NEW Three.Fogexp2（0x1C3C4A、0.00045）;

06.ライトの光をさせます

シーンの内容を見るために、4つのライトが配置されます。 1つ目は半球灯です。これは、シーンの基本的な雰囲気を手に入れるためだけに使われます。次はシーンの真ん中に明るい青い光を追加している中心の光です。シーン全体にいくつかの光を与えるために、これは片側に設定されます。 

 var Hemispherelight = New Three.Hemispherelight（0xe3feff、0xe6ddc8,0.7）。
SCENE.ADD（半球集光）;
Hemispherelight.y = 300;
var centerlight = new 3.spotlight（0xb7f9ff、1）;
SCENE.ADD（CenterLight）;
CenterLight.Position.Set（2500,300,2000）。
CenterLight.penumbra = 1;
centerlight.decay = 5;

07.アニメートライト

追加される次の2つのライト。 ' Pointlight. 'そして'と ' PointLight2 '光が絶えず見て変わるように、シーンの周りの反対方向に円が丸で丸である色の光です。 1つ目はピンク色の光で、2番目のものはオレンジ色の光です。反射画像のパスとフォーマットは最後の2行に設定されます。 

 PointLight = New Three.PointLight（0xe07bff、1.5）;
Pointlight.zz = 200;
scene.add（Pointlight）;
PointLight2 = New Three.PointLight（0xFF4E00,1.2）;
PointLight2.position.z = 200;
scene.add（PointLight2）;
var path = "img /";
var format = '.jpg';

08.光沢のある表面

液体表面には反射性、光沢のある表面があり、これは反射立方体を作り出すことによって行われます。これは360度のスカイボックスがあるキューブであり、それは液体の表面に反射されます。 the URL ''アレイには、ロードされる画像が含まれているので、素材が設定されます。

09.いくつかのグループを設定します

ムーバーグループには、後で追加される粒子が含まれ、フロアグループは液体の表面を含むであろう。その表面を保持する新しい3Dオブジェクトが作成されます。 2つの液面があるでしょう。反射材料と2番目にワイヤフレームがあります フロボリ材料 'ここで定義されているように。 

 movergroup = new 3.Object3D（）;
scene.add（movergroup）;
var floorgroup = new 3.Object3D（）;
var floorymaterial = New Three.MeshphongMaterial（{
カラー：0xeeeeee、side：3.DOUBLEDED、ブレンド：3.Addiviventブレンド、ワイヤフレーム：TRUE
}）;）
FloorGeometry = New Three.planeGeometry（Floor_Width + 1200、Floor_Depth、Floor_Res、Floor_Res）;

表面を作ります

Create liquid effects: make the surface

最初の液面が追加されているとき、これは非常に明白であり、霧は背景と表面を一緒に混ぜるのを助けます

2つの液面はこちらとして作られています フロリーメッシュ 'そして'と ' Floormesh2 '。彼らは配置されている フロアグループ その後、カメラの前で良い視野角に回転します。これは直接平らではありませんが、そのようによく見えるほど少し傾斜しています。 

 var floormesh = New Shree.Mesh（FloorGeometry、CubeMaterial）;
var floormesh2 =新しい3.mesh（FloorGeometry、FloorMaterial）;
floormesh2.position.y = 20;
floormesh2.position.z = 5;
FloorGroup.Add（フロリーメッシュ）;
FloorGroup.Add（Floormesh2）;
SCENE.ADD（フロアグループ）;
floormesh.rotation.x = Math.pi / 1.65;
floormesh2.rotation.x = Math.pi / 1.65;
FloorGroup.y = 180;

11.フローティングパーティクルを追加します

Create liquid effects: add floating particles

フローティングパーティクルはシーンを記入し、これのすべてがレンダリング関数でアニメーション化されているとき、それはカメラに向かって移動感をもたらします

ここでのコードのセクションは、空のジオメトリオブジェクトを作成してから、パーティクルとして機能する2,000個の頂点に配置されます。これらは、X、Y、Z軸上のランダムな位置に分散されています。これらは液体の床の表面の真上に浮かぶでしょう。 

 Pgeometry = New Three.Geometry（）;
sprite = textureloader.load（ "img / sprite.png"）;
（i = 0; i = 0; i ++）{
  var vertex = new three.vector3（）;
  vertex.x = 4000 * math.random（） -  2000。
  vertex.y = -200 + math.random（）* 700;
  vertex.z = 5000 * Math.random（） -  2000。
  PGEOMETRY.VERTICES.PUSH（頂点）;

12.ルックを作成します

ここで定義されている材料は、粒子の外観を設定します。画像が前のステップでロードされ、それは材料が作成されると、各粒子上の画像として使用された。次に、これは全ての粒子についてジオメトリの各点に適用される。その後、これらはシーンに追加されます。

13.ロゴを追加します

Create liquid effects: add the logo

透明なPNGイメージであるロゴを追加し、これをシーンの中央に置き、後で自分のロゴと交換するのが簡単です。

ロゴが画面の中央に配置され、これはカメラに直面する平面上に追加されます。ロゴはわずかに透明になり、軽いオブジェクトが後ろに通過するときにより見えるように加法的なブレンドを与えられます。これは配置され、シーンに配置されます。 

 Sprite = TextureLoader.load（ "img / logo.png"）;
geometry = new 3.planeBufferGeometry（500,640,1）。
材料=新しい3.meshlambertMaterial（{
  透明：TRUE、不透明度：0.8、ブレンディング：3.Addiviventブレンド、マップ：スプライト、サイド：3.Doubleside
}）;）
VAR PLANE = NEW Three.Mesh（ジオメトリ、素材）。
Plane.Position.Set（0,70,1800）。
SCENE.ADD（飛行機）

14.レンダリング設定を追加します

レンダラはスムーズでアンチエイリアスエッジを持つように設定されており、今度は背景色が設定されています。これは、シーンがHTMLページ上にあるように文書の本文に追加されます。 POST処理の効果は、さまざまなレンダリングとシェーダが初期化されていることによって設定されます。

15.パスを作る

フィルムとグリッチパスが追加されると、パスのすべてのパスを合成する効果作曲家が作成されます。これらは1つずつ作曲家に追加され、最終的にはオーディエンスディスプレイの画面にレンダリングされます。

16.「INIT」機能を閉じる

シーンの初期化のために最後のいくつかの設定が追加されます。 POST処理のパラメータが設定され、波の設定が呼び出され、ブラウザのサイズが変更されるたびにイベントリスナーが追加されます。これにより、ディスプレイを新しい寸法に合わせて更新することができます。

17.波を設定します

波の表面については、波が現われるようになる。これは、X軸とZ軸上の床形状の各頂点を通過し、y軸上で上方に移動することによって行われます。この段階で ' ために 'ループはx軸とz軸に対して作成されます。 

関数setwaves（）{
  StepCount ++
  movergroup.position.z = -move_spd;
  var i、ipos;
  var offset = stepcount * move_spd / floor_depth * floor_res;
  （i = 0; i <0; i = 0; i + 1; i ++）{
  （var j = 0; j hares + 1; j ++）の場合
  IPOS = I +オフセット;

18.波を作る

すべての頂点が同じように上に拡大されるわけではありません。カメラから最も離れたものは大きくなり、その後側面はわずかに少ないでしょう、そしてカメラに最も近いそれらの最も近いものは控えめに拡大されます。これにより、背面と側面が見てわずかに興味深いものになります。 

（（i＆gt; 30）||（j＆lt; 12）||（j＆gt; 48）{
  FloorGeometry.Vertices [I *（Floor_Res + 1）+ J] .z = Snoise.Noise（IPO / FLOORES * NoiseScale、J / Floor_Res * NoiseScale、NoiseSeared）* floor_ht;
  そうでなければ（i＆gt; 25＆amp;＆amp; i＆; i <30）{
  FOREEGEOMETY.VERISES [I *（FLOON_RES + 1）+ J] .z = Snoise.Noise（IPO / FLOORES * NOISESCALE、J / FLOOR_RES * NOISESCALE、NOISESCALED）*（FLOOHE_HT / 1.2）。
  } そうしないと {
  FOOREGEOMETY.VERSERESTICES [I *（FLOONE_RES + 1）+ J] .Z = Snoise.Noise（IPO / FLOORES * NOISESCALE、J / FLOORES * NOISESCALE、NOISESCALED）*（FLOOR_HT / 2）;
  }
  }
  }
  FloorGeometry.VerticesNeedUpdate = true;

19.サイズ変更とアニメート

ウィンドウのサイズが変更されると、ここでの関数はステップ16で設定されたリスナーから呼び出されます。カメラ、レンダラ、および作曲家はすべてブラウザの新しい寸法と一致するようにここでリセットされます。 Animate関数は60fpsで自分自身を設定し、レンダリング関数を呼び出してディスプレイを更新します。 

関数onWindowResize（）{
  camera.aspect = window.innerwidth / window.innerHeight;
  camera.updateProjectionMatrix（）;
  renderer.setsize（window.innerwidth、window.innerHeight）;
  composer.setsize（window.innerwidth、window.innerHeight）;
}
関数animate（）{
  requestAnimationFrame（アニメーション）;
  レンダリング（）;

20.すべてのアクションフレームを設定します

レンダリング関数はすべてのフレームと呼ばれます。ポイントライトはシーン内で軌道に設定され、カメラはマウスの動きに従って、少し緩和され、それが徐々に位置に移動するようにします。カメラは常にシーンの中央を見るように設定されています。 

関数render（）{
  var timer = -0.0002 * date.now（）;
  Pointlight.x = 2400 * Math.cos（タイマー）;
  Pointlight.zz = 2400 * Math.Sin（タイマー）;
  PointLight2.Position.x = 1800 * Math.cos（-timer * 1.5）;
  PointLight2.Position.z = 1800 * Math.Sin（-timer * 1.5）;
  camera.position.x + =（MouseX  -  Camera.Position.x）* .05;
  camera.position.y + =（-mousey  -  camera.position.y）* .05;
camera.lookat（scene.position）

21.シーンをレンダリングします

Create liquid effect: render the scene

頻繁にPOST処理エフェクトの1つが、通常に戻る前に画面をライブアップして歪めるために画面上のグリッチ効果を実行します。

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com&nbsp;

Webデザイナーの受賞歴のある会議は、4月24日から25日にNYCに戻ります。チケットを予約する www.generateconf.com

最後のステップでは、パーティクルは個々の頂点上で前方に移動され、それらがカメラに着くと、それらは距離に戻ります。これが更新され、 ' セットウォーブ 波を転がすために関数が呼び出されます。シーンはエフェクト作曲家によってレンダリングされます。

この記事はもともとCreative Web Design Magazineで公開されました ウェブデザイナー 。 ここでWeb Designerを購読してください 。

関連記事：

  • 3.jsを使用してWebGLを使い始める
  • より良いロゴを作成するための11ステップ
  • 18 WebデザインYouTubeチャンネルを見る必要があります

操作方法 - 最も人気のある記事

Reactサイトとアプリをテストする方法

操作方法 Sep 11, 2025

（画像クレジット：未来） テストする方法を知りたい場合は、正しい場所にいます。�..

視点を描く方法

操作方法 Sep 11, 2025

展望を正しく描く方法を学ぶことはあなたの描画プロセス全体を変えることができました。伝統的に鉛筆と紙で描くか、またはグラフィック�..

Windows、Macos、およびAndroidのWeb通知をオフにする方法

操作方法 Sep 11, 2025

（画像クレジット：未来） あなたが通常のWebユーザーであれば、あなたが定期的に訪�..

WebGL 3Dランディングページを作成する

操作方法 Sep 11, 2025

（画像クレジット：未来） WebGL 3Dランディングページを作成することは、あなたの聴衆..

デジタルエッチングを作成する

操作方法 Sep 11, 2025

このチュートリアルでは、機械的な描画玩具を取り込みます。 （アトリーと命名された）キャ�..

ヴァンゴッホのような肖像画を描く

操作方法 Sep 11, 2025

オランダのポスト印象派の画家Vincent Van Gogh（1853-1890）は彼のキャリアに多くの自画像を作りま�..

あなたの芸術の品質デジタルコピーを作成する

操作方法 Sep 11, 2025

芸術は作成するだけではありません、それは共有についてもあります。あなたが誇りに思っている美しい仕事をしたら、他の人にも会うこと�..

様式化されたリアリズムでキャラクターを作成する

操作方法 Sep 11, 2025

フリッピング貨物 ロンドンのVFXの日々の仕事と一緒にサンデンとモーテンジェガーを�..

カテゴリ