SuperMap iClient3D for WebGL教程 粒子特效-基础火焰特效

SuperMap iClient3D for WebGL教程 粒子特效-基础火焰特效

作者: NIck Cheng

粒子特效简介

粒子特效通常使用与要表现某些动态粒子效果的情况下(火焰,喷泉,烟雾等),这些效果通常无法通过单一图片来表示,就需要借助粒子特效来加以实现.
超图iClient3D for WebGL对原有Cesium的ParticleSystem类进行了一定的优化,使其能实现更加逼真的效果,更趋近于超图iDesktop .net中的例子特效效果,给予用户更真实的体验,可广泛用户应急演练,救灾抢险,三维管线维护等展示效果上.

使用粒子特效

这里我们要实现一个小车自燃的粒子特效效果,可以通过下面这些步骤来实现

  1. 首先我们先声明一个场景(这里不过多叙述)
let viewer = new Cesium.Viewer('cesiumContainer')
  1. 使用Entity类为我们的粒子定下一个位置
var position = Cesium.Cartesian3.fromDegrees(116.39079313032, 39.9919830785419, 0)
    var entity = viewer.entities.add({
      position: position
    })
  1. 添加一个小车,放在粒子的位置上
let entity2 = viewer.entities.add({
      name: 'text',
      model: {
        uri: '/static/Cesium_Ground.gltf',
        minimumPixelSize: 64
      },

      viewFrom: new Cesium.Cartesian3(-100.0, 0.0, 100.0),
      position: position

    })
    viewer.trackedEntity = entity2
  1. 使用粒子特效
let viewModel = {
        emissionRate: 200,
        minimumParticleLife: 1.5,
        maximumParticleLife: 1.8,
        minimumSpeed: 7.0,
        maximumSpeed: 9.0,
        startScale: 3.0,
        endScale: 1.5,
        particleSize: 1
      }
particleSystem = scene.primitives.add(new Cesium.ParticleSystem({
      // 粒子的图片
      image: '/static/fire.png',
      // 起始颜色
      startColor: new Cesium.Color(1, 1, 1, 1),
      // 结束颜色
      endColor: new Cesium.Color(1, 0, 0, 0),
      // 开始大小比例
      startScale: this.viewModel.startScale,
      // 结束大小比例
      endScale: this.viewModel.endScale,
      // 最小生命周期
      minimumParticleLife: this.viewModel.minimumParticleLife,
      // 最大生命周期
      maximumParticleLife: this.viewModel.maximumParticleLife,
      // 最小速度
      minimumSpeed: this.viewModel.minimumSpeed,
      // 最大速度
      maximumSpeed: this.viewModel.maximumSpeed,
      // 粒子大小
      imageSize: new Cesium.Cartesian2(this.viewModel.particleSize, this.viewModel.particleSize),
      // 粒子数量
      emissionRate: this.viewModel.emissionRate,
      lifetime: 16,
      // 循环是否开启
      loop: true,
      // 粒子的释放方向
      emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(45.0)),
      // 是否以米为单位
      sizeInMeters: true
    }))

    viewer.scene.preUpdate.addEventListener(function (scene, time) {
      particleSystem.modelMatrix = computeModelMatrix(entity, time)
      // Account for any changes to the emitter model matrix.
      particleSystem.emitterModelMatrix = computeEmitterModelMatrix()
    })

    function computeModelMatrix (entity, time) {
      return entity.computeModelMatrix(time, new Cesium.Matrix4())
    }

    var emitterModelMatrix = new Cesium.Matrix4()
    var translation = new Cesium.Cartesian3()
    var rotation = new Cesium.Quaternion()
    var hpr = new Cesium.HeadingPitchRoll()
    var trs = new Cesium.TranslationRotationScale()

    // 改变粒子系统的位置
    function computeEmitterModelMatrix () {
      hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, hpr)
      trs.translation = Cesium.Cartesian3.fromElements(-2, 0, 2, translation)
      trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, rotation)
      return Cesium.Matrix4.fromTranslationRotationScale(trs, emitterModelMatrix)
    }

然后我们就可以在场景中浏览我们的粒子特效的效果了
粒子特效效果

完整代码

这里我使用vue框架并且使用element-ui及css-sass实现了一个较为完整的demo,大家可以参考一下
代码在我的csdn的资源中,欢迎大家浏览借鉴(仅供借鉴的渣代码 )
效果截图
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: SuperMap iClient 3D for WebGL 是一款基于 WebGL 技术的三维地图开发工具,主要用于构建具有三维效果的地图应用程序。该工具提供了丰富的 API 接口和示例代码,可以帮助开发者快速上手,实现各种三维地图功能,如地形展示、建筑物模型、动态效果等。同时,SuperMap iClient 3D for WebGL 还支持多种数据格式,包括 SuperMap iServer 数据、OGC 标准数据、KML、GeoJSON 等,可以满足不同应用场景的需求。 ### 回答2: SuperMap iClient3D for WebGL是一个基于WebGL技术的三维地图开发框架。它提供了一系列的API和工具,使开发人员能够更加轻松地构建出高质量的三维地图应用。下面,我将从以下几个方面介绍SuperMap iClient3D for WebGL教程。 一、环境配置 SuperMap iClient3D for WebGL的开发需要先配置开发环境,包括安装Node.js、下载安装SuperMap iServer、下载安装SuperMap iClient3D资源包、创建Web应用程序。 二、基本概念 在学习SuperMap iClient3D for WebGL之前,需要了解一些基本概念。这些概念包括:场景(Scene)、层(Layer)、覆盖物(Overlay)等。在使用SuperMap iClient3D for WebGL时需要理解这些概念。 三、API使用 SuperMap iClient3D for WebGL提供了众多的API,使用这些API能够快速构建出一个三维地图应用。这些API包括:场景相关的API,如创建场景、设置场景属性等;层相关的API,如加载图层数据、隐藏、显示图层等;覆盖物相关的API,如创建点、线、面等覆盖物。 四、进阶应用 在掌握SuperMap iClient3D for WebGL基础之后,可以通过进阶应用来进一步加深对这个框架的理解。进阶应用包括地球的三维测量、地球的动态效果、地球的热点区域等。 总之,SuperMap iClient3D for WebGL是一个非常实用的三维地图开发框架。通过学习其教程,开发人员可以更加方便、快速地构建出高质量的三维地图应用。 ### 回答3: SuperMap iClient 3D for WebGL是一款基于WebGL技术的开源GIS JavaScript库,用于构建高效、功能强大的3D GIS应用程序。这个库支持在Web浏览器里实现高质量的三维可视化效果,包括三维地形、建筑物、模型、标签等。现在,我来为你们讲解一下关于SuperMap iClient 3D for WebGL教程。 一、前置知识 在接触SuperMap iClient 3D for WebGL之前,建议你先学习基本的WebGL知识和JavaScript语言,也应该具备计算机图形学基础3D模型制作知识。 二、环境配置 在使用SuperMap iClient 3D for WebGL前,我们需要进行环境配置,在编写和运行项目时可以根据需要安装一系列依赖项,例如Node.js、npm包管理器、Gulp自动化工具、webpack工具和TypeScript编译器等。 三、基本使用 SuperMap iClient 3D for WebGL提供了丰富的API以实现3D可视化应用程序的开发,其中包括地图、图层、标注、工具、渲染等方面。同时,它还提供了多种数据格式的支持,如XYZ、OGC、JSON、KML、GML等。此外,SuperMap iClient 3D for WebGL还支持多种操作和交互方式,如平移、旋转、缩放、选取、编辑等,让用户可以更加自由地探索和编辑地图数据。 四、示例应用 SuperMap iClient 3D for WebGL提供了一系列的示例应用程序,可以帮助用户更好的理解其使用方法和特点,其中包括一些经典的三维场景展示和实时数据可视化等。例如,用户可以体验到城市三维建模、天气预报、热力图、空气质量监控等实用的功能。此外,SuperMap iClient 3D for WebGL也提供了一些模板和组件,供用户快速搭建自己的3D GIS应用程序。 总之,SuperMap iClient 3D for WebGL是一款非常优秀的基于WebGL技术的GIS JavaScript库,具有开源、高效、功能强大、易用等特点,可以为用户提供丰富多彩的三维GIS应用程序。当然,在使用前,建议用户先了解基本的WebGL和JavaScript知识,同时还需配置好开发环境。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值