水枪粒子

该框架支持水枪粒子动画效果

支持说明

INFO

支持自定义设置发射角度以及重力因子

angle：发射角度

gravity：重力因子

代码实例

<script setup lang="ts">
import { onMounted, onBeforeUnmount, watch, ref } from 'vue'
const LarkExplorer = window.LarkExplorer
let map: any
onMounted(() => {
  LarkExplorer.ready({
    baseUrl: './dist/resources/',
  }).then(initMap)
})
function initMap() {
  // 默认谷歌影像地图
  const baseImagery = LarkExplorer.BaseLayer.DefaultTdtImg
  // 默认全球地形
  const baseTerrain = LarkExplorer.BaseLayer.DefaultTerrain
  map = new LarkExplorer.Map('map', baseImagery, baseTerrain)
  water()
}
let waterObj: any
// 发射角度
const angle = ref(50)
watch(angle, (val) => {
  waterObj.angle = val
})

// 重力因子
const gravity = ref(-9)
watch(gravity, (val) => {
  waterObj.gravity = val
})
/**
 * 创建水枪粒子
 */
const water = () => {
  removeAll()
  const pos1 = LarkExplorer.Coordinate.PosFromXYZ(119.5607, 35.5559, 9)
  const pos2 = LarkExplorer.Coordinate.PosFromXYZ(119.5625, 35.5571, 10)
  loadModel(pos1)
  // 创建火焰粒子
  map.Layers.Particle.newFire(pos2, 'cone', 5)
  const options = {
    angle: angle.value, //喷射角度
    gravity: gravity.value, //重力系数
  }
  waterObj = map.Layers.Particle.newWaterGun(pos1, pos2, options)
  console.log(waterObj)
  map.Navigation.flyToItem(waterObj)
}

const removeAll = () => {
  map.Layers.Particle.removeAll()
}

let model: any
// 加载救援车模型
function loadModel(pos: any) {
  if (model) return
  const url = 'https://app.larkview.cn/larkexplorersdk/resources/model/fire_truck/scene.gltf'
  const option = {
    scale: 0.3,
    shadow: true,
    onGround: false,
    heading: 60,
    pitch: 0,
    roll: 0,
  }
  model = map.Layers.Model.addGltf(url, pos, option)
}
</script>

运行效果 更多示例