1. Particle effects

2. Loading scenarios

3, different particle effect realization

When we do 3D projects, we often have to simulate rain, snow, and sometimes fountains and fires. These effects require the use of a technique called particle systems. Using ThingJS, you can quickly write particle effects such as rain, snow, water and fire, and even control 3d scenes in real time using data from third parties (such as the weather interface).

1. Particle effects

ThingJS provides the ParticleSystem object class to implement particle effects. Creating your own particle effects requires image processing, coding, and 3D rendering, which is a very difficult task and requires a lot of knowledge of 3D algorithms, as well as the shader language. ThingJS encapsulates the particle effect implementation method, which reduces the amount of code and development cost, and is more popular among 3D developers. It directly uses the Query API to add flame effects to the scene.

ThingJS has some built-in particle effects that can be invoked directly by clicking on a code block from online development.

2. Loading scenarios

Once the CampusBuilder is complete, the url is loaded directly into ThingJS for secondary development.

/ var/loading scenarios code app = new THING. The app ({url: "https://www.thingjs.com/static/models/storehouse" / / scene address});Copy the code

3. Special effects of different particles

  • Flame effect

The code is as follows:

*/ function createFire() {resetAll(); Var particle = app.create({id: 'fire01', type: 'ParticleSystem', name: 'Fire', parent: app.query('car01')[0], url: 'https://model.3dmomoda.com/models/19061018snbajhvuzrheq9sbgwdoefuk/0/particles', localPosition: [0, 0, 0] // Sets particle position relative to parent object}); }Copy the code
  • Snow effect

The code is as follows:

*/ function createSnow() {resetAll(); Var particleSnow = app.create({type: 'ParticleSystem', id: 'No1234567', name: 'Snow', url: 'https://model.3dmomoda.com/models/18112014q3t8aunaabahzxbxcochavap/0/particles', position: [0, 50, 0] }); }Copy the code
  • Effect of water

The code is as follows:

*/ function createWater() {resetAll(); Var particle = app.create({id: 'water01', type: 'ParticleSystem', name: 'Water', url: 'https://model.3dmomoda.com/models/19081611ewlkh7xqy71uzixefob8uq1x/0/particles', position: [0, 0, 5] }); }Copy the code
  • Effect of rainfall

The code is as follows:

Function createByParticle() {resetAll(); / / function createByParticle() {resetAll(); 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]; }}); / / set the particle density particle. The biggest setGroupAttribute (' maxParticleCount, 1000); / / set the minimum particle density particle. SetParticleAttribute (' particleCount, 500); }Copy the code

Rain and snow weather is realized through particle image rendering. We can realize the size of rain and snow by controlling the maximum density and minimum density of particle number.

  • Particle removal effect

    Var particle = app.query(‘.particlesystem ‘); function resetAll() {var particle = app.query(‘.particlesystem ‘); // If (particle) {// If (particle) {// If (particle) {// }}

The end:

ThingJS ‘3D Visualization platform for the Internet of Things has a powerful iot development logic. ThingJS provides simple and rich functionality for visualization applications that require basic Javascript development experience. Users can easily integrate 3D visual interface through access platform API, scene building – online development – data docking – project deployment, making development more efficient!