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

听闻余生的旋律

已于 2024-02-22 09:18:57 修改

阅读量1.1k

点赞数 11

分类专栏： cesium 水利文章标签：材质前端虚拟现实

于 2024-02-22 09:13:34 首次发布

本文链接：https://blog.csdn.net/qq_35956444/article/details/136224489

版权

cesium 同时被 2 个专栏收录

7 篇文章 2 订阅

订阅专栏

水利

1 篇文章 0 订阅

订阅专栏

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