Cesium官方教程9(有错误)

本文介绍如何在Cesium中使用粒子系统增强3D模型效果,包括粒子系统的配置、模型加载、位置计算及粒子行为设定,如重力加速度应用。

var viewer = new Cesium.Viewer('cesiumContainer');

//不透明的盒子,启用背面裁剪,深度检测,不需要混合
var appearance = new Cesium.PerInstanceColorAppearance({
    translucent : false,   //半透明
    closed : true          //闭合
});

//与上面的设置等价
var anotherAppearance = new Cesium.PerInstanceColorAppearance({
    renderState : {
        depthTest : {
            enabled : true
        },
        cull : {
            enabled : true,
            face : Cesium.CullFace.BACK
        }
    
    }
});

var entityPlane = viewer.entities.add({
    model : {
        uri : 'http://localhost:8080/apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
        minimumPixelSize : 64
    },
    position : Cesium.Cartesian3.fromDegrees(-112.110693, 36.1, 1000.0)
});
viewer.trackedEntity  =entityPlane;
//计算当前时间点飞机模型的位置矩阵
function computeModelMatrix(entity, time){    
    var position = Cesium.Property.getValueOrUndefined(entity.position, time, new Cesium.Cartesian3());
    if( !Cesium.defined(position)){
        return undefined;
    }
    //alert(position);
    var orientation = Cesium.Property.getValueOrUndefined(entity.orientation, time, new Cesium.Quaternion());
    var modelMatrix;
    if(!Cesium.defined(orientation)){
        modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position,undefined, new Cesium.Matrix4());       
       
   }
    else{
        modelMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromQuaternion(orientation, new Cesium.Matrix3()), position, new Cesium.Matrix4()) ;
        
    }
    return modelMatrix;
          
   // return entity.computeModelMatrix(time, new Cesium.Matrix4());
    
   
}
//粒子放在飞机引擎上产生,平移矩阵
function computeEmitterModelMatrix(){
    var hpr = Cesium.HeadingPitchRoll.fromDegrees(0.0, 0.0, 0.0, new Cesium.HeadingPitchRoll());
    var trs = new Cesium.TranslationRotationScale();
    trs.translation = Cesium.Cartesian3.fromElements(0, 0, 0, new Cesium.Cartesian3());
    trs.rotation = Cesium.Quaternion.fromHeadingPitchRoll(hpr, new Cesium.Quaternion());
    return Cesium.Matrix4.fromTranslationRotationScale(trs, new Cesium.Matrix4());
}


//加上重力
var gravityScratch = new Cesium.Cartesian3();
function applyGravity( p, dt ){
    //计算每个粒子的向上向量
    var position = p.position;
    var positionA = Cesium.Cartesian3.normalize(position, new Cesium.Cartesian3());
    Cesium.Cartesian3.multiplyByScalar(positionA, 5, positionA);
    p.position = Cesium.Cartesian3.add(p.position,positionA, p.position);
}

//基本粒子系统
var particleSystem = viewer.scene.primitives.add(new Cesium.ParticleSystem({
    //粒子图片
    image : 'http://localhost:8080/apps/SampleData/fire.png',
    //粒子大小
    startScale : 1.0,
    endScale : 4.0,
    particleLife : 1.0,
    //速度
    speed : 5.0,
    imageSize : new Cesium.Cartesian2(20.0,20.0),
    emissionRate : 5.0,
    rate : 5.0,
    //颜色
    startColor : Cesium.Color.RED.withAlpha(0.7),
    endColor : Cesium.Color.YELLOW.withAlpha(0.3),
    //粒子行为
    //发射器参数
    emitter : new Cesium.ConeEmitter(Cesium.Math.toRadians(30.0)),
    //粒子系统的局部坐标系内变换粒子发射器
    emitterModelMatrix : computeEmitterModelMatrix(),
    //粒子系统参数
    //粒子系统从模型坐标系转到世界坐标系
    modelMatrix : computeModelMatrix(entityPlane, Cesium.JulianDate.now()),
    lifetime : 16.0,
    loop : false,
    //重力加速度
    forces : [applyGravity]
    
}));

### Vite 和 Cesium 的集成教程 #### 1. 安装依赖 为了在 Vite 项目中使用 Cesium,需要先安装必要的依赖包。可以通过以下命令完成安装: ```bash npm install cesium vite-plugin-cesium --save-dev ``` 此操作会将 `cesium` 和 `vite-plugin-cesium` 添加到项目的开发依赖中[^2]。 --- #### 2. 配置插件 为了让 Vite 支持 Cesium,在项目的根目录下找到或创建 `vite.config.js` 文件,并添加如下配置: ```javascript import { defineConfig } from &#39;vite&#39;; import cesiumPlugin from &#39;vite-plugin-cesium&#39;; export default defineConfig({ plugins: [ cesiumPlugin() // 注册 Cesium 插件 ], server: { port: 3000, open: true } }); ``` 上述代码片段展示了如何通过 `vite-plugin-cesium` 将 Cesium 集成到 Vite 中[^1]。 --- #### 3. 初始化 Cesium 场景 在 Vue 或纯 JavaScript 环境中,可以按照以下方式初始化 Cesium 地图场景。假设您正在构建一个基于 Vue 3 的应用,则可以在组件中引入并渲染 Cesium: ```html <template> <div id="cesiumContainer"></div> </template> <script setup lang="ts"> import * as Cesium from &#39;cesium&#39;; onMounted(() => { const viewer = new Cesium.Viewer(&#39;cesiumContainer&#39;, { terrainProvider: Cesium.createWorldTerrain() }); }); </script> <style scoped> #cesiumContainer { width: 100%; height: 100vh; } </style> ``` 这段代码展示了一个简单的 Cesium 应用程序设置方法,其中包含了地形支持的功能[^4]。 --- #### 4. 解决常见问题 如果遇到某些功能无法正常运行的情况,比如导航控件显示异常等问题,可能是因为缺少额外的资源加载或者版本兼容性原因引起的。例如,在 Vue 2 + Cesium 1.95.0 的环境中集成了指南针插件 (`cesium-navigation-es6`) 可能会出现样式错乱或其他错误。此时可参考相关解决方案文档来排查具体问题[^3]。 --- #### 5. 总结 综上所述,Vite 和 Cesium 的集成主要分为以下几个部分:安装必要依赖、配置 Vite 插件以及编写前端代码实现地图渲染等功能。对于更复杂的业务需求,还需要注意解决潜在的技术难题,如第三方库适配等。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值