Cesium|xt3d动态水面

最新推荐文章于 2024-04-07 19:58:21 发布
最新推荐文章于 2024-04-07 19:58:21 发布
阅读量685 收藏 1
点赞数 1
文章标签： cesium xt3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xietao20/article/details/120000691
版权

Cesium|xt3d动态水面

效果

在这里插入图片描述

代码

 <!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cesium|xt3d</title>
    <!-- 引入Cesium -->
    <script src="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Widgets/widgets.css">

    <!--  引入xt3d -->
    <script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script>
    <style>
        html,
        body,
        #map3d {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body>
    <div id="map3d"></div>
    <script>
        let xt3dInit = {
            init(el) {
                this.initViewer(el);
                this.load3dtiles();
                this.addHeliuRegion();
                this.setView();
            },

            //初始化viewer
            initViewer(el) {
                this.viewer = new Cesium.Viewer(el, {
                    infoBox: false,
                    selectionIndicator: false,
                    navigation: false,
                    animation: false,
                    shouldAnimate: false,
                    timeline: false,
                    baseLayerPicker: false,
                    geocoder: false,
                    homeButton: false,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    imageryProvider: new Cesium.UrlTemplateImageryProvider({
                        url: "https://t7.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=tdtTk"
                    }),
                });

            },

            //添加河流水面
            addHeliuRegion() {
                const positions = [{
                    x: -1573646.574385626,
                    y: 5327862.998114007,
                    z: 3122882.0126497806
                }, {
                    x: -1573674.4927850217,
                    y: 5327841.079208016,
                    z: 3122905.0853668815
                }, {
                    x: -1573697.300247773,
                    y: 5327824.154858261,
                    z: 3122922.2296030447
                }, {
                    x: -1573723.2566743596,
                    y: 5327804.220696046,
                    z: 3122942.8339925
                }, {
                    x: -1573758.6792294222,
                    y: 5327780.238635048,
                    z: 3122965.933496034
                }, {
                    x: -1573782.7955957302,
                    y: 5327764.660988683,
                    z: 3122980.284263632
                }, {
                    x: -1573802.0711376078,
                    y: 5327753.162159477,
                    z: 3122989.961597303
                }, {
                    x: -1573818.2256981286,
                    y: 5327743.702623943,
                    z: 3122997.8881463786
                }, {
                    x: -1573836.390515118,
                    y: 5327730.24093674,
                    z: 3123011.720182871
                }, {
                    x: -1573853.867715565,
                    y: 5327716.870771106,
                    z: 3123025.672760408
                }, {
                    x: -1573881.363708308,
                    y: 5327696.189850067,
                    z: 3123046.939113487
                }, {
                    x: -1573917.6152507644,
                    y: 5327669.018123424,
                    z: 3123074.966586196
                }, {
                    x: -1573926.9820208312,
                    y: 5327662.461066732,
                    z: 3123081.351110614
                }, {
                    x: -1573938.1098204239,
                    y: 5327654.702930395,
                    z: 3123088.759295021
                }, {
                    x: -1573954.0176107218,
                    y: 5327644.379581239,
                    z: 3123098.291348635
                }, {
                    x: -1573964.7512216873,
                    y: 5327635.925342955,
                    z: 3123104.6748915347
                }, {
                    x: -1573984.9669868168,
                    y: 5327619.909903474,
                    z: 3123116.289125795
                }, {
                    x: -1573968.8319637552,
                    y: 5327616.4065885795,
                    z: 3123130.7026131423
                }, {
                    x: -1573944.0563865206,
                    y: 5327639.361826853,
                    z: 3123111.33203873
                }, {
                    x: -1573927.7554437916,
                    y: 5327650.519985489,
                    z: 3123100.7197816116
                }, {
                    x: -1573904.7711183839,
                    y: 5327666.247100797,
                    z: 3123085.6995552983
                }, {
                    x: -1573900.0844216363,
                    y: 5327669.12337478,
                    z: 3123083.13969443
                }, {
                    x: -1573882.656988854,
                    y: 5327682.386903352,
                    z: 3123069.5155642116
                }, {
                    x: -1573852.8168025815,
                    y: 5327705.006477089,
                    z: 3123045.985478789
                }, {
                    x: -1573826.1044827306,
                    y: 5327724.060820944,
                    z: 3123027.076716561
                }, {
                    x: -1573797.9909229,
                    y: 5327743.687548958,
                    z: 3123008.816503377
                }, {
                    x: -1573768.141830067,
                    y: 5327762.834272328,
                    z: 3122990.471647622
                }, {
                    x: -1573740.1560181207,
                    y: 5327780.735847701,
                    z: 3122974.151395415
                }, {
                    x: -1573710.2984952328,
                    y: 5327801.620498089,
                    z: 3122953.746622961
                }, {
                    x: -1573666.9494654608,
                    y: 5327834.72201891,
                    z: 3122919.660895541
                }, {
                    x: -1573633.8838709379,
                    y: 5327860.265334742,
                    z: 3122893.1117008366
                }]
                this.addWaterRegion(positions);
            },


            //添加水面
            addWaterRegion(positions) {
                let waterPrimitive = new xt3d.PolygonObject.WaterPrimitive(positions, {
                    baseWaterColor: Cesium.Color.AQUA.withAlpha(0.3),
                    normalMap: '/data.xt3d.cn/assets/images/polygon/waterNormalsSmall.jpg',
                    frequency: 1000.0,
                    animationSpeed: 0.03,
                    amplitude: 10.0,
                    specularIntensity: 5,
                });
                this.viewer.scene.primitives.add(waterPrimitive); //添加到场景
                // this.viewer.scene.primitives.remove(waterPrimitive); //从场景移除 
            },

            //加载3dtiles数据
            load3dtiles() {
                var tileset = this.viewer.scene.primitives.add(
                    new Cesium.Cesium3DTileset({
                        url: "http://www.xt3d.cn/data/offset_3dtiles/tileset.json",
                    })
                );

                tileset.readyPromise
                    .then(tileset => {
                        xt3d.TilesetPlugin.setTilesetHeight(tileset, 55);
                    })
                    .otherwise(function(error) {
                        console.log(error);
                    });
            },

            //设置视角
            setView() {
                this.viewer.scene.camera.setView({
                    duration: 1,
                    destination: {
                        x: -1573619.6471639725,
                        y: 5328105.434513959,
                        z: 3123157.3345488473
                    },
                    orientation: {
                        heading: 1.769495648542554,
                        pitch: -0.885008929765446,
                        roll: 0.004446235155041833
                    }
                });
            },

            destroy() {
                this.viewer.entities.removeAll();
                this.viewer.imageryLayers.removeAll(true);
                this.viewer.destroy();
            }
        }

        xt3dInit.init("map3d");
    </script>
</body>

</html>

预览地址

xt3d 在线预览地址

xt3d
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Cesium：动态水体材质
席木木的博客
11-17 815
Cesium：动态水体材质示例
【cesium】水面动态上涨下跌且带有动态水面材质
weixin_39823367的博客
06-11 922
首先感谢该文章作者提供的代码 本文是在其基础上做了部分完善，由于entity没有水面动态材质，primitive的exhight无法使用property的形式进行改变，因此独立出该primitive 将exhight属性抛出 可以动态修改 原文中的水面上涨是通过类外部的函数执行的，我添加了grow函数，进一步让代码封装 独立化 代码： 效果图： 后记：我对封装的理解可能不够 可以留言一起改进22.6.11 6:39 .........
cesium-添加水面动态贴图效果
孙霸天的专栏
01-21 3355
cesium-添加水面动态贴图效果 介绍 真实的水面是动态的，这里可以使用primitives方法来实现效果 核心代码 /** * * @param {*} targetHeight 目标高度 * @param {*} areaCoor 范围坐标 */ drawWater(targetHeight, areaCoor) {
cesium 实现流动效果(河流具有流向的流动效果)
最新发布
m0_67531029的博客
04-07 1181
一、创建PolylineTrailLinkMaterialProperty.js文件。效果：粒子流动、河流流动、河面具有流向的流动。图片资源：三个随意取用其一。a、在原生html里面使用。b、在vue3中使用。
cesium实现水闸放水以及水面升降效果
m0_57478867的博客
02-02 952
用mars3d实现了开闸 水闸放水，水面升降以及控制流速等效果
cesium动态水面
A873054267的博客
01-19 3008
原文： https://blog.csdn.net/qq_31709249/article/details/81303291 使用图片 实现效果： 实现原理： primitive面+水面材质 由此demo可以学习到一种动态材质的制作方法 uniform参数说明： 原文有许多冗余代码，去掉方便看到核心 //河道关键点数组 var River1Point =[ ...
4.Cesium通过GroundPrimitive实现流动水面效果
skr_Rany的博客
01-20 1843
这里采用GroundPrimitive接口，如果采用Primitive接口，随地图放大缩小会出现确实的情况 this.waterPrimitive = new Cesium.GroundPrimitive({ show: true, // 默认隐藏 allowPicking: false, geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.Polygo
62.（cesium篇）cesium水面波纹（动态水面）.zip
12-03
在本教程中，我们将深入探讨如何使用Cesium创建动态水面波纹效果。Cesium是一个强大的开源JavaScript库，专为在Web上构建3D地球应用程序而设计。它利用 WebGL 技术，提供高度交互的地理空间可视化功能。水面波纹效果...
viewShed3d-cesium.js
07-28
var viewshed = new Cesium.ViewShed3D(viewer, { horizontalAngle: Number(viewModel.horizontalAngle), verticalAngle: Number(viewModel.verticalAngle), distance: Number(viewModel.distance), calback: ...
Cesium 单独加载3D模型
07-17
在本文中，我们将深入探讨如何使用Cesium框架来单独加载3D模型，特别是不包含地球背景的场景。Cesium是一个强大的开源JavaScript库，专为在Web浏览器中展示高精度的3D地理空间数据而设计。它广泛应用于地理信息系统...
cesium单独加载3d模型.txt
11-16
cesium单独加载3d模型
63.（cesium篇）cesium河流流水.zip
12-03
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/121697011
cesium河流流水（cesium篇.63）
地图之家
12-03 3040
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/Cesium/Cesium.js"></script> <link rel="st
基于反射和折射离屏渲染的水面特效在Cesium中的实现
行走的过客
03-24 1146
水面特效。
用javascript代码编写cesium动态水面
weixin_42613017的博客
02-13 126
Cesium是一款强大的地球浏览器框架，支持用JavaScript编写动态水面。 下面是一个简单的例子，该代码将创建一个圆形水面： var viewer = new Cesium.Viewer('cesiumContainer'); var entity = viewer.entities.add({ name : 'Water surface', position : Cesiu...
GLSL实现水面倒影
yangchuankai's blog
12-24 5679
使用两相机，一个master相机， 主要负责场景的渲染， 另一个rtt相机， 和master相机建立为镜面投影相机，用于在和master相机的纵向镜像投影，从而获取master投影场景的逆场景， 渲染到纹理，进行镜面贴图，实现水面的倒影效果。 效果如图： 实现代码(需要一张天空背景图， 一张water法线图)： vertex shader： varying ve
倾斜摄影模型压平，裁剪，遮罩，水面倒影，大雪覆盖，地下管线，智慧乡村
qq_32037427的博客
05-13 2289
**倾斜摄影模型压平 关于倾斜摄影模型压平，裁剪，遮罩，有需要的私聊联系 1.倾斜摄影模型裁剪 2.倾斜摄影模型遮罩 3.倾斜摄影模型压平
Cesium反射
xt3d的博客
07-20 2038
Cesium反射
基于 React hooks + Typescript + Cesium 实现绘制透明动态水面
jiegiser博客
01-08 615
文章目录效果截图功能介绍实现思路实现步骤自定义 useDrawWaterPrimitive hooksuseDrawWaterPrimitive 使用 效果截图 先上截图： 功能介绍 本例子基于 React hooks + Typescript + Cesium 实现绘制透明动态水面；通过自定义 hooks —— useDrawWaterPrimitive 进行绘制透明水面； 图层管理（√） dom 点扩散（√） 轨迹回放（√） 测量（√） 坐标拾取（√） 加载模型数据，拾取三维模型（√） geose
Cesium 动态水面
03-28
Cesium 动态水面是指使用 Cesium 框架实现的可以模拟动态水面效果的技术。这种技术可以让用户在 Cesium 地图上看到类似于真实水面的波动效果，从而增强地图的真实感和视觉效果。 实现 Cesium 动态水面的技术一般...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xt3d

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值