cesium 流动纹理（喷水测试）

最新推荐文章于 2024-08-09 15:26:12 发布

你到底会不会

最新推荐文章于 2024-08-09 15:26:12 发布

阅读量700

点赞数

分类专栏： cesium 文章标签：经验分享

本文链接：https://blog.csdn.net/qq_40892406/article/details/121158290

版权

本文分享了如何使用Cesium创建流动纹理的效果，以实现喷水的动态视觉展示。通过代码分析和实例图片(img.png)，揭示了Cesium在三维场景中处理动态纹理的技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <title>流动纹理（喷水测试）</title>
  <script src="../Cesium/Cesium.js"></script>
  <link href="../Cesium/Widgets/widgets.css" rel="stylesheet" />
</head>
<body>
<div id="cesiumContainer"  ></div>
<script>
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZWVhNjZkZS0yZDgzLTRhZGEtOGJkYS1iMWUxNmM3NzNmNmUiLCJpZCI6NjM1MzEsImlhdCI6MTYyODIyNzYyMn0.Swb3G8ZboOXzXXiMLjEXIErFjXXZmbZrFIKXCxtIxnQ';
  var viewer = new Cesium.Viewer('cesiumContainer');
  //设置初始位置
  viewer.camera.setView({
   
    destination: Cesium.Cartesian3.fromDegrees(117.08259, 36.87161, 200)
  });
//核心代码---------------------------------------------------------------------------------------------------------------------------
  /*
    流纹纹理线
    color 颜色
    duration 持续时间 毫秒
 */
  //-----------------流动纹理材质（开始）--------------------------------------------------------------------------------------------------------------
  function PolylineTrailLinkMaterialProperty(color, duration) {
   
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = color;
    this.duration = duration;
    this._time = (new Date()).getTime();
  }
  Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
   
    isConstant: {
   
      get: function () {
   
        return false;
      }
    },
    definitionChanged: {
   
      get: function () {
   
        return this._definitionChanged;
      }
    },
    color: Cesium.createPropertyDescriptor('color')
  });
  PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
   
    return 'PolylineTrailLink';
  }
  PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result<