<!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8" /> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Make the application on mobile take up the full browser screen and disable user scaling. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <title>Cesium Viewer</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="CesiumViewer.css" media="screen" /> </head> <body style="background: #000"> <div id="cesiumContainer" class="fullWindow"></div> <!-- <div id="loadingIndicator" class="loadingIndicator"></div> --> <!-- <script src="CesiumViewer.js" type="module"></script> --> </body> <script src="../../Build/Cesium/Cesium.js"></script> <script> var viewer = new Cesium.Viewer("cesiumContainer"); //多边形，可以具有空洞或者拉伸一定的高度 function createPrimitives(scene) { var primitive = new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy(Cesium .Cartesian3.fromDegreesArray([ 130.0, 30.0, 150.0, 30.0, 150.0, 10.0, 130.0, 10.0 ]) ), ///extrudedHeight:10000, height: 5, vertexFormat: Cesium.EllipsoidSurfaceAppearance .VERTEX_FORMAT }) }), appearance: new Cesium.EllipsoidSurfaceAppearance({ aboveGround: false }) // ,appearance: new Cesium.EllipsoidSurfaceAppearance({ // material: Cesium.Material.fromType('Checkerboard') // // }) // appearance: new Cesium.PerInstanceColorAppearance() }); return primitive } function drawByLocal() { var scene = viewer.scene; //---------------水体----------------------------------------------------------- var orangePolygon = viewer.entities.add({ name: 'Orange polygon with per-position heights and outline', polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([ 130.0, 30.0, 1110, 150.0, 30.0, 1110, 150.0, 10.0, 1110, 130.0, 10.0, 1110 ]), extrudedHeight: 0, perPositionHeight: true, fill: true, // material : Cesium.Color.AQUA.withAlpha(0.5), outline: true, outlineColor: Cesium.Color.AQUA }, }); viewer.zoomTo(viewer.entities); //---------------------------水面--------------------------------------------- var primitive = createPrimitives(scene); primitive.appearance.material = new Cesium.Material({ fabric: { type: 'Water', uniforms: { // specularMap: "img/waterNormals.jpg", normalMap: "img/waterNs.png", frequency: 100.0, animationSpeed: 0.01, amplitude: 1.0, }, } }); scene.primitives.add(primitive); // viewer.entities.removeAll(); } //绘制水面波浪效果 function drawWater() { viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(140, 20, 6000000.0), orientation: { heading: Cesium.Math.toRadians(0.0), //默认朝北0度，顺时针方向，东是90度 pitch: Cesium.Math.toRadians(-90), //默认朝下看-90,0为水平看， roll: Cesium.Math.toRadians(0) //默认0 } }); var waterFace = [ 130.0, 30.0, 0, 150.0, 30.0, 0, 150.0, 10.0, 0, 130.0, 10.0, 0 ]; var waterPrimitive = new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArrayHeights(waterFace)), }) }), // 可以设置内置的水面shader appearance: new Cesium.EllipsoidSurfaceAppearance({ aboveGround: false }) }); waterPrimitive.appearance.material = new Cesium.Material({ fabric: { type: 'Water', uniforms: { normalMap: "http://127.0.0.1:2141/Apps/CesiumViewer/img/waterNs.png", frequency: 100.0, animationSpeed: 0.01, amplitude: 1.0 } } }); waterPrimitive.appearance.fragmentShaderSource = 'varying vec3 v_positionMC; varying vec3 v_positionEC; varying vec2 v_st; void main() { czm_materialInput materialInput; vec3 normalEC = normalize(czm_normal3D * czm_geodeticSurfaceNormal(v_positionMC, vec3(0.0), vec3(1.0))); #ifdef FACE_FORWARD normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC); #endif materialInput.s = v_st.s; materialInput.st = v_st; materialInput.str = vec3(v_st, 0.0); materialInput.normalEC = normalEC; materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, materialInput.normalEC); vec3 positionToEyeEC = -v_positionEC; materialInput.positionToEyeEC = positionToEyeEC; czm_material material = czm_getMaterial(materialInput); #ifdef FLAT gl_FragColor = vec4(material.diffuse + material.emission, material.alpha); #else gl_FragColor = czm_phong(normalize(positionToEyeEC), material); gl_FragColor.a=0.5; #endif } ' //重写shader，修改水面的透明度 viewer.scene.primitives.add(waterPrimitive); } function drawWater2() { viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(140, 20, 6000000.0), orientation: { heading: Cesium.Math.toRadians(0.0), //默认朝北0度，顺时针方向，东是90度 pitch: Cesium.Math.toRadians(-90), //默认朝下看-90,0为水平看， roll: Cesium.Math.toRadians(0) //默认0 } }); viewer.scene.globe.depthTestAgainstTerrain = false; var waterFace = [ 130.0, 30.0, 150.0, 30.0, 150.0, 10.0, 130.0, 10.0 ]; var polygon = new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray(waterFace) ) }); var geometry = Cesium.PolygonGeometry.createGeometry(polygon); var waterPrimitive = new Cesium.Primitive({ show: true, // 默认隐藏 allowPicking: false, geometryInstances: new Cesium.GeometryInstance({ geometry: geometry }) }) waterPrimitive.appearance = new Cesium.EllipsoidSurfaceAppearance({ // aboveGround: false }); waterPrimitive.appearance.material = new Cesium.Material({ fabric: { type: 'Water', uniforms: { normalMap: "http://127.0.0.1:2141/Apps/CesiumViewer/img/waterNs.png", frequency: 100.0, animationSpeed: 0.01, amplitude: 10.0 } } }) waterPrimitive.appearance.fragmentShaderSource = 'varying vec3 v_positionMC; varying vec3 v_positionEC; varying vec2 v_st; void main() { czm_materialInput materialInput; vec3 normalEC = normalize(czm_normal3D * czm_geodeticSurfaceNormal(v_positionMC, vec3(0.0), vec3(1.0))); #ifdef FACE_FORWARD normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC); #endif materialInput.s = v_st.s; materialInput.st = v_st; materialInput.str = vec3(v_st, 0.0); materialInput.normalEC = normalEC; materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, materialInput.normalEC); vec3 positionToEyeEC = -v_positionEC; materialInput.positionToEyeEC = positionToEyeEC; czm_material material = czm_getMaterial(materialInput); #ifdef FLAT gl_FragColor = vec4(material.diffuse + material.emission, material.alpha); #else gl_FragColor = czm_phong(normalize(positionToEyeEC), material); gl_FragColor.a=0.5; #endif } ' //重写shader，修改水面的透明度 viewer.scene.primitives.add(waterPrimitive); } function drawWaterInstance() { var rectangleInstance = new Cesium.GeometryInstance({ geometry: new Cesium.RectangleGeometry({ rectangle: Cesium.Rectangle.fromDegrees(-140.0, 30.0, -100.0, 40.0), vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT }), id: 'rectangle', attributes: { color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5) } }); var ellipsoidInstance = new Cesium.GeometryInstance({ geometry: new Cesium.EllipsoidGeometry({ radii: new Cesium.Cartesian3(500000.0, 500000.0, 1000000.0), vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL }), modelMatrix: Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(-95.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 500000.0), new Cesium.Matrix4()), id: 'ellipsoid', attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA) } }); viewer.scene.primitives.add(new Cesium.Primitive({ geometryInstances: [rectangleInstance, ellipsoidInstance], appearance: new Cesium.PerInstanceColorAppearance() })); } setTimeout(function() { // drawByLocal() // drawWater(); drawWater2(); // drawWaterInstance(); }, 3000) </script> </html>