ThingJS如何实现雨雪效果

蜗牛互联网技术资讯2022-10-221140

这篇文章主要介绍“ThingJS如何实现雨雪效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“ThingJS如何实现雨雪效果”文章能帮助大家解决问题。

1、粒子效果

ThingJS 提供 ParticleSystem 物体类来实现粒子效果。自己制作粒子效果需要图片处理、写代码、3D渲染，是个很艰巨的任务，需要掌握大量 3D 算法知识，还要掌握 shader 语言。ThingJS封装了粒子效果的实现方法，减少了代码量和开发投入，更受3D开发初学者的欢迎，直接用query查询API接口，在场景中加入火焰效果。

ThingJS内置一些粒子效果可以直接调用,可点击在线开发选择代码块进行调用。

2、加载场景

CampusBuilder（又称模模搭）搭建场景完成后，在ThingJS直接加载url进行二次开发。

// 加载场景代码 
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 particle = app.query('.ParticleSystem'); // 判断当前有无创建的粒子 if (particle) { // 存在，将已创建的粒子删除 particle.destroy(); } }

关于“ThingJS如何实现雨雪效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注蜗牛博客行业资讯频道，小编每天都会为大家更新不同的知识点。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。