Cesium.js 让人困惑的代码 1

查看 Cesium的官方例子,《Particle System Tails.html》,其中有个地方让我困惑:

var forceFunction = function (options, iteration) {
          return function (particle, dt) {
            dt = Cesium.Math.clamp(dt, 0.0, 0.05);

            scratchCartesian3 = Cesium.Cartesian3.normalize(
              particle.position,
              new Cesium.Cartesian3()
            );
            scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(
              scratchCartesian3,
              -40.0 * dt,
              scratchCartesian3
            );

            scratchCartesian3 = Cesium.Cartesian3.add(
              particle.position,
              scratchCartesian3,
              scratchCartesian3
            );

            scratchCartographic = Cesium.Cartographic.fromCartesian(
              scratchCartesian3,
              Cesium.Ellipsoid.WGS84,
              scratchCartographic
            );

            var angle =
              (Cesium.Math.PI * 2.0 * iteration) / options.numberOfSystems;
            iteration += options.iterationOffset;
            scratchCartographic.longitude +=
              Math.cos(angle) * options.cartographicStep * 30.0 * dt;
            scratchCartographic.latitude +=
              Math.sin(angle) * options.cartographicStep * 30.0 * dt;

            particle.position = Cesium.Cartographic.toCartesian(
              scratchCartographic
            );
          };
        };

iteration 是number类型的变量,这样修改,真的可以吗?结果真的可以,应该是闭包的概念没弄清,一直以为这样改不了。

写个demo, 记录一下,验证一下

function foo(val, name) {
    return function () {
      console.log(name + ": " + val);
      val++;
    }
  }
  let a = 0, b = 1;
  let fooA = foo(a, 'a'), fooB = foo(b, 'b');
  fooA(), fooA(), fooA(), fooB(), fooB();
  console.log(a, b)

《Imagery Color To Alpha.html》也不是容易弄懂的,看了源码,才明白
ImageryLayer.js 的 colorToAlpha 和 colorToAlphaThreshold,两个属性的用法,
直接上代码:

GlobeSurfaceTileProvider.js

// Update color to alpha
      var colorToAlpha =
        uniformMapProperties.colorsToAlpha[numberOfDayTextures];
      if (!defined(colorToAlpha)) {
        colorToAlpha = uniformMapProperties.colorsToAlpha[
          numberOfDayTextures
        ] = new Cartesian4();
      }

      var hasColorToAlpha =
        defined(imageryLayer.colorToAlpha) &&
        imageryLayer.colorToAlphaThreshold > 0.0;
      applyColorToAlpha = applyColorToAlpha || hasColorToAlpha;

      if (hasColorToAlpha) {
        var color = imageryLayer.colorToAlpha;
        colorToAlpha.x = color.red;
        colorToAlpha.y = color.green;
        colorToAlpha.z = color.blue;
        colorToAlpha.w = imageryLayer.colorToAlphaThreshold;
      } else {
        colorToAlpha.w = -1.0;
      }

GlobeFS.glsl

#ifdef APPLY_COLOR_TO_ALPHA
    vec3 colorDiff = abs(color.rgb - colorToAlpha.rgb);
    colorDiff.r = max(max(colorDiff.r, colorDiff.g), colorDiff.b);
    alpha = czm_branchFreeTernary(colorDiff.r < colorToAlpha.a, 0.0, alpha);
#endif

branchFreeTernary.glsl

/**
 * Branchless ternary operator to be used when it's inexpensive to explicitly
 * evaluate both possibilities for a float expression.
 *
 * @name czm_branchFreeTernary
 * @glslFunction
 *
 * @param {bool} comparison A comparison statement
 * @param {float} a Value to return if the comparison is true.
 * @param {float} b Value to return if the comparison is false.
 *
 * @returns {float} equivalent of comparison ? a : b
 */
float czm_branchFreeTernary(bool comparison, float a, float b) {
    float useA = float(comparison);
    return a * useA + b * (1.0 - useA);
}

在例子《Imagery Color To Alpha.html》中,定义了两个影像图层,图层baseLayer在最下面,图层singleTileLayer在最上面,当colorToAlphaThreshold为 0,则singleTileLayer完全覆盖baseLayer;当colorToAlphaThreshold 为1,则singleTileLayer完全透明,不可见,只显示baseLayer.

baseLayer.colorToAlpha = new Cesium.Color(0.0, 0.016, 0.059); 也比较让人困惑,实际上大概是颜色 ‘#00040F’,就是说把它改为
baseLayer.colorToAlpha = new Cesium.Color(0.0, 0.0, 0.0);
运行效果几乎没有区别,还有两个地方值得改一下,看看效果

var viewModel = {
          threshold: baseLayer.colorToAlphaThreshold,
        };
        Cesium.knockout
          .getObservable(viewModel, "threshold")
          .subscribe(function (newValue) {
            baseLayer.colorToAlphaThreshold = parseFloat(
              viewModel.threshold
            );
          }); //Sandcastle_End

两个地方的 singleTileLayer 改为 baseLayer

three.js光效扫描 https://blog.csdn.net/a873054267/article/details/106747627
用three.js实现炫酷的城市扫光效果 https://blog.csdn.net/zhgu1992/article/details/104227100?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

使用Three.js的炫酷无限管道特效 https://blog.csdn.net/u012810867/article/details/78903977?utm_medium=distribute.pc_relevant.none-task-blog-title-9&spm=1001.2101.3001.4242
threejs 局部辉光 https://blog.csdn.net/u014452812/article/details/88722552
three.js流动线 https://blog.csdn.net/A873054267/article/details/106745434?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

关于Three.js实现智慧城市我实现的一些特效
https://blog.csdn.net/weixin_40184249/article/details/107566560?biz_id=102&utm_term=three%20%E6%B5%81%E5%8A%A8%E7%BA%BF&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-5-107566560&spm=1018.2118.3001.4187
https://www.zhihu.com/zvideo/1277995319629037568
three.js流动道路 (终于找到了)
https://blog.csdn.net/A873054267/article/details/107175103?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160092162619724836738585%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=160092162619724836738585&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_v2~rank_v25-10-107175103.first_rank_v2_rank_v25&utm_term=three+%E6%B5%81%E5%8A%A8%E7%BA%BF&spm=1018.2118.3001.4187

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值