ThingJS particle effects to achieve rain and snow effects with one click

ThingJS can be used to quickly program particle effects, such as rain, snow (the size of rain and snow can be controlled), water spray, flame effects, etc. You can even control the effects of three-dimensional scenes in real time by connecting to third-party data (for example, connecting to the weather interface).

1. Particle Effects

ThingJS provides the ParticleSystem object class to implement particle effects. Making particle effects by yourself requires image processing, code writing, and 3D rendering. It is a very arduous task and requires mastering a lot of 3D algorithm knowledge and shader language. ThingJS encapsulates the implementation method of particle effects, reducing the amount of code and development investment, and is more popular among 3D development beginners. You can directly use the query API interface to add flame effects to the scene.

ThingJS has some built-in particle effects that can be called directly. You can click Online Development and select the code block to call it.

2. Load the scene

After CampusBuilder (also known as ModelBuilder) completes the scene building, directly load the URL in ThingJS for secondary development.

// Load scene code var app = new THING.App({
 url: 'https://www.thingjs.com/static/models/storehouse' // scene address});

3. Realization of different particle effects

Fire Effect

The code is as follows:

/**
 * Create particles to achieve the flame effect */
function createFire() {
 resetAll();
 // Create a particle 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] // Set the particle's position relative to the parent object });
}

Snow effect

The code is as follows:

/**
 * Create particles to achieve the effect of falling snow*/
function createSnow() {
 resetAll();
 // Create snow effect var particleSnow = app.create({
 type: 'ParticleSystem',
 id: 'No1234567',
 name: 'Snow',
 url: 'https://model.3dmomoda.com/models/18112014q3t8aunaabahzxbxcochavap/0/particles',
 position: [0, 50, 0]
 });
}

Water spray effect

The code is as follows:

/**
 * Create particles to achieve water spray effect */
function createWater() {
 resetAll();
 // Create a water spray effect var particle = app.create({
 id: 'water01',
 type: 'ParticleSystem',
 name: 'Water',
 url: 'https://model.3dmomoda.com/models/19081611ewlkh7xqy71uzixefob8uq1x/0/particles',
 position: [0, 0, 5]
 });
}

Rainfall Effect

The code is as follows:

/**
 * Create particles to achieve rainfall effect */
function createByParticle() {
 resetAll();
 // Create a particle 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 maximum particle density particle.setGroupAttribute('maxParticleCount', 1000);
 // Set the minimum particle density particle.setParticleAttribute('particleCount', 500);
 
}

Rainy and snowy weather is achieved through particle image rendering. We can control the maximum and minimum density of the number of particles to achieve the amount of rainfall and snowfall.

Clear particle effects

function resetAll() { // Get the currently created particles var particle = app.query('.ParticleSystem'); // Determine whether there are currently created particles if (particle) { // If there are, delete the created particles particle.destroy(); } }

Ending:

ThingJS is a 3D visualization development platform for the Internet of Things. It has powerful Internet of Things development logic. ThingJS provides simple and rich functions for visualization applications. You only need basic Javascript development experience to get started. By accessing the platform API, users can easily integrate 3D visualization interface, scene construction - online development - data docking - project deployment, making development more efficient!

The above is the detailed content of ThingJS particle effects to achieve rain and snow effects with one click. For more information about ThingJS to achieve rain and snow effects, please pay attention to other related articles on 123WORDPRESS.COM!