Official example (10): Web development 3D particle system to achieve rain effect ThingJS

Introduction: Changes in temperature will lead to changes in water vapor conditions, bringing about strange weather phenomena such as snowfall, rain, and hail. Not only human activities will be affected, but IoT equipment management, sensor monitoring and safety operations must be adjusted accordingly .
In order to prepare the plan in advance, the simulation process of the 3D twin scene is used, such as predicting the consequences of an emergency or accident, and based on the two conditions of the digital twin model and digital simulation, to complete the necessary crisis solution.

Demo address: http://www.thingjs.com/guide/?m=sample

#Frontend#3D Development#IoT

1. Load scene
2. Raindrop timer
3. 
   
   In the process of digital twin simulation of rainfall effects , 3D scene visualization is required as a basic facility for interactive development and data connection. Now let’s explain how to develop rain and other weather effects based on the ThingJS platform to make your 3D scene more realistic!

The official tutorial is divided into three parts: (1) loading scene; (2) raindrop timer; (3) rainfall effect.

1. Load the scene

ThingJS does not need to develop a 3D scene from 0 to 1. The modeling designer uses CampusBuilder (also known as model building, 3D scene building tool) to complete the 3D scene construction with zero code by dragging and dropping; the front-end development is based on unified platform data, Load url directly from the menu bar for secondary development.

2. Raindrop timer

To create a raindrop timer, the syntax of setTimeout and setInterval are the same. Both can be used to execute after a fixed period of time. How to choose and judge?

Same point

They have two parameters, one is the code string to be executed, and the other is the time interval in milliseconds, after that time period will be executed.

difference

There is still a difference between these two functions. After setInterval executes the code once, after that fixed time interval, it will automatically repeat the code, while setTimeout only executes the code once.

The raindrop timer uses "interval", which means that after the code is executed once, after that fixed time interval, it will automatically repeat the code to form a rain effect instead of executing the code only once.

3. Rain effect

Here are two ways to create and draw raindrops. The first is particle effect, and the second is canvas effect.

Method 1: Create particles to achieve rainfall effect

Directly call the underlying particle system "ParticleSystem" of the ThingJS API. Front-end development needs to name the particles, set the scene coordinates, and modify the density parameters (maximum and minimum) of the particles. When the mouse "on" click event occurs, run this particle code repeatedly according to the "interval" timer to form a large rainfall effect.

Enter the official website-official example-particle module view code >>

// 创建粒子 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); }

Method 2: Create canvas drawing to achieve rainfall effect

(1) Create a canvas

Create a canvas in the HTML interface, add the canvas to the built-in 2D interface div of ThingJS, and set the width and height of the current window. In order to unify the vision, by obtaining the raindrop object array, set the raindrop length, falling speed, deflection angle and other parameters as a whole; here the raindrop timer is set to call the function of drawing raindrops every 50 milliseconds.

interval = setInterval(newDrop, 50); // Set to call the function of drawing raindrops every 50 milliseconds

(2) Draw raindrops

The front end can control the line width, line style, color and even gradient color. For gradient colors, pay attention to modifying the slope of the line and the corresponding color, and take the light and shadow effects of nature into the 3D scene, which is more realistic. Finally, draw a raindrop path, set the starting point and the end point, so that the raindrops can not leave, forming a continuous rainfall effect, even non-developers understand it without any barriers!

End: ThingJS has a powerful IoT development logic, and developers can access platform api capabilities to easily complete the construction of 3D interactive architecture in IoT scenarios and accelerate 3D project development!

About ThingJS

ThingJS provides 3D visualization components of the Internet of Things to make 3D development easier! Direct Javascript call 3D script, based on 200 3D development source code examples, let you fully understand the visual development logic of the Internet of Things. Scene building-3D script development-data docking-project deployment one-stop service to make development more efficient, and become a digital twin technology innovator with 200,000 developers!