iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ThingJS粒子特效一键实现雨雪效果
  • 304
分享到

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

2024-04-02 19:04:59 304人浏览 独家记忆
摘要

目录1、粒子效果2、 加载场景3、不同粒子特效实现结尾:使用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面向物联网的3D可视化开发平台拥有强大的物联网开发逻辑,ThingJS 为可视化应用提供了简单、丰富的功能,只需要具有基本的 javascript 开发经验即可上手。使用者通过接入平台api,轻松集成3D可视化界面,场景搭建-在线开发-数据对接-项目部署,让开发更高效!

以上就是ThingJS粒子特效一键实现雨雪效果的详细内容,更多关于ThingJS 实现雨雪效果的资料请关注编程网其它相关文章!

--结束END--

本文标题: ThingJS粒子特效一键实现雨雪效果

本文链接: https://www.lsjlt.com/news/127113.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • ThingJS粒子特效一键实现雨雪效果
    目录1、粒子效果2、 加载场景3、不同粒子特效实现结尾:使用ThingJS可以快速编写粒子效果,比如:下雨、下雪(可以控制雨雪大小)、喷水、火焰效果等,甚至可以通过对接第三方的数据,...
    99+
    2024-04-02
  • ThingJS粒子特效如何实现雨雪效果
    这篇文章主要介绍了ThingJS粒子特效如何实现雨雪效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。使用ThingJS可以快速编写粒子效果,比如:下雨、下雪(可以控制雨雪大...
    99+
    2023-06-15
  • jQuery实现动态粒子效果
    本文实例为大家分享了jQuery实现动态粒子效果的具体代码,供大家参考,具体内容如下 效果图 代码 <!DOCTYPE html> <html lang="...
    99+
    2024-04-02
  • JavaScript实现雪花飘落效果特效
    没有雪的冬天失去了冬天的美景,不见了千里冰封,万里雪飘的北国之美,诗人无从写雪,画家画不出雪景,摄影师拍不到冬天的美丽。雪,是冬天的灵魂,为大地铺好背景,之后发生的都如梦似幻,就像童...
    99+
    2023-01-01
    js雪花特效 雪花特效
  • js canvas实现随机粒子特效
    本文实例为大家分享了js canvas随机粒子特效的具体代码,供大家参考,具体内容如下 前言 canvas实现前端的特效美术 结果展示 代码 html <!DOCTYPE...
    99+
    2024-04-02
  • JavaScript+Canvas实现文字粒子流特效
    目录动手前思考绘制文字获取像素点位渲染粒子简单的动画效果1、随机选择四个方向中的某一个方向,生成初始坐标2、从初始位置运动到实际位置3、点击文字炸开的特效动手前思考 首先要在特定的位...
    99+
    2023-01-14
    JavaScript Canvas文字粒子流特效 JavaScript Canvas粒子流 JavaScript Canvas
  • Python粒子烟花动态效果实现
    目录效果展示实现代码剩下代码跨年倒计时还有18天?我已经开始整烟花了,虽然不是很好看吧,但是也能将就看看 这个的背景图,音乐,还有文字都是可以自己修改的哦 效果展示 依次导入本次...
    99+
    2023-01-03
    Python粒子烟花 Python动态烟花 Python烟花
  • vue实现登录页背景粒子特效
    本文实例为大家分享了vue实现登录页背景粒子特效的具体代码,供大家参考,具体内容如下 上图中的点和线,是由Vue-Particles生成的,不仅自己动,还可以与用户的鼠标互动。例子...
    99+
    2024-04-02
  • 使用CSS3怎么实现一个粒子动画效果
    本篇文章给大家分享的是有关使用CSS3怎么实现一个粒子动画效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。按钮点击粒子动画<div class="b...
    99+
    2023-06-08
  • CSS3中怎么实现粒子动画效果
    这期内容当中小编将会给大家带来有关CSS3中怎么实现粒子动画效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。按钮点击粒子动画<div class=&qu...
    99+
    2024-04-02
  • 使用jQuery怎么实现一个动态粒子效果
    使用jQuery怎么实现一个动态粒子效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。<!DOCTYPE html><html lan...
    99+
    2023-06-14
  • JavaScript实现带粒子效果的进度条
    本文实例为大家分享了JavaScript实现带粒子效果进度条的具体代码,供大家参考,具体内容如下 <html>     <head>         <...
    99+
    2024-04-02
  • JS如何实现红包兔子雨效果
    本篇内容介绍了“JS如何实现红包兔子雨效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!思考与实现首先,思考一下最终的展示效果:在屏幕上会有...
    99+
    2023-07-05
  • vue怎么实现登录页背景粒子特效
    这篇“vue怎么实现登录页背景粒子特效”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue怎么实现登录页背景粒子特效”文章吧...
    99+
    2023-06-29
  • JS实现代码雨特效
    本文实例为大家分享了JS实现代码雨特效的具体代码,供大家参考,具体内容如下 html代码 <canvas id="code_rain_canvas" width="1440" ...
    99+
    2024-04-02
  • 如何使用SurfaceView实现下雨与下雪动画效果
    这篇文章将为大家详细讲解有关如何使用SurfaceView实现下雨与下雪动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。先看一下最终完成的效果图:下雨.gif这里比较懒……第二个图片中还是降雨……不...
    99+
    2023-05-30
    surfaceview
  • react-three-fiber实现炫酷3D粒子效果首页
    目录背景Three.js工作原理场景(Scene)相机(Camera)渲染器(renderer)网格对象(mesh)react-three-fiber画布(Canvas)3D粒子模型...
    99+
    2024-04-02
  • JavaScript+Canvas实现带跳动效果的粒子动画
    目录前言实现过程运行效果总结前言 用 HTML5 的 Canvas 元素实现一个带有跳动效果的粒子动画。会用到 Canvas 的2D渲染上下文,通过 JavaScript 编写绘图代...
    99+
    2023-03-14
    JavaScript Canvas实现粒子动画 Canvas粒子动画 JavaScript Canvas
  • 怎么在JavaScript中使用canvas实现一个随机粒子特效
    本篇文章给大家分享的是有关怎么在JavaScript中使用canvas实现一个随机粒子特效,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。Java的特点有哪些Java的特点有哪些...
    99+
    2023-06-14
  • JavaScript+Canvas实现酷炫的粒子和流星效果
    目录一:粒子效果二:流星效果一:粒子效果 <html> <head> <meta charset="utf-8"> <title&...
    99+
    2023-01-31
    JavaScript实现粒子效果 JavaScript实现流星效果 JavaScript 粒子 JavaScript 流星
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作