Cesium JS API
AppearanceArcGisMapServerImageryProviderArcGISTiledElevationTerrainProviderArcTypeAssociativeArrayAxisAxisAlignedBoundingBoxbarycentricCoordinatesBillboardBillboardCollectionBillboardGraphicsBillboardVisualizerbinarySearchbinarySearchComparatorBingMapsGeocoderServiceBingMapsImageryProviderBingMapsStyleBlendEquationBlendFunctionBlendingStateBlendOptionBoundingRectangleBoundingSphereBoxEmitterBoxGeometryBoxGeometryUpdaterBoxGraphicsBoxOutlineGeometrybuildModuleUrlCallbackPropertyCameraCameraEventAggregatorCameraEventTypeCartesian2Cartesian3Cartesian4CartographicCartographicGeocoderServiceCatmullRomSplineCesium3DTileCesium3DTileColorBlendModeCesium3DTileContentCesium3DTileFeatureCesium3DTilePointFeatureCesium3DTilesetCesium3DTilesetGraphicsCesium3DTilesetVisualizerCesium3DTileStyleCesium3DTilesVoxelProviderCesiumTerrainProviderCesiumWidgetCheckerboardMaterialPropertyCircleEmitterCircleGeometryCircleOutlineGeometryClassificationPrimitiveClassificationTypeClippingPlaneClippingPlaneCollectionClockClockRangeClockStepcloneCloudCollectionCloudTypeColorColorBlendModeColorGeometryInstanceAttributeColorMaterialPropertycombineComponentDatatypeCompositeEntityCollectionCompositeMaterialPropertyCompositePositionPropertyCompositePropertyCompressedTextureBufferConditionsExpressionConeEmitterConstantPositionPropertyConstantPropertyConstantSplineContextOptionsCoplanarPolygonGeometryCoplanarPolygonOutlineGeometryCornerTypeCorridorGeometryCorridorGeometryUpdaterCorridorGraphicsCorridorOutlineGeometrycreateElevationBandMaterialcreateElevationBandMaterialBandcreateElevationBandMaterialEntrycreateGuidcreateOsmBuildingscreateTangentSpaceDebugPrimitivecreateWorldImagerycreateWorldTerrainCreditCreditDisplayCubicRealPolynomialCullFaceCullingVolumeCumulusCloudCustomDataSourceCustomHeightmapTerrainProviderCustomShaderCustomShaderModeCustomShaderTranslucencyModeCylinderGeometryCylinderGeometryUpdaterCylinderGraphicsCylinderOutlineGeometryCzmlDataSourceDataSourceDataSourceClockDataSourceCollectionDataSourceDisplayDebugAppearanceDebugCameraPrimitiveDebugModelMatrixPrimitiveDefaultProxydefaultValuedefinedDepthFunctiondestroyObjectDeveloperErrorDirectionalLightDirectionUpDiscardEmptyTileImagePolicyDiscardMissingTileImagePolicyDistanceDisplayConditionDistanceDisplayConditionGeometryInstanceAttributeEasingFunctionEllipseGeometryEllipseGeometryUpdaterEllipseGraphicsEllipseOutlineGeometryEllipsoidEllipsoidGeodesicEllipsoidGeometryEllipsoidGeometryUpdaterEllipsoidGraphicsEllipsoidOutlineGeometryEllipsoidRhumbLineEllipsoidSurfaceAppearanceEllipsoidTangentPlaneEllipsoidTerrainProviderEntityEntityClusterEntityCollectionEntityViewEventEventHelperexcludesReverseAxisexportKmlexportKmlModelCallbackexportKmlResultKmlexportKmlResultKmzExpressionExtrapolationTypeFeatureDetectionFogformatErrorFrameRateMonitorFrustumGeometryFrustumOutlineGeometryFullscreenGeocoderServiceGeocodeTypeGeographicProjectionGeographicTilingSchemeGeoJsonDataSourceGeometryGeometryAttributeGeometryAttributesGeometryFactoryGeometryInstanceGeometryInstanceAttributeGeometryPipelineGeometryUpdaterGeometryVisualizergetAbsoluteUrigetBaseUrigetExtensionFromUriGetFeatureInfoFormatgetFilenameFromUrigetImagePixelsgetTimestampGlobeGlobeTranslucencyGoogleEarthEnterpriseImageryProviderGoogleEarthEnterpriseMapsProviderGoogleEarthEnterpriseMetadataGoogleEarthEnterpriseTerrainDataGoogleEarthEnterpriseTerrainProviderGpxDataSourceGregorianDateGridImageryProviderGridMaterialPropertyGroundGeometryUpdaterGroundPolylineGeometryGroundPolylinePrimitiveGroundPrimitiveHeadingPitchRangeHeadingPitchRollHeadingPitchRollValuesHeightmapEncodingHeightmapTerrainDataHeightReferenceHermitePolynomialApproximationHermiteSplineHilbertOrderHorizontalOriginI3SDataProviderI3SFeatureI3SFieldI3SGeometryI3SLayerI3SNodeImageBasedLightingImageMaterialPropertyImageryLayerImageryLayerCollectionImageryLayerFeatureInfoImageryProviderImageryTypesincludesReverseAxisIndexDatatypeIntersectIntersections2DIntersectionTestsIntervalIonIonGeocoderServiceIonImageryProviderIonResourceIonWorldImageryStyleisLeapYearIso8601JulianDateKeyboardEventModifierKmlCameraKmlDataSourceKmlFeatureDataKmlLookAtKmlTourKmlTourFlyToKmlTourWaitLabelLabelCollectionLabelGraphicsLabelStyleLabelVisualizerLagrangePolynomialApproximationLeapSecondLightLightingModelLinearApproximationLinearSplineMapboxImageryProviderMapboxStyleImageryProviderMapMode2DMapProjectionMaterialMaterialAppearanceMaterialSupportMaterialPropertyMathMatrix2Matrix3Matrix4mergeSortmergeSortComparatorMetadataClassMetadataClassPropertyMetadataComponentTypeMetadataEnumMetadataEnumValueMetadataSchemaMetadataTypeModelModelAnimationModelAnimationCollectionModelAnimationLoopModelFeatureModelGraphicsModelNodeModelVisualizerMoonMorphWeightSplineNearFarScalarNeverTileDiscardPolicyNodeTransformationPropertyobjectToQueryOccluderOpenCageGeocoderServiceOpenStreetMapImageryProviderOrientedBoundingBoxOrthographicFrustumOrthographicOffCenterFrustumPackableForInterpolationParticleParticleBurstParticleEmitterParticleSystemPathGraphicsPathVisualizerPeliasGeocoderServicePerInstanceColorAppearancePerspectiveFrustumPerspectiveOffCenterFrustumPinBuilderPixelDatatypePixelFormatPlanePlaneGeometryPlaneGeometryUpdaterPlaneGraphicsPlaneOutlineGeometryPointCloudShadingPointGraphicspointInsideTrianglePointPrimitivePointPrimitiveCollectionPointVisualizerPolygonGeometryPolygonGeometryUpdaterPolygonGraphicsPolygonHierarchyPolygonOutlineGeometryPolylinePolylineArrowMaterialPropertyPolylineCollectionPolylineColorAppearancePolylineDashMaterialPropertyPolylineGeometryPolylineGeometryUpdaterPolylineGlowMaterialPropertyPolylineGraphicsPolylineMaterialAppearancePolylineOutlineMaterialPropertyPolylineVisualizerPolylineVolumeGeometryPolylineVolumeGeometryUpdaterPolylineVolumeGraphicsPolylineVolumeOutlineGeometryPositionPropertyPositionPropertyArrayPostProcessStagePostProcessStageCollectionPostProcessStageCompositePostProcessStageLibraryPostProcessStageSampleModePrimitivePrimitiveCollectionPrimitiveTypePropertyPropertyArrayPropertyBagProxyQuadraticRealPolynomialQuantizedMeshTerrainDataQuarticRealPolynomialQuaternionQuaternionSplinequeryToObjectQueueRayreadyPromiseRectangleRectangleGeometryRectangleGeometryUpdaterRectangleGraphicsRectangleOutlineGeometryReferenceFrameReferencePropertyremoveExtensionRequestRequestErrorEventRequestSchedulerRequestStateRequestTypeResourceRuntimeErrorSampledPositionPropertySampledPropertysampleTerrainsampleTerrainMostDetailedSceneSceneModeSceneTransformsScreenSpaceCameraControllerScreenSpaceEventHandlerScreenSpaceEventTypeshaderDefinesshaderMaximumIntersectionsLengthshaderUniformsShadowMapShadowModeShowGeometryInstanceAttributeSimon1994PlanetaryPositionsSimplePolylineGeometrySingleTileImageryProviderSkyAtmosphereSkyBoxSphereEmitterSphereGeometrySphereOutlineGeometrySphericalSplineSplitDirectionStencilFunctionStencilOperationSteppedSplineStripeMaterialPropertyStripeOrientationStyleExpressionsubdivideArraySunSunLightTaskProcessorTerrainDataTerrainProviderTextureMagnificationFilterTextureMinificationFilterTextureUniformTileAvailabilityTileCoordinatesImageryProviderTileDiscardPolicyTileMapServiceImageryProviderTileProviderErrorTilingSchemeTimeDynamicImageryTimeDynamicPointCloudTimeIntervalTimeIntervalCollectionTimeIntervalCollectionPositionPropertyTimeIntervalCollectionPropertyTimeStandardTransformsTranslationRotationScaleTridiagonalSystemSolverTrustedServersUniformSpecifierUniformTypeUrlTemplateImageryProviderVaryingTypeVelocityOrientationPropertyVelocityVectorPropertyVertexFormatVerticalOriginVideoSynchronizerViewportQuadVisibilityVisualizerVoxelPrimitiveVoxelProviderVoxelShapeTypeVRTheWorldTerrainProviderWallGeometryWallGeometryUpdaterWallGraphicsWallOutlineGeometryWebGLConstantsWebGLOptionsWebMapServiceImageryProviderWebMapTileServiceImageryProviderWebMercatorProjectionWebMercatorTilingSchemeWindingOrderwriteTextToCanvasAnimationAnimationViewModelBaseLayerPickerBaseLayerPickerViewModelCesium3DTilesInspectorCesium3DTilesInspectorViewModelCesiumInspectorCesiumInspectorViewModelClockViewModelCommandcreateCommandFullscreenButtonFullscreenButtonViewModelGeocoderGeocoderViewModelHomeButtonHomeButtonViewModelInfoBoxInfoBoxViewModelNavigationHelpButtonNavigationHelpButtonViewModelPerformanceWatchdogPerformanceWatchdogViewModelProjectionPickerProjectionPickerViewModelProviderViewModelSceneModePickerSceneModePickerViewModelSelectionIndicatorSelectionIndicatorViewModelSvgPathBindingHandlerTimelineToggleButtonViewModelViewerviewerCesium3DTilesInspectorMixinviewerCesiumInspectorMixinviewerDragDropMixinviewerPerformanceWatchdogMixinviewerVoxelInspectorMixinVoxelInspectorVoxelInspectorViewModelVRButtonVRButtonViewModel

Particle

在Cesium中,粒子是表示各种效果,如火焰,爆炸等的一种强大的工具。粒子是一个模拟小颗粒的视觉效果,它们可以用于模拟包括烟,灰烬,火焰等在内的各种效果。

粒子系统由粒子发射器和一些基本的属性组成,如粒子的颜色,尺寸和寿命。通过修改粒子的属性,您可以创建各种不同的效果。

在Cesium的粒子系统中,每个粒子都是一个PointPrimitive实例,并且可以具有自己的生命周期,位置和其他属性。添加和删除粒子时,它们会动态地更新场景。

创建粒子

为了创建一个粒子系统,您需要将Cesium.ParticleSystem实例化,并将其添加到场景中。

var particleSystem = new Cesium.ParticleSystem(scene.context);
scene.primitives.add(particleSystem);

上述代码使用WebGL上下文(scene.context)创建了一个粒子系统,并将其添加到场景中。现在您可以使用particleSystem对象指定粒子的属性,如image(粒子的图片),startColor(粒子的初始颜色),endColor(粒子的结束颜色),lifetime(粒子的寿命),speed(粒子的速度)等。

现在,让我们来创建一个简单的、具有200个粒子的粒子系统,并设置一些基本属性。

var particleSystem = new Cesium.ParticleSystem(scene.context);
particleSystem.image = '/path/to/image.png';  // 设置粒子的图片
particleSystem.startColor = new Cesium.Color(1.0, 1.0, 1.0, 1.0);  // 设置粒子的初始颜色
particleSystem.endColor = new Cesium.Color(1.0, 1.0, 1.0, 0.0);  // 设置粒子的结束颜色
particleSystem.lifetime = 20.0;  // 设置粒子的寿命
particleSystem.speed = 100.0;  // 设置粒子的速度

var emitterModelMatrix = Cesium.Matrix4.IDENTITY;
particleSystem.addEmitter({
  emissionRate : 10.0,
  emitterModelMatrix : emitterModelMatrix,
  burst : false,
  loop : true,
  lifetime : 20,
  maxParticles : 200
});

上述代码创建了一个具有200个粒子的粒子系统,并设置了一些基本属性。该粒子系统使用/path/to/image.png作为粒子的图片,将粒子的初始颜色设置为白色(alpha值为1.0),将粒子的结束颜色设置为透明的白色(alpha值为0.0),将粒子的寿命设置为20秒,并将粒子的速度设置为100。此外,该粒子系统使用循环发射器,每秒发射10个粒子。

注意,上述代码创建了一个发射器并将其添加到粒子系统中。发射器负责发射粒子,并具有自己的属性,如粒子的发射速率,发射的最大粒子数,发射器的位置,旋转等。

现在,您已经创建了一个简单的粒子系统,让我们来看一些其他的粒子系统属性。

粒子系统属性

在Cesium中,粒子系统具有许多可配置的属性,下面我们将介绍其中的一些。

image

image属性用于设置粒子的图片。这可以是一个URL,表示粒子的图像文件的路径(注意,该文件必须可访问),也可以是一个Image对象。

particleSystem.image = '/path/to/image.png';

startColor

startColor属性用于设置粒子的初始颜色。

particleSystem.startColor = new Cesium.Color(1.0, 1.0, 1.0, 1.0);

endColor

endColor属性用于设置粒子的结束颜色。

particleSystem.endColor = new Cesium.Color(1.0, 1.0, 1.0, 0.0);

lifetime

lifetime属性用于设置粒子的寿命,以秒为单位。

particleSystem.lifetime = 20.0;

speed

speed属性用于设置粒子的速度,以米/秒为单位。

particleSystem.speed = 100.0;

size

size属性用于设置粒子的大小。

particleSystem.size = 10.0;

emitterModelMatrix

emitterModelMatrix属性用于设置发射器的模型矩阵。通过修改发射器的模型矩阵,您可以将发射器放置在场景中的任何位置。

var emitterModelMatrix = Cesium.Matrix4.IDENTITY;
particleSystem.addEmitter({
  ...
  emitterModelMatrix : emitterModelMatrix,
  ...
});

burst

burst属性用于指定粒子是否一次性发射所有颗粒,还是在其生命周期内持续发射。

particleSystem.burst = true;

loop

loop属性用于指定粒子是否循环。如果为true,则粒子将持续发射和消失,直到将其删除。

particleSystem.loop = true;

updateCallback

updateCallback属性用于设置粒子的自定义更新函数。在每个模拟步骤中,将调用该函数以更新粒子的状态。更多关于自定义更新函数的信息请参考Cesium文档。

particleSystem.updateCallback = function(particle, dt) {
  ...
};

添加和删除粒子

要添加粒子,您必须调用addParticle方法,并将需要的粒子属性传递给它。例如,下面的代码将添加200个粒子,并将它们放置在场景的随机位置。

for (var i = 0; i < 200; ++i) {
  particleSystem.addParticle({
    position : new Cesium.Cartesian3(Math.random() * 100.0 - 50.0,
                                     Math.random() * 100.0 - 50.0,
                                     Math.random() * 100.0 - 50.0),
    velocity : new Cesium.Cartesian3(Math.random() * 2.0 - 1.0,
                                     Math.random() * 2.0 - 1.0,
                                     Math.random() * 2.0 - 1.0),
    life : 5.0,
    size : 10.0,
    color : new Cesium.Color(1.0, 1.0, 1.0, 1.0)
  });
}

在上述代码中,addParticle方法接受一个包含粒子属性的对象,如粒子的位置,速度,寿命,大小和颜色。添加的粒子将在场景中立即出现,并在其生命周期内存在。

要删除粒子,您可以使用removeAllParticles方法删除所有粒子,或者使用removeParticle方法删除单个粒子。

particleSystem.removeAllParticles();  // 删除所有粒子

particleSystem.removeParticle(particle);  // 删除某个粒子

总结

粒子是一个强大的工具,可以用来模拟各种效果,如火焰,爆炸等。在Cesium中,粒子系统由粒子发射器和一些基本的属性组成,如粒子的颜色,尺寸和寿命。通过修改这些属性,您可以创建各种不同的效果。在Cesium中,每个粒子都是一个PointPrimitive实例,并具有自己的生命周期,位置和其他属性。要添加或删除粒子,您可以使用相关的方法。总之,粒子是一个非常有用的工具,可以用来创建真实的,感性的场景,为您的场景增加视觉上的吸引力。