cesium模型爆炸案例

写了一段小小的着色器代码，关于模型爆炸的，原理就是将不同的片元着色器向着法线的方向移动。虽然有点小简陋，但是加入一个小demo的情景倒也可以看看。

废话不多说，直接上代码。

<script type="module">import ExplosiveModel from './src/ExplosiveModel.js'Cesium.ExperimentalFeatures.enableModelExperimental = true;var initCesium = new InitCesium();var viewer = initCesium.initViewer("cesiumContainer", {orderIndependentTranslucency: false,infoBox: false,selectionIndicator: false,shouldAnimate: true,});var hpr = new Cesium.HeadingPitchRoll(0, 0, 0);var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator("north","west");var models = {milkTruck:"./data/model/house/scene.gltf",};var explosiveModel = new ExplosiveModel(viewer);//创建被爆炸的模型explosiveModel.createExplosiveModel({id:'s22fs',modelUrl:"./data/model/house/scene.gltf",x:123.0749919,y:44.0503726,z:4});var start = Cesium.JulianDate.fromDate(new Date());var stop = Cesium.JulianDate.addSeconds(start,120,new Cesium.JulianDate());viewer.clock.startTime = start.clone();viewer.clock.stopTime = stop.clone();viewer.clock.currentTime = start.clone();// viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the endviewer.clock.multiplier = 1;viewer.clock.shouldAnimate = true;viewer.timeline.zoomTo(start, stop);var planePosition = Cesium.Cartesian3.fromDegrees(123.0749919,44.0503706,4);var planePosition2 = Cesium.Cartesian3.fromDegrees(123.2415, 44.0503706, 2000);var position = new Cesium.SampledPositionProperty();position.addSample(start, planePosition2);position.addSample(stop, planePosition);var hpr = new Cesium.HeadingPitchRoll(3.1,-0.2,0.0);var orientation = Cesium.Transforms.headingPitchRollQuaternion(planePosition,hpr);var entity = viewer.entities.add({model: {uri: "./data/model/Cesium_Air.glb",scale: 0.11,},position: position,orientation: orientation,});viewer.trackedEntity = entity;var cTime = function (scene, time) {if(time.secondsOfDay >= stop.secondsOfDay) {explosiveModel.modelExplode(explosiveModel.getById('s22fs'));viewer.scene.preUpdate.removeEventListener(cTime);}}console.log(cTime)viewer.scene.preUpdate.addEventListener(cTime);</script>

const {ModelExperimental,CustomShader,Ellipsoid,Transforms,UniformType,Cartesian3,PrimitiveCollection,HeadingPitchRoll} = Cesium;
export default class ExplosiveModel {constructor(viewer) {this.viewer = viewer;this.modelCollection = new PrimitiveCollection();this.models = {};this.viewer.scene.primitives.add(this.modelCollection);}/*** 创建一个可爆炸的模型实体* @param {*} entityData id,modelUrl,x,y,z,hpr*/createExplosiveModel(entityData) {const {id,modelUrl,x,y,z,hpr=new HeadingPitchRoll(0, 0, 0),} = entityData;const model = this.modelCollection.add(ModelExperimental.fromGltf({gltf: modelUrl, // "./CesiumMilkTruck.glb",customShader: new CustomShader(this._getCustomShader()),modelMatrix: Transforms.headingPitchRollToFixedFrame(Cartesian3.fromDegrees(x,y,z),hpr,Ellipsoid.WGS84,Transforms.localFrameToFixedFrameGenerator("north","west")),}));model.readyPromise.then(function (model) {viewer.camera.flyToBoundingSphere(model.boundingSphere, {duration: 0.5,});});// this.models.push(model);this.models[id] = model;}modelExplode(primitive) {primitive.customShader?.setUniform("u_flag", 0);const timer = window.setTimeout(() => {this.modelExplodeStop(primitive);window.clearTimeout(timer);}, 600);}modelExplodeStop(primitive) {primitive.customShader?.setUniform("u_flag", 1);}modelExplodeById(id) {const model = this.models[id];if(model) {model.customShader?.setUniform("u_flag", true);}}getById(id) {return this.models[id]}removeAll() {// this.models.forEach(model=>{//     model.destroy();// });this.modelCollection = this.modelCollection && this.modelCollection.destroy();this.models = {};}removeById(id) {if(this.models[id]) {this.modelCollection.remove(this.models[id]);delete this.models[id];console.log(this.models);}}_getCustomShader () {return {uniforms: {u_flag: {type: UniformType.INT,value: 2,},// u_drag: {//     type: Cesium.UniformType.VEC2,//     value: new Cesium.Cartesian2(0.0, 0.0),// },u_speed: {type:UniformType.FLOAT,value:3.0}// czm_frameNumber:{//     type: Cesium.UniformType.FLOAT,//     value: 1.0// },},//positionMC +=(vsInput.attributes.normalMC.x , vsInput.attributes.normalMC.y ,0.02 * u_drag.x *  vsInput.attributes.normalMC.z);//positionMC += vec3(a_vertex.x ,a_vertex.y ,a_vertex.z)  * vsInput.attributes.normalMC;//positionMC += vsInput.attributes.normalMC  * vsInput.attributes.normalMC;vertexShaderText: `attribute vec4 position;void vertexMain(VertexInput vsInput, inout vec3 positionMC){if(u_flag == 0) {float cycle = u_speed * mod(czm_frameNumber , 100.0);positionMC += vsInput.attributes.normalMC * position.xyz;positionMC += 0.01 * cycle * vsInput.attributes.normalMC;}else if(u_flag == 1) {positionMC += 0.01 * 300.0 * vsInput.attributes.normalMC;}elsepositionMC += 0.01  * vsInput.attributes.normalMC;}`,// material.diffuse = vec3(flagColor);// fragmentShaderText: `// void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {//     gl_FragColor// }// `}}
}

时间太久远了，去年写的小demo，有些东西也记不清了，但是可以参考借鉴一下。

cesium模型爆炸案例相关推荐

吴恩达《卷积神经网络》精炼笔记（2）-- 深度卷积模型：案例研究
AI有道不可错过的AI技术公众号关注 1 Why Look at Case Studies 本文将主要介绍几个典型的CNN案例.通过对具体CNN模型及案例的研究,来帮助我们理解知识并训练实际的模型 ...
Coursera吴恩达《卷积神经网络》课程笔记（2）-- 深度卷积模型：案例研究
红色石头的个人网站:redstonewill.com <Convolutional Neural Networks>是Andrw Ng深度学习专项课程中的第四门课.这门课主要介绍卷积神经网 ...
星型模型 3nf的区别_贵州省遵义市工业模型经典案例展示
随着城市的发展,沙盘模型在城市建设中发展着越来越重要的作用.地产商在开发一个片区时候,都会首先和一些专业的沙盘模型公司联系,用以来构建未来的的展现效果.那平时制作沙盘模型都有哪些方法,都使用了哪些原料 ...
AI专家一席谈：复用算法、模型、案例，AI Gallery带你快速上手应用开发
摘要: 华为云社区邀请到了AI Gallery的负责人严博,听他谈一谈AI Gallery的设计初衷.经典案例以及未来规划. 本文分享自华为云社区<AI专家一席谈:复用算法.模型.案例,AI G ...
cesium 模型绕点飞行一周
cesium 模型绕点飞行一周 // 加载glb模型原地旋转//获取锥体的坐标var position = Cesium.Cartesian3.fromDegrees(116.358504190185 ...
Cesium模型制作服务
Cesium模型制作服务 1..X..dae..obj.3dmax.sketchup等工具软件制作的模型,批量转换,需提供每个模型具体位置和转角(Cesium默认经纬度坐标系,提供的坐标可转换为经纬度 ...
Vue里使用three.js实现3D模型小案例
Vue里使用three.js实现3D模型小案例 1.下载three.js包 npm install three --save 或者 yarn add three --save 2.组件代码 <t ...
matlab中非线性回归标准误,SPSS—非线性回归(模型表达式)案例解析_spss培训
SPSS-非线性回归(模型表达式)案例解析由简单到复杂,人生有下坡就必有上坡,有低潮就必有高潮的迭起,随着SPSS的深入学习,已经逐渐开始走向复杂,今天跟大家交流一下,SPSS非线性回归,希望大家能 ...
c 语言boll型变量,My语言几种常见指标编写与跨指标模型的案例分析
发明者量化平台的My语言是一种函数高度集成且功能强大的量化编程语言,专为量化初学者量身定做,虽然它受众多初学者的欢迎,在功能上却一点不比别的编程语言逊色.在深度定制某些复杂策略方面,由于已经定制好的函 ...
Seq2Seq模型应用案例
Seq2Seq模型应用案例( : Seq2Seq是Encoder-Decoder(编码器与解码器)模型,输入是一个序列,输出也是一个序列,适用于输入序列与输出序列长度不等长的场景,如机器翻译.人机对话 ...

cesium模型爆炸案例

cesium模型爆炸案例相关推荐

最新文章

热门文章