Cesium小组件封装-GUI可视化操作DirectionalLight组件

365 阅读1分钟

作用

直射光.png

DirectionalLight提供了一种通过 GUI 界面控件操作的形式,用于在 Cesium 场景中控制、记录当前直射光信息。

它允许你传入初始化参数设置模型信息,若是没有,也能通过之前操作记录在浏览器 IndexDB 的参数来初始化设置模型信息。

示例

以下展示DirectionalLight组件用法,使用者可以通过 GUI 界面控制操作的形式,修改参数信息,来达到场景模型的变化。

import "./app.css";
import * as Cesium from 'cesium';
import * as dat from "dat.gui";
import { viewer } from "./main";
import Model from "./Model/index";
import DirectionalLight from "./DirectionalLight/index";
import Camera from "./Camera/index";

const gui = new dat.GUI({
  name: "Cesium GUI",
  width: 450,
  autoPlace: true,
  closed: false,
});
gui.domElement.id = "gui";
gui.show();

const camera = new Camera(
  viewer,
  gui,
  {
    position: {
      height: 359,
      longitude: 114.047245,
      latitude: 22.504446,
    },
    headingPitchRoll: {
      heading: 28.084072,
      pitch: -26.346292,
      roll: 0,
    },
  },
  true,
);

const model = new Model(
  viewer,
  gui,
  '/static/CesiumBalloon.glb',
  Cesium.Cartesian3.fromDegrees(114.05104099176157, 22.509032825095247, 50),
  {
    show: true,
    scale: 7.0,
    maximumScale: 256,
    minimumPixelSize: 0.0,
    incrementallyLoadTextures: false,
    runAnimations: true,
    clampAnimations: true,
    shadows: Cesium.ShadowMode.ENABLED,
    silhouetteSize: 0.0,
    silhouetteColor: '#0000ff',
    color: '#ffffff',
    colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT,
    colorBlendAmount: 0.5,
  },
  true,
);

const directionalLight = new DirectionalLight(viewer, gui, {
  direction: {
    longitude: -67,
    latitude: -8.4,
  },
  color: [255, 223, 223, 1],
  intensity: 6.2,
});

API

new DirectionalLight(viewer: Cesium.Viewer, gui: dat.GUI, directionalLightParams?: DirectionalLightParamsInterface, hideGui?: boolean)

创建一个DirectionalLight对象。

参数类型描述
viewerCesium.ViewerCesium.Viewer 对象
guidat.GUIdat.GUI 对象
directionalLightParamsDirectionalLightParamsInterface(可选)直射光信息参数接口
hideGuiboolean(可选)控制直射光信息的 GUI 界面控件显示隐藏

类型

DirectionalLightParamsInterface

场景直射光信息参数。

参数类型描述
directionboolean光照朝向,包括:
• longitude: 经度。
• latitude: 纬度。
• height: 高度。
colornumber[]光照颜色
intensitynumber光照强度

相关资料