cesium动态水面

最新推荐文章于 2025-03-17 13:03:20 发布

A873054267

最新推荐文章于 2025-03-17 13:03:20 发布

阅读量3.2k

点赞数 1

分类专栏： cesium

本文链接：https://blog.youkuaiyun.com/A873054267/article/details/104037564

版权

cesium 专栏收录该内容

78 篇文章

订阅专栏

原文：

https://blog.youkuaiyun.com/qq_31709249/article/details/81303291

使用图片

实现效果：

实现原理：

primitive面+水面材质

由此demo可以学习到一种动态材质的制作方法

uniform参数说明：

原文有许多冗余代码，去掉方便看到核心

//河道关键点数组
var River1Point =[
    115.5985634205044,32.43079913513041,
    116.5985634205044,32.43079913513041,
    116.5985634205044,33.43079913513041,
    115.5985634205044,33.43079913513041,

];
//河道1多边形
var polygon1 = new Cesium.PolygonGeometry({
    polygonHierarchy : new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(River1Point)),
    extrudedHeight:0,
    height:0,
    vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
});
var River1=new Cesium.Primitive({
    geometryInstances : new Cesium.GeometryInstance({
        geometry :polygon1
    }),
    appearance : new Cesium.EllipsoidSurfaceAppearance({
        aboveGround : true
    }),
    show : true
});
var  River1_Material =new Cesium.Material({
    fabric : {
        type : 'Water',
        uniforms : {
            normalMap:'./waterNormals.jpg',
            frequency: 100.0,
            animationSpeed: 0.01,
            amplitude: 10.0
        }
    }
});
var scene = viewer.scene;
River1.appearance.material = River1_Material;
scene.primitives.add(River1);           //添加到场景

viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(  115.5985634205044,32.43079913513041, 300000)
});