Mars3d实现汽车尾气粒子效果从汽车屁股开始发射效果

本身的汽车尾气粒子效果:在汽车模型的中间发射的↓↓↓↓↓↓↓↓↓↓↓

Mars3d实例中是使用transY偏移值实现汽车尾气粒子效果从汽车屁股开始发射效果:

复制代码
// 动态运行车辆的尾气粒子效果
function addDemoGraphic4(graphicLayer) {
  const fixedRoute = new mars3d.graphic.FixedRoute({
    speed: 120,
    positions: [
      [117.226585, 31.818437, 32.41],
      [117.226838, 31.811681, 28.23]
    ],
    clockLoop: true, // 是否循环播放
    model: {
      url: "//data.mars3d.cn/gltf/mars/qiche.gltf",
      scale: 0.2
    }
  })
  graphicLayer.addGraphic(fixedRoute)

  fixedRoute.start() // 启动漫游

  const particleSystem = new mars3d.graphic.ParticleSystem({
    position: fixedRoute.property,
    style: {
      image: "./img/particle/smoke.png",
      particleSize: 12, // 粒子大小(单位:像素)
      emissionRate: 20.0, // 发射速率 (单位:次/秒)
      pitch: 40, // 俯仰角
      // gravity: -1, // 重力因子,会修改速度矢量以改变方向或速度(基于物理的效果)
      transY: 8.0, // 偏移值Y,尾气在车辆后面一些
      maxHeight: 1000, // 超出该高度后不显示粒子效果

      startColor: Cesium.Color.GREY.withAlpha(0.7), // 开始颜色
      endColor: Cesium.Color.WHITE.withAlpha(0.0), // 结束颜色
      startScale: 1.0, //  开始比例(单位:相对于imageSize大小的倍数)
      endScale: 5.0, // 结束比例(单位:相对于imageSize大小的倍数)
      minimumSpeed: 1.0, // 最小速度(米/秒)
      maximumSpeed: 4.0 // 最大速度(米/秒)
    },
    attr: { remark: "车辆尾气" }
  })
  graphicLayer.addGraphic(particleSystem)
}

示例链接:功能示例(Vue版) | Mars3D三维可视化平台 | 火星科技

相关效果:

粒子本身的参数emitterModelMatrix也可以实现从车屁股开始发射效果:

复制代码
// 动态运行车辆的尾气粒子效果
function addDemoGraphic4(graphicLayer) {
  const fixedRoute = new mars3d.graphic.FixedRoute({
    speed: 120,
    positions: [
      [117.226585, 31.818437, 32.41],
      [117.226838, 31.811681, 28.23]
    ],
    clockLoop: true, // 是否循环播放
    model: {
      url: "//data.mars3d.cn/gltf/mars/qiche.gltf",
      scale: 0.2
    },
      attr: { remark: "车辆尾气emitterModelMatrix实现" }
  })
  graphicLayer.addGraphic(fixedRoute)

  fixedRoute.start() // 启动漫游

  const particleSystem = new mars3d.graphic.ParticleSystem({
    position: fixedRoute.property,
    emitterModelMatrix: Cesium.Matrix4.fromTranslation( new Cesium.Cartesian3(0, 15, 0)),
    style: {
      image: "./img/particle/smoke.png",
      particleSize: 12, // 粒子大小(单位:像素)
      emissionRate: 20.0, // 发射速率 (单位:次/秒)
      pitch: 40, 
      maxHeight: 1000, // 超出该高度后不显示粒子效果
      startColor: Cesium.Color.GREY.withAlpha(0.7), // 开始颜色
      endColor: Cesium.Color.WHITE.withAlpha(0.0), // 结束颜色
      startScale: 1.0, //  开始比例(单位:相对于imageSize大小的倍数)
      endScale: 5.0, // 结束比例(单位:相对于imageSize大小的倍数)
      minimumSpeed: 1.0, // 最小速度(米/秒)
      maximumSpeed: 4.0 // 最大速度(米/秒)
    },
    attr: { remark: "车辆尾气" }
  })
  graphicLayer.addGraphic(particleSystem)
}
相关推荐
mldong9 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器:npm 装包,10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排9 小时前
什么是 RAG?如何用 RAG 实现一个用户记忆?
前端·后端·ai编程
passerby606110 小时前
如何自己造一个时间处理库
前端·javascript·github
flower_drop10 小时前
基于 WebUSB 与 CDP:在浏览器端实现 Android 设备通信与无证书抓包实践
android·chrome·测试工具·adb·bug·edge浏览器
走到天涯海角11 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼!11 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰11 小时前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
luiyarch12 小时前
汽车电子ISO 26262功能安全系列(第35期):配置管理与变更管理——给安全系统装上“时空穿梭机”
安全·汽车
LUSTER凌云光12 小时前
凌云光荣获 “热成形产业创领先锋奖“,以视觉AI助力汽车智能制造
人工智能·汽车·制造
mayaairi13 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js