Cesium 全网最好的水面材质效果

Cesium 水面材质效果

支持颜色、波纹大小、透明度、反射率、扭曲、高度的各种参数调整

法线图

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>水面倒影</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />

    <!-- <script src="water.js"></script> -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map" style="width: 100%; height: 100%"></div>
  </body>
</html>
<script type="module">
  import WaterPrimitive from "./WaterPrimitive.js";
  import { GUI } from "./lil-gui.module.min.js";

  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzMGM5NjQ3OC1iNzI5LTQ1OGUtOGU4NC1lNjA1OTQ0OWFmYWMiLCJpZCI6NDU4NzgsImlhdCI6MTY2Nzk2MTM2Mn0.whkwTff2Jku7dVOpt5V4zrTTW8m-BV1fJQDeBsbmZn8";

  //设置全局对象
  var viewer = new Cesium.Viewer("map");

  const positions = [
    Cesium.Cartographic.fromDegrees(
      -75.59967741159785,
      40.04091766662355,
      76.37856662343563
    ),
    Cesium.Cartographic.fromDegrees(
      -75.59955207631664,
      40.036827420667116,
      71.6963743893841
    ),
    Cesium.Cartographic.fromDegrees(
      -75.59376378325359,
      40.0367060679407,
      83.98039248519758
    ),
    Cesium.Cartographic.fromDegrees(
      -75.5936186712503,
      40.03959922674249,
      82.13316846253008
    ),
    Cesium.Cartographic.fromDegrees(
      -75.59550520685805,
      40.04082628776817,
      84.00794582002823
    ),
  ];
  const bbb = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      url: Cesium.IonResource.fromAssetId(1728517),
    })
  );

  viewer.flyTo(bbb);

  const aaa = new WaterPrimitive({
    scene: viewer.scene,
    positions: positions,
    height: 81,
    rippleSize: 100,
  });

  
const gui2 = new GUI();
const waterParams = {
  波纹大小: 50.0,
  透明度: 0.9,
  反射率: 0.3,
  扭曲: 3.7,
  高度: 81,
};
function waterParamsUpdate() {
  aaa.rippleSize = waterParams['波纹大小'];
  aaa.waterAlpha = waterParams['透明度'];
  aaa.reflectivity = waterParams['反射率'];
  aaa.distortionScale = waterParams['扭曲'];
  aaa.height = waterParams['高度'];
}
gui2
  .add(waterParams, "波纹大小")
  .min(0)
  .max(300)
  .onChange(waterParamsUpdate);
gui2
  .add(waterParams, "透明度")
  .min(0)
  .max(1)
  .onChange(waterParamsUpdate);
gui2
  .add(waterParams, "反射率")
  .min(0)
  .max(1)
  .onChange(waterParamsUpdate);
gui2
  .add(waterParams, "扭曲")
  .min(0)
  .max(8)
  .onChange(waterParamsUpdate);
  gui2
  .add(waterParams, "高度")
  .min(70)
  .max(100)
  .onChange(waterParamsUpdate);
</script>

着色器代码

可联系 QQ: 297467136

  • 10
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现大量水面淹没效果,您可以使用Cesium中的ClippingPlaneCollection和Primitive组合来实现。以下是一个示例代码: ```javascript // 创建PrimitiveCollection和ClippingPlaneCollection对象 var primitives = new Cesium.PrimitiveCollection(); var clippingPlanes = new Cesium.ClippingPlaneCollection({ planes : [] }); // 将PrimitiveCollection添加到场景中 viewer.scene.primitives.add(primitives); // 加载GeoJSON数据 Cesium.GeoJsonDataSource.load('./data.geojson').then(function(dataSource) { var entities = dataSource.entities.values; var height = 0.0; // 循环遍历每个实体并设置面样式 for (var i = 0; i < entities.length; i++) { var entity = entities[i]; // 如果是水面实体,将其添加到ClippingPlaneCollection中 if (entity.properties.type == "water") { var plane = new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, -entity.properties.height); clippingPlanes.add(plane); height = height + entity.properties.height; } // 如果是陆地实体,将其添加到PrimitiveCollection中 else { var primitive = new Cesium.Primitive({ geometryInstances : new Cesium.GeometryInstance({ geometry : new Cesium.PolygonGeometry({ polygonHierarchy : new Cesium.PolygonHierarchy(entity.polygon), height : entity.properties.height, extrudedHeight : entity.properties.extrudedHeight, vertexFormat : Cesium.VertexFormat.POSITION_AND_NORMAL, stRotation: entity.properties.stRotation }), attributes : { color : Cesium.ColorGeometryInstanceAttribute.fromColor(entity.properties.color) } }), appearance : new Cesium.PerInstanceColorAppearance({ closed : true }) }); primitives.add(primitive); } } // 设置ClippingPlaneCollection viewer.scene.globe.clippingPlanes = clippingPlanes; viewer.scene.globe.depthTestAgainstTerrain = true; viewer.camera.setView({ destination : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, height + 1000), orientation : { heading : 0.0, pitch : Cesium.Math.toRadians(-90.0), roll : 0.0 } }); }); ``` 其中,我们首先创建一个PrimitiveCollection和ClippingPlaneCollection对象来分别存储陆地和水面实体。然后,我们遍历每个实体,如果是水面实体,则将其高度作为一个ClippingPlane添加到ClippingPlaneCollection中。如果是陆地实体,则将其作为一个Primitive添加到PrimitiveCollection中。最后,我们将ClippingPlaneCollection设置到场景的globe中,这样就可以实现水面淹没效果了。 需要注意的是,由于大量水面的存在,可能会导致渲染性能下降。因此,建议使用WebGL调试工具来优化代码和性能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值