Lighting【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Lighting.html&label=All

效果如下视频所示：

示例代码如下：

代码中用到的颜色值：

下面这种表示颜色的方法的各个颜色通道范围是0~1，要是测试该颜色，这里推荐一个网址：https://rgbcolorpicker.com/0-1 。

/**
 * ICRF: International Celestial Reference System,国际天球参考系。
 * 具体参考维基百科：https://en.wikipedia.org/wiki/International_Celestial_Reference_System_and_its_realizations
 * 
 * ECEF: 地心地固坐标系（Earth-Centered, Earth-Fixed，简称ECEF）简称地心坐标系，
 * 是一种以地心为原点的地固坐标系(也称地球坐标系)，也是属于笛卡儿坐标系的一种。
 * 原点 O (0,0,0)为地球质心，z 轴与地轴平行指向北极点，x 轴指向本初子午线与赤道的交点，
 * y 轴垂直于xOz平面(即东经90度与赤道的交点)构成右手坐标系。
 *  具体参考维基百科：https://en.wikipedia.org/wiki/Earth-centered,_Earth-fixed_coordinate_system
 */

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: true,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,
  baseLayerPicker: false,
  terrain: Cesium.Terrain.fromWorldTerrain({
    requestWaterMask: true,
    requestVertexNormals: true,
  }),
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const scene = viewer.scene;
scene.globe.enableLighting = true;

//一个坐标系转换矩阵ICRF到固定参考系(ECEF)暂存变量
const scratchIcrfToFixed = new Cesium.Matrix3();
const scratchMoonPosition = new Cesium.Cartesian3();
const scratchMoonDirection = new Cesium.Cartesian3();

/**
 * 该函数用于计算月球光照方向，这里用来模拟月光光源（moonLight）
 */
function getMoonDirection(result) {
  // 1.参数初始化
  result = Cesium.defined(result) ? result : new Cesium.Cartesian3();
  const icrfToFixed = scratchIcrfToFixed;
  const date = viewer.clock.currentTime;
  // 2.计算 ICRF 到固定参考系的转换矩阵
  if (
    !Cesium.defined(
      Cesium.Transforms.computeIcrfToFixedMatrix(date, icrfToFixed)
    )
  ) {
    Cesium.Transforms.computeTemeToPseudoFixedMatrix(date, icrfToFixed);
  }

  // 3.计算月球位置
  const moonPosition =
    Cesium.Simon1994PlanetaryPositions.computeMoonPositionInEarthInertialFrame(
      date,
      scratchMoonPosition
    );
  // 4.转换月球位置到固定参考系
  Cesium.Matrix3.multiplyByVector(icrfToFixed, moonPosition, moonPosition);
  // 5. 归一化得到方向向量
  const moonDirection = Cesium.Cartesian3.normalize(
    moonPosition,
    scratchMoonDirection
  );
  // 6. 反转方向并返回
  return Cesium.Cartesian3.negate(moonDirection, result);
}

// directional light:翻译为定向光
/**
 * Cesium.DirectionalLight:三个参数含义分别为
 *  - direction：光线发射的方向。
 *  - color：光线的颜色。默认值为Color.WHITE
 *  - intensity：光源的强度。默认值为1.0
 */

const directionalLight = new Cesium.DirectionalLight({
  direction: new Cesium.Cartesian3(
    0.2454278300540191,
    0.8842635425193919,
    0.39729481195458805
  ),
  intensity: 2.0,
});

//亮光
const flashlight = new Cesium.DirectionalLight({
  direction: scene.camera.directionWC, // Updated every frame
  intensity: 3.0,
});

//月光
const moonLight = new Cesium.DirectionalLight({
  direction: getMoonDirection(), // Updated every frame
  color: new Cesium.Color(0.9, 0.925, 1.0),
  intensity: 0.5,
});

//日光
const sunLight = new Cesium.SunLight();

const customColorLight = new Cesium.DirectionalLight({
  direction: new Cesium.Cartesian3(
    -0.2454278300540191,
    0.8842635425193919,
    0.39729481195458805
  ),
  color: Cesium.Color.fromCssColorString("#deca7c"),
});

scene.preRender.addEventListener(function (scene, time) {
  if (scene.light === flashlight) {
    scene.light.direction = Cesium.Cartesian3.clone(
      scene.camera.directionWC,
      scene.light.direction
    );
  } else if (scene.light === moonLight) {
    //调用 getMoonDirection 更新光源方向，确保月光方向随时间动态变化，模拟真实月球位置。
    scene.light.direction = getMoonDirection(scene.light.direction);
  }
});

//添加一个热气球模型
viewer.entities.add({
  position: Cesium.Cartesian3.fromRadians(
    -2.1463338399937277,
    0.6677959688982861,
    32.18991401746337
  ),
  model: {
    uri: "../SampleData/models/CesiumBalloon/CesiumBalloon.glb",
    scale: 7.0,
  },
});

//添加一个圆柱体
viewer.entities.add({
  position: Cesium.Cartesian3.fromRadians(
    -2.14633449752228,
    0.667796065242357,
    24.47647034111423
  ),
  cylinder: {
    length: 8.0,
    topRadius: 2.0,
    bottomRadius: 2.0,
    material: Cesium.Color.WHITE,
  },
});

//添加一个椭球体
viewer.entities.add({
  position: Cesium.Cartesian3.fromRadians(
    -2.1463332294173365,
    0.6677959755384729,
    26.2876064083145
  ),
  ellipsoid: {
    radii: new Cesium.Cartesian3(2.5, 2.5, 2.5),
    material: Cesium.Color.WHITE.withAlpha(0.5),
  },
});

function setTime(iso8601) {
  const currentTime = Cesium.JulianDate.fromIso8601(iso8601);
  const endTime = Cesium.JulianDate.addDays(
    currentTime,
    2,
    new Cesium.JulianDate()
  );

  viewer.clock.currentTime = currentTime;
  viewer.timeline.zoomTo(currentTime, endTime);
}

function reset() {
  // Set scene defaults
  scene.light = sunLight;
  scene.globe.dynamicAtmosphereLighting = true;
  scene.globe.dynamicAtmosphereLightingFromSun = false;
  scene.atmosphere.dynamicLighting = Cesium.DynamicAtmosphereLightingType.NONE;
  setTime("2020-01-09T23:00:39.018261982600961346Z");
}

viewer.scene.camera.setView({
  destination: new Cesium.Cartesian3(
    -2729490.8390059783,
    -4206389.878855597,
    3928671.2763356343
  ),
  orientation: new Cesium.HeadingPitchRoll(
    2.2482480507178426,
    -0.20084951548781982,
    0.002593933673552762
  ),
  endTransform: Cesium.Matrix4.IDENTITY,
});

/**
 * scene.light：用于阴影的光源。默认为来自太阳的定向光源。
 * 光源类型分为：SunLight和DirectionalLight。
 */
const options = [
  {
    text: "定向光照",
    onselect: function () {
      reset();
      scene.light = directionalLight;
    },
  },
  {
    text: "亮(闪)光",
    onselect: function () {
      reset();
      scene.light = flashlight;
      scene.globe.dynamicAtmosphereLighting = false;
    },
  },
  {
    text: "月光",
    onselect: function () {
      reset();
      scene.light = moonLight;
      scene.globe.dynamicAtmosphereLightingFromSun = true;
      scene.atmosphere.dynamicLighting =
        Cesium.DynamicAtmosphereLightingType.SCENE_LIGHT;
      setTime("2020-01-10T05:29:41.17946898164518643Z");
    },
  },
  {
    text: "日光",
    onselect: function () {
      reset();
      scene.atmosphere.dynamicLighting =
        Cesium.DynamicAtmosphereLightingType.SUNLIGHT;
    },
  },
  {
    text: "自定义颜色的光",
    onselect: function () {
      reset();
      scene.light = customColorLight;
    },
  },
];

Sandcastle.addToolbarMenu(options);