一键ThingJS粒子特效实现雨雪效果

1。粒子效果

2。场景

3。实现不同的粒子效果

在做3D项目时，我们经常需要模拟雨、雪，有时还需要模拟喷泉、火焰等效果。这些效果必须使用称为粒子系统（Particle）的技术来实现。使用ThingJS快速编写粒子效果如：下雨、下雪（可以控制雨雪的大小）、喷水、火焰效果等，甚至可以通过第三方数据实时控制3D场景的效果（如：对接天气接口）。

1。粒子效果

ThingJS 提供了 ParticleSystem 对象类来实现粒子效果。创建您自己的粒子效果需要图像处理、代码编写和 3D 渲染。这是一项非常艰巨的任务。它需要大量的 3D 算法和着色器语言知识。 ThingJS融合了粒子特效的实现方式，减少了代码量和开发投入，更受3D开发者的欢迎。它直接使用查询来查询API接口，并为场景添加火焰效果。

ThingJS内置的一些粒子特效可以直接调用，你可以点击在线开发选择你要调用的代码块。

2、 加载场景

CampusBuilder（又名 Momota）构建场景并将 URL 直接加载到 ThingJS 中进行二次开发。

// 加载场景代码 
var app = new THING.App({
 url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址
});
 

3。各种粒子效果的实现

• 火焰效果

代码如下：

/**
 * 通过创建粒子实现火焰效果
 */
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] // 设置粒子相对于父物体的位置
 });
}
 

• 雪效果

代码如下：

/**
 * 通过创建粒子实现飘雪效果
 */
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]
 });
}
 

• 喷水效果

代码如下：

/**
 * 通过创建粒子实现喷水效果
 */
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]
 });
}
 

• 下雨效果

代码如下：

/**
 * 通过创建粒子实现降雨效果
 */
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];
 }
 });
 // 设置粒子最大密度
 particle.setGroupAttribute('maxParticleCount', 1000);
 // 设置粒子最小密度
 particle.setParticleAttribute('particleCount', 500);
 
}
 

通过粒子图像渲染实现雨雪天气。我们可以通过控制粒子数量的最大密度和最小密度来实现降雨量和降雪量。

• 明亮粒子效果

  function resetAll() {
  // 获取当前创建的粒子
  var keywords = app.query('.ParticleSystem');
  //判断当前是否有正在创建的粒子
  if (article) {
  //存在，则删除已创建的粒子
  article.destroy();
  }
  }

结局：

ThingJS面向物联网的3D可视化开发平台拥有强大的物联网开发逻辑，ThingJS为可视化应用提供简单而丰富的功能，只需要基本的Javascript开发经验即可上手。用户通过接入平台API，轻松集成3D可视化界面，场景搭建-在线开发-数据对接-项目部署，让开发更高效！