Physically-Based Materials【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Physically-Based%20Materials.html&label=All

效果如下图所示：

示例代码如下：

注：Three quarters sunrise可以理解为：从车辆的侧前方（四分之三视角）观察，展示车辆的立体感和细节，可以翻译为三-quarter 晨光视角。

const clock = new Cesium.Clock({
  startTime: Cesium.JulianDate.fromIso8601("2017-07-11T00:00:00Z"),
  stopTime: Cesium.JulianDate.fromIso8601("2017-07-11T24:00:00Z"),
  currentTime: Cesium.JulianDate.fromIso8601("2017-07-11T10:00:00Z"),
  clockRange: Cesium.ClockRange.LOOP_STOP,
  clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
  multiplier: 1000,//倍速1秒相当于1000秒
  shouldAnimate: true,
});

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,//启用时间动画，场景随时间自动更新。
  baseLayerPicker: false,
  shadows: true,
  selectionIndicator: false,
  clockViewModel: new Cesium.ClockViewModel(clock),
  terrain: Cesium.Terrain.fromWorldTerrain(),
});
viewer.cesiumWidget.creditContainer.style.display = "none";

Sandcastle.addToggleButton("启用阴影", viewer.shadows, function (checked) {
  viewer.shadows = checked;
});

viewer.scene.globe.enableLighting = true;//启用地球的光照效果（基于太阳位置）。
viewer.scene.globe.depthTestAgainstTerrain = true;//启用地形深度测试
viewer.scene.atmosphere.dynamicLighting =
  Cesium.DynamicAtmosphereLightingType.SUNLIGHT;//大气光照基于太阳光（随时间变化，模拟日出日落）。

const position = new Cesium.Cartesian3(
  -1371108.6511167218,
  -5508684.080096612,
  2901825.449865087,
);
//朝南，略微上仰2度，翻滚-6度，即略微左倾。
const heading = Cesium.Math.toRadians(180);
const pitch = Cesium.Math.toRadians(2);
const roll = Cesium.Math.toRadians(-6);
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
//定义车辆方向
const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

const entity = viewer.entities.add({
  name: "truck",
  position: position,
  orientation: orientation,
  model: {
    uri: "../SampleData/models/GroundVehicle/GroundVehicle.glb",
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,//模型贴合地形表面，避免悬浮或穿透。
    minimumPixelSize: 128,//模型最小像素大小（防止远处显得太小）
    maximumScale: 20,//最大缩放比例
    scale: 8.0,//模型缩放 8 倍
    runAnimations: false,//禁用模型自带动画
  },
});

// 定义相机视角

// 三-quarter 视图，略偏侧面 
const threeQuartersView = {
  destination: new Cesium.Cartesian3(
    -1371203.1456494154,
    -5508700.033950869,
    2901802.2749172337,
  ),
  orientation: {
    heading: Cesium.Math.toRadians(67.64973594265429),
    pitch: Cesium.Math.toRadians(-8.158676059409297),
    roll: Cesium.Math.toRadians(359.9999987450017),
  },
  maximumHeight: 100,//限制相机最大高度（防止飞得太高）
};
// 正面视图，靠近车辆前方
const frontView = {
  destination: new Cesium.Cartesian3(
    -1371214.9554156072,
    -5508700.8494476415,
    2901826.794611029,
  ),
  orientation: {
    heading: Cesium.Math.toRadians(80.5354269423926),
    pitch: Cesium.Math.toRadians(-15.466062969558285),
    roll: Cesium.Math.toRadians(359.9999999526579),
  },
  maximumHeight: 100,
};
// 俯视图，从上方观察
const topView = {
  destination: new Cesium.Cartesian3(
    -1371190.7755780201,
    -5508732.668834588,
    2901827.2625979027,
  ),
  orientation: {
    heading: Cesium.Math.toRadians(68.29411482061157),
    pitch: Cesium.Math.toRadians(-33.97774554735345),
    roll: Cesium.Math.toRadians(359.9999999298912),
  },
  maximumHeight: 100,
};
// 仰视侧面视图，从低角度观察
const upwardsView = {
  destination: new Cesium.Cartesian3(
    -1371052.4616855076,
    -5508691.745389906,
    2901861.440673151,
  ),
  orientation: {
    heading: Cesium.Math.toRadians(236.4536374528137),
    pitch: Cesium.Math.toRadians(-1.3382025460115552),
    roll: Cesium.Math.toRadians(359.9999985917282),
  },
  maximumHeight: 100,
};

viewer.scene.camera.flyTo({
  destination: frontView.destination,
  orientation: frontView.orientation,
  duration: 5.0,
  pitchAdjustHeight: 20,//自动调整俯仰以保持目标在视野内（高度偏移 20 米）。
});
Sandcastle.addToolbarMenu(
  [
    {
      text: "前视图，20:00-傍晚光照",
      onselect: function () {
        viewer.scene.camera.flyTo(frontView);
        viewer.clockViewModel.clock.currentTime =
          Cesium.JulianDate.fromIso8601("2017-07-11T20:00:00Z");
      },
    },
    {
      text: "三quarter晨光视角，11:00-接近中午",
      onselect: function () {
        viewer.scene.camera.flyTo(threeQuartersView);
        viewer.clockViewModel.clock.currentTime =
          Cesium.JulianDate.fromIso8601("2017-07-11T11:00:00Z");
      },
    },
    {
      text: "俯视图，12:00-正午",
      onselect: function () {
        viewer.scene.camera.flyTo(topView);
        viewer.clockViewModel.clock.currentTime =
          Cesium.JulianDate.fromIso8601("2017-07-11T12:00:00Z");
      },
    },
    {
      text: "仰视侧面视图，23:00-夜晚",
      onselect: function () {
        viewer.scene.camera.flyTo(upwardsView);
        viewer.clockViewModel.clock.currentTime =
          Cesium.JulianDate.fromIso8601("2017-07-11T23:00:00Z");
      },
    },
  ],
  "toolbar",
);