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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7 の同時レプリケーションにおける暗黙のバグの分析
>>: CenterOS7 インストールおよび構成環境 jdk1.8 チュートリアル
1. MySQL独自のストレステストツールMysqlslap mysqlslap は、mysql に...
1. nginxソースディレクトリに新しいrtmpディレクトリを作成し、git clone http...
目次1. システム監視2. ファイル操作3. ネットワーク通信4. システム管理仕事で必要なLinu...
MySQLデータベースの保存場所: 1. MySQLがMyISAMストレージエンジンを使用する場合...
昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...
この記事では、USB ブート ディスクの作成とシステムのインストールについて説明します。システム構成...
インデックスのマージは、MySQL が最下層で提供するインテリジェントなアルゴリズムです。インデック...
目次ナンセンス実装された機能文章要点ナンセンスデモプレビュー実装された機能デフォルトでホームページが...
Linuxシステムでは、dockerを新しくインストールし、次のようなコマンドを入力します。dock...
この記事の例では、チャットインターフェースの表示を実現するためのVueの具体的なコードを参考までに共...
目次アプリケーションシナリオアイデアプロジェクト構造全体的なプロジェクト構造webpack パッケー...
目次識別子の長さ制限権限テーブルの範囲フィールドの長さ制限データベースとテーブルの数の制限テーブルサ...
これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...
<br />多くの中小企業ではこの問題は発生しません。中小企業はデザイナーをサポートし、...
最近、リンク データについていくつか調査していて、rdf データベースを使用する必要があったため、v...