ワンクリックで雨や雪のエフェクトを実現する ThingJS パーティクルエフェクト

ワンクリックで雨や雪のエフェクトを実現する ThingJS パーティクルエフェクト

ThingJS を使用すると、雨、雪(雨や雪のサイズを制御可能)、水しぶき、炎の効果などのパーティクル効果をすばやくプログラムできます。サードパーティのデータに接続することで(たとえば、天気インターフェースに接続することで)、3 次元シーンの効果をリアルタイムで制御することもできます。

1. パーティクルエフェクト

ThingJS は、パーティクル効果を実装するための ParticleSystem オブジェクト クラスを提供します。パーティクルエフェクトを自分で作るには、画像処理、コード作成、3Dレンダリングが必要です。これは非常に骨の折れる作業であり、多くの3Dアルゴリズムの知識とシェーダー言語を習得する必要があります。 ThingJS はパーティクル エフェクトの実装方法をカプセル化し、コード量と開発投資を削減し、3D 開発初心者の間で人気が高まっています。クエリ API インターフェイスを直接使用して、シーンに炎のエフェクトを追加できます。

ThingJS には、直接呼び出すことができるパーティクル エフェクトがいくつか組み込まれています。[オンライン開発] をクリックし、コード ブロックを選択して呼び出すことができます。

2. シーンを読み込む

CampusBuilder (ModelBuilder とも呼ばれます) がシーンの構築を完了したら、二次開発のために ThingJS に URL を直接読み込みます。

// シーンコードをロード var app = new THING.App({
 url: 'https://www.thingjs.com/static/models/storehouse' // シーンアドレス});

3. さまざまな粒子効果の実現

火の効果

コードは次のとおりです。

/**
 * 炎の効果を実現するためのパーティクルを作成する */
関数createFire() {
 すべてリセット();
 // パーティクルを作成する var particles = app.create({
 id: 'fire01',
 タイプ: 'ParticleSystem'、
 名前: '火'、
 親: app.query('car01')[0],
 URL: 'https://model.3dmomoda.com/models/19061018snbajhvuzrheq9sbgwdoefuk/0/particles',
 localPosition: [0, 0, 0] // 親オブジェクトに対するパーティクルの位置を設定します });
}

雪の効果

コードは次のとおりです。

/**
 * 雪が降る効果を実現するパーティクルを作成する*/
関数createSnow() {
 すべてリセット();
 // 雪の効果を作成する var particlesSnow = app.create({
 タイプ: 'ParticleSystem'、
 id: 'No1234567',
 名前: 「スノー」
 URL: 'https://model.3dmomoda.com/models/18112014q3t8aunaabahzxbxcochavap/0/particles',
 位置: [0, 50, 0]
 });
}

水しぶき効果

コードは次のとおりです。

/**
 * 水しぶき効果を実現するパーティクルを作成する */
関数createWater() {
 すべてリセット();
 // 水しぶき効果を作成する var particles = app.create({
 id: 'water01',
 タイプ: 'ParticleSystem'、
 名前: 「水」
 URL: 'https://model.3dmomoda.com/models/19081611ewlkh7xqy71uzixefob8uq1x/0/particles',
 位置: [0, 0, 5]
 });
}

降雨効果

コードは次のとおりです。

/**
 * 降雨効果を実現するパーティクルを作成する */
関数createByParticle() {
 すべてリセット();
 // パーティクルを作成する var particles = app.create({
 タイプ: 'ParticleSystem'、
 名前: 「レイン」
 URL: 'https://model.3dmomoda.com/models/18112113d4jcj4xcoyxecxehf3zodmvp/0/particles',
 位置: [0, 300, 0],
 完了: 関数 (ev) {
 ev.object.scale = [10, 10, 10];
 }
 });
 // 最大粒子密度を設定します。particle.setGroupAttribute('maxParticleCount', 1000);
 // 最小粒子密度を設定します。particle.setParticleAttribute('particleCount', 500);
 
}

雨や雪の天候はパーティクルイメージレンダリングによって実現されます。パーティクル数の最大密度と最小密度を制御して、降雨量と降雪量を実現できます。

クリアなパーティクルエフェクト

function resetAll() { // 現在作成されているパーティクルを取得します var particles = app.query('.ParticleSystem'); // 現在作成されているパーティクルがあるかどうかを判断します if (particle) { // ある場合は、作成されたパーティクルを削除します particles.destroy(); } }

エンディング:

ThingJS は、モノのインターネット向けの 3D 視覚化開発プラットフォームです。強力なモノのインターネット開発ロジックを備えています。ThingJS は、視覚化アプリケーション向けのシンプルで豊富な機能を提供します。始めるには、基本的な JavaScript 開発経験のみが必要です。プラットフォーム API にアクセスすることで、ユーザーは 3D 視覚化インターフェース、シーン構築 - オンライン開発 - データ ドッキング - プロジェクトの展開を簡単に統合でき、開発の効率が向上します。

上記は、ワンクリックで雨や雪のエフェクトを実現する ThingJS パーティクルエフェクトの詳細な内容です。雨や雪のエフェクトを実現する ThingJS の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • js キャンバスはランダムなパーティクル効果を実現します
  • jsは三角形の粒子の動きを実現します
  • js は 3D パーティクルのクールな動的回転効果を実現します
  • JavaScriptアニメーション例におけるパーティクルテキストの実装方法の詳細説明
  • JSは粒子回避ゲームを実装します
  • JavaScript Canvas 動的パーティクル接続
  • JavaScript でマウスの動きに追従するパーティクル効果を実装する
  • three.js に基づく 3D パーティクル アニメーションのサンプル コード
  • ネイティブJS+HTML5でマウスに合わせて流れるパーティクルアニメーション効果を実現
  • 3DエンジンthreeJSを使用して星の粒子の動きの効果を実現

<<:  MySQL 5.7 の同時レプリケーションにおける暗黙のバグの分析

>>:  CenterOS7 インストールおよび構成環境 jdk1.8 チュートリアル

推薦する

MySQL 5.7.17 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.17のインストールと設定方法を参考までに紹介します。具体的な内容は...

IE8を閲覧するときにウェブサイトが自動的にIE7互換モードを使用するようにする

序文IE の将来のすべてのバージョンで Web ページの外観が一貫していることを保証するために、IE...

WeChatアプレット開発の実践スキル:データの転送と保存

日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...

CentOS7にNginxをインストールして自動起動を設定する方法

1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...

jQueryチェーン呼び出しの詳細な説明

目次チェーン呼び出し小さなケースチェーン呼び出しjQuery オブジェクトが任意のメソッド (ノード...

vite+vue3+element-plus プロジェクトをビルドする手順

viteを使用してvue3プロジェクトを構築するターミナルで次のコマンドを実行すると、Vite を使...

Linux での MySQL 8.0.25 のインストールと設定のチュートリアル

LinuxにMySQL 8.0.25をインストールするための最新のチュートリアルを参考にしてください...

jQuery+h5 で 9 マス抽選特殊効果を実現 (フロントエンドとバックエンドのコード)

序文:フロントエンド: jq+h5 で 9 グリッドのダイナミック効果を実現バックエンド: thin...

Linux での Redis の永続性、マスター スレーブ同期、Sentinel の詳細な説明

1.0 Redis の永続性Redis はメモリ内データベースです。サーバー プロセスが終了すると、...

VSCode の JS フォーマットでセミコロンを自動的に追加または削除する方法について

導入js コード文の末尾にセミコロンを追加しても追加しなくても問題ありません。一般的に、チームで開発...

コンパイル/サーバーなしでブラウザにCommonJSモジュールを実装する

目次導入1. one-click.jsとは2. パッケージングツールはどのように機能しますか? 3....

MySQL はどのようにしてデータベースの削除と暴走を効果的に防ぐことができますか?

目次セーフモード設定テスト1. where句なしで更新および削除する2. 非インデックスキーの削除3...

JavaScript 即時実行関数の使用状況分析

一般的に、関数は実行する前に呼び出す必要があることはご存じのとおりです。以下に示すように、関数を定義...

MySQL 8.0.21 の最新バージョンのダウンロード、インストール、設定に関する詳細なチュートリアル

1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...

MySql 5.7.17 無料インストール構成チュートリアルの詳細な説明

1. mysql-5.7.17-winx64.zip インストール パッケージをダウンロードします ...