公式例（10）：雨の効果を実現するWeb開発3DパーティクルシステムThingJS

はじめに：気温の変化は水蒸気の状態の変化につながり、降雪、雨、雹などの奇妙な気象現象を引き起こします。人間の活動に影響を与えるだけでなく、IoT機器の管理、センサーの監視、安全操作を適宜調整する必要があります。。
事前に計画を立てるために、緊急事態や事故の影響を予測するなど、デジタルツインモデルとデジタルシミュレーションの2つの条件に基づいて、3Dツインシーンのシミュレーションプロセスを使用して、必要な危機解決策を完成させます。

デモアドレス：http：//www.thingjs.com/guide/？m = sample

＃フロントエンド＃3D開発＃IoT

シーンの読み込み
レインドロップタイマー
降雨効果

のデジタルツインシミュレーションのプロセスでは、インタラクティブな開発とデータ接続の基本的な機能として3Dシーンの視覚化が必要です。それでは、ThingJSプラットフォームに基づいて雨やその他の気象効果を開発し、3Dシーンをよりリアルにする方法を説明しましょう。

公式チュートリアルは、（1）読み込みシーン、（2）雨滴タイマー、（3）降雨効果の3つの部分に分かれています。

1.シーンをロードします

ThingJSは、0から1までの3Dシーンを開発する必要はありません。モデリングデザイナーは、CampusBuilder（モデル構築、3Dシーン構築ツールとも呼ばれます）を使用して、ドラッグアンドドロップでコードなしで3Dシーンの構築を完了します。フロントエンドの開発は、統合されたプラットフォームデータに基づいています。二次開発のためにメニューバーから直接URLをロードします。
ここに写真の説明を挿入

2.レインドロップタイマー

レインドロップタイマーを作成するには、setTimeoutとsetIntervalの構文は同じです。どちらも一定期間後に実行するために使用できます。どのように選択して判断しますか？
ここに写真の説明を挿入

同じ点

これらには2つのパラメータがあります。1つは実行されるコード文字列で、もう1つはミリ秒単位の時間間隔です。

差

これら2つの関数にはまだ違いがあります。setIntervalがコードを1回実行した後、その一定の時間間隔の後、自動的にコードが繰り返されますが、setTimeoutはコードを1回だけ実行します。

レインドロップタイマーは「間隔」を使用します。つまり、コードが1回実行された後、その一定の時間間隔の後、コードを1回だけ実行するのではなく、自動的にコードを繰り返して雨の効果を形成します。

3.雨の影響

雨滴を作成して描画する方法は2つあります。1つは粒子効果、もう1つはキャンバス効果です。

方法1：降雨効果を達成するために粒子を作成する

ThingJS APIの基盤となるパーティクルシステム「ParticleSystem」を直接呼び出します。フロントエンド開発では、パーティクルに名前を付け、シーン座標を設定し、パーティクルの密度パラメータ（最大および最小）を変更する必要があります。マウスの「オン」クリックイベントが発生した場合、「間隔」タイマーに従ってこのパーティクルコードを繰り返し実行し、大きな降雨効果を形成します。公式ウェブサイトを
ここに写真の説明を挿入
入力してください-公式例-粒子モジュールビューコード>>

// 创建粒子 var particle = app.create({ type: 'ParticleSystem', name: 'Rain', url: 'https://model.3dmomoda.com/models/18112113d4jcj4xcoyxecxehf3zodmvp/0/particles', position: [0, 300, 0], complete: function (ev) { ev.object.scale = [10, 10, 10]; } }); 

// 设置粒子最大密度 particle.setGroupAttribute('maxParticleCount', 10000); 

// 设置粒子最小密度 particle.setParticleAttribute('particleCount', 5000); }

方法2：降雨効果を実現するためのキャンバス図面を作成する

（1）キャンバスを作成する

HTMLインターフェイスでキャンバスを作成し、ThingJSの組み込みの2Dインターフェイスdivにキャンバスを追加して、現在のウィンドウの幅と高さを設定します。視界を統一するために、雨滴オブジェクト配列を取得して、雨滴の長さ、落下速度、偏向角などのパラメータをまとめて設定します。ここでは、雨滴タイマーを設定して、50ミリ秒ごとに雨滴を引く機能を呼び出します。

interval = setInterval（newDrop、50）; // 50ミリ秒ごとに雨滴を描画する関数を呼び出すように設定します
ここに写真の説明を挿入

（2）雨滴を引く

フロントエンドは、線の幅、線のスタイル、色、さらにはグラデーションの色を制御できます。グラデーションの色については、線の傾きと対応する色の変更に注意し、自然の光と影の効果を3Dシーンに取り入れます。これはより現実的です。最後に、雨滴の経路を描き、開始点と終了点を設定して、雨滴が離れないようにし、継続的な降雨効果を形成します。開発者でなくても、障壁がなくても理解できます。

終了：ThingJSには強力なIoT開発ロジックがあり、開発者はプラットフォームapi機能にアクセスして、IoTシナリオでの3Dインタラクティブアーキテクチャの構築を簡単に完了し、3Dプロジェクト開発を加速できます。

ThingJSについて

ThingJSは、Internet of Thingsの3D視覚化コンポーネントを提供して、3D開発を容易にします。200の3D開発ソースコード例に基づく直接Javascript呼び出し3Dスクリプトを使用すると、Internet ofThingsのビジュアル開発ロジックを完全に理解できます。シーン構築-3Dスクリプト開発-データドッキング-プロジェクト展開ワンストップサービスにより、開発がより効率的になり、20万人の開発者がいるデジタルツインテクノロジーイノベーターになります！