vue3+threejs を使用して iView 公式サイトのビッグウェーブ特殊効果の例を模倣する

vue3+threejs を使用して iView 公式サイトのビッグウェーブ特殊効果の例を模倣する

序文

Threejs は、Web ベースの 3D エンジン (レンダリング モデル、データ視覚化) として理解できます。Unreal Engine 4 などのゲーム エンジンを使用したことがある場合は、3D シーンに必要なすべてのコンポーネント (シーン、レンダラー、メッシュ モデル、マテリアル、光源、カラー カメラ) を簡単に理解できるはずです。さて、基本的な部分は飛ばして、実装プロセスに直接進みましょう。

1. レンダリング

まず、最終的な効果の画像です。

具体的な効果については、iview公式インターフェースiViewを参照してください。iViewは高品質のUIコンポーネントライブラリのセットです。

ビッグウェーブエフェクトは、three.js の公式サンプルを使用しています。まずは three.js サポートをインストールする必要があります。詳細については、公式サンプル three.js の例 (threejs.org) を参照してください。

2. コード

1. threejsをインストールする

npm インストール --save 3

2. コード (コピー可能) コンポーネント フォルダーに新しいコンポーネント waves.vue を作成し、次のコードをコピーして直接実行します。

<テンプレート>
  <div id="iviewBg"></div>
</テンプレート>

<スクリプト>
* を THREE として "three" からインポートします。
右上隅に fps ボックスを表示します // import Stats from "./stats.module";
"vue" から onMounted をインポートします。
エクスポートデフォルト{
  小道具: {
  	//X軸の波の長さを制御する amountX: {
      タイプ: 数値、
      デフォルト: 50、
    },
    //y軸の波の長さを制御する amountY: {
      タイプ: 数値、
      デフォルト: 50、
    },
    //制御点の色color: {
      タイプ: 文字列、
      デフォルト: "#097bdb",
    },
    //波頭の位置を制御する: {
      タイプ: 数値、
      デフォルト: 350、
    },
  },

  セットアップ(プロパティ) {
    定数分離 = 100;

    // 統計を取得します。
    コンテナ、カメラ、シーン、レンダラーを作成します。

    粒子を、
      カウント = 0;

    マウスXを0にします。

    windowHalfX = window.innerWidth / 2 とします。

    関数init() {
      コンテナ = document.createElement("div");
      document.getElementById("iviewBg").appendChild(コンテナー);

      //パースペクティブカメラを作成する camera = new THREE.PerspectiveCamera(
        75, //カメラコーンの垂直視野 window.innerWidth / window.innerHeight, //カメラコーンのアスペクト比 1, //カメラコーンの近辺 10000 //カメラコーンの遠辺);

      //カメラの Z 軸視野を設定します。camera.position.z = 1000;

      //シーンを作成 scene = new THREE.Scene();

      定数numParticles = props.amountX * props.amountY;

      const位置 = 新しいFloat32Array(numParticles * 3);
      const スケール = 新しい Float32Array(numParticles);

      i = 0 とすると、
        0 の場合

      // パーティクルの位置とサイズを初期化します for (let ix = 0; ix < props.amountX; ix++) {
        (iy = 0; iy < props.amountY; iy++) の場合 {
          位置[i] = ix * 間隔 - (props.amountX * 間隔) / 2; // x
          位置[i + 1] = 0; // y
          位置[i + 2] = iy * 間隔 - (props.amountY * 間隔) / 2; // z
          スケール[j] = 1;
          i += 3;
          j++;
        }
      }

      // はパッチ、ライン、またはポイント ジオメトリの有効な表現です。頂点位置、パッチ インデックス、法線、カラー値、UV 座標、カスタム キャッシュ属性値が含まれます。 BufferGeometry を使用すると、上記のデータを GPU に転送するために必要なオーバーヘッドを効果的に削減できます。const geometry = new THREE.BufferGeometry();
      ジオメトリ.setAttribute()
        "位置"、
        新しい THREE.BufferAttribute(位置、3)
      );
      geometry.setAttribute("scale", 新しい THREE.BufferAttribute(scales, 1));

      //ShaderMaterial、ボールのサイズ、色などを設定します。const material = new THREE.ShaderMaterial({
        制服:
          //ボールの色を設定します color: { value: new THREE.Color(props.color) },
        },
        //ボールのサイズを制御する vertexShader:
          "属性 float scale; void main() {vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );gl_PointSize = scale * ( 300.0 / - mvPosition.z );gl_Position = projectionMatrix * mvPosition;}",
        フラグメントシェーダー:
          "均一な vec3 色;void main() {if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) 破棄;gl_FragColor = vec4( color, 1.0 );}",
      });

      //ポイントを表示するためのクラス。
      パーティクル = 新しい THREE.Points(ジオメトリ、マテリアル);
      //シーンにポイントを追加します scene.add(particles);

      //alpha - キャンバスにアルファ(透明度)が含まれているかどうか。デフォルト値は false です。
      //レンダラーのデフォルトの背景色は黒です。レンダラーの背景色を透明に設定します。renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      レンダラーのピクセル比を設定します。
      レンダラー.setClearAlpha(0);
      レンダラーのサイズを設定します。
      コンテナに子要素を追加します。

      //右上隅の fps ボックスを表示します //stats = new Stats();
      // コンテナ.appendChild(stats.dom);

      container.style.touchAction = "なし";
      //マウス移動イベントをリッスンします。container.addEventListener("pointermove", onPointerMove);

      // 波の位置を調整します。container.style.position = "relative";
      container.style.top = `${props.top}px`;

      ウィンドウにイベントリスナーを追加します("サイズ変更", onWindowResize);
    }

    関数レンダリング() {
      カメラの位置x += (マウスX - カメラの位置x) * 0.05;
      カメラの位置y = 400;
      カメラの視点をシーンの位置に合わせて変更します。

      const 位置 = particles.geometry.attributes.position.array;
      定数スケール = particles.geometry.attributes.scale.array;

      // 粒子の位置とサイズを設定する let i = 0,
        0 の場合
      (ix = 0 とします; ix < props.amountX; ix++) {
        (iy = 0; iy < props.amountY; iy++) の場合 {
          位置[i + 1] =
            Math.sin((ix + count) * 0.3) * 50 +
            Math.sin((iy + カウント) * 0.5) * 50;

          スケール[j] =
            (Math.sin((ix + count) * 0.3) + 1) * 10 +
            (Math.sin((iy + count) * 0.5) + 1) * 10;

          i += 3;
          j++;
        }
      }

      particles.geometry.attributes.position.needsUpdate = true;
      particles.geometry.attributes.scale.needsUpdate = true;

      レンダラー.レンダリング(シーン、カメラ);

      カウント += 0.1;
    }

    関数onWindowResize() {
      ウィンドウの半分の幅 = window.innerWidth / 2;
      カメラのアスペクト比は window.innerWidth または window.innerHeight です。
      カメラの投影マトリックスを更新します。
      レンダラーのサイズを設定します。
    }

    //マウス移動イベントをリッスンする function onPointerMove(event) {
      console.log(イベント);
      event.isPrimary === false の場合、戻り値:
      マウスX = イベント.クライアントX - ウィンドウの半分X;
    }

    関数アニメーション() {
      アニメーションフレームをリクエストします(アニメーション化します);
      与える();
      //fps リアルタイム更新// stats.update();
    }

    マウント時(() => {
      初期化();
      アニメーション化();
    });
    戻る {};
  },
};
</スクリプト>

<style lang="scss" スコープ>
#iviewBg {
  幅: 100%;
  高さ:100vh;
  背景: url("../assets/wavesBg.png") 繰り返しなし;
  オーバーフロー: 非表示;
}
</スタイル>

3. 使用

ログインページにコンポーネントを直接導入する

<テンプレート>
  <wavesBg :top="250"></wavesBg>
  
  <div class="ログインコンテナ">
  </div>
</テンプレート>

<スクリプト>
「../components/wavesBg」からwavesBgをインポートします。
エクスポートデフォルト{
  名前: ""、
  コンポーネント:
    波Bg、
  },
  設定() {
    
    戻る {
     
    };
  },
};
</スクリプト>

3. 背景画像素材

明確でない場合は、公式インターフェースf12にアクセスして取得できます。iView-高品質のUIコンポーネントライブラリのセット

下の図に示すように

要約する

これで、vue3 + threejs を使用して iView 公式サイトのビッグウェーブ特殊効果を模倣する方法に関するこの記事は終了です。vue3 + threejs によるビッグウェーブ特殊効果の模倣に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueページでは3Dアニメーションシーン操作を実現するthree.jsを紹介
  • three.js を使用して Vue でパノラマを実現する完全な例

<<:  MySQL初心者はグループ化や集計クエリの煩わしさから解放されます

>>:  自動ウェブページ更新と自動ジャンプのサンプルコード

推薦する

nodejsとyarnをインストールし、Taobaoソースプロセスレコードを構成する

目次1. nodejsをダウンロードする2. ダブルクリックしてインストール3. グローバル npm...

Vueはシンプルなコメント機能を実装します

この記事では、Vueの簡単なコメント機能を実装するための具体的なコードを参考までに共有します。具体的...

LinuxスレッドのPID(TID、LWP)を取得するいくつかの方法の詳細な説明

Linux C/C++ では、スレッド レベルの操作は通常、pthread ライブラリを通じて実行さ...

MySQLの文字タイプは大文字と小文字を区別します

デフォルトでは、MySQLの文字タイプは大文字と小文字を区別しません。つまり、name='A...

jQueryはフォントサイズ調整ケースを実装します

この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体...

サブクエリ最適化における MySQL 選択の実装

以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...

Sqoop エクスポート マップ 100% 削減 0% さまざまな理由と解決策でスタック

私はこのようなバグを典型的な「ハムレット」バグと呼んでいます。これは、「エラーメッセージは同じだが、...

CSS3 を使用して円形スクロール プログレス バー アニメーションを作成する例

テーマ今日は、CSS3 を使用して円形スクロール プログレス バー アニメーションを作成する方法を説...

Docker を使用して開発環境を構築する方法 (Windows および Mac)

目次1. Dockerを使用する利点2. Dockerをインストールする1) LinuxにDocke...

Ubuntu 16.04 カーネルのアップグレード手順

1. 環境仮想マシン上で実行されているUbuntu 16.04では、コマンドuname -rを使用し...

JS はランダム点呼システムを実装します

参考までに、JSを使用してランダム点呼システムを実装します。具体的な内容は次のとおりです。毎回の授業...

ab ツールを使用してサーバー上で API ストレス テストを実行します。

目次1 システムスループットの簡単な紹介2 試験方法2.1 クライアントテストツール2.1.1 GE...

HTML+CSS+JS でキャンバスがマウスの小さな円に追従する特殊効果のソースコードを実現

効果(ソースコードは最後にあります): 成し遂げる: 1. タグを定義します。 <h1>...

誤って削除されたデータを復元するための mysqlbinlog コマンドを使用した mysql の実装

実験環境: MYSQL 5.7.22バイナリログを有効にするログ形式 MIXED実験プロセス: 1....

ファイアウォールルールの設定とコマンド(ホワイトリスト設定)の詳しい説明

1. ファイアウォールルールを設定する例1: ポート8080を外部に公開する ファイアウォールコマン...