mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-11-04 09:14:17 +00:00
638 lines
26 KiB
JavaScript
638 lines
26 KiB
JavaScript
/**
|
|
*/
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMzU2ZTQyYy1iOTU5LTQ5MDQtOGNkNC0yYzcxMTI1ZDJiZGQiLCJpZCI6NzY1OTcsImlhdCI6MTYzOTU2MDcwOH0.kbWigipGD6l2OPBGpnkkN6dzp8NuNjoHNNM1NF4gaIo';
|
|
let viewer;
|
|
let imagerLayer;
|
|
let building;
|
|
let model0;
|
|
let model1;
|
|
let model2;
|
|
let model3;
|
|
let waterPrimitive;
|
|
/**
|
|
* 自定义材质线 github:cesium-materialLine
|
|
* @param {*} options
|
|
* @returns
|
|
*/
|
|
function CustomMaterialLine(options) {
|
|
let Color = Cesium.Color,
|
|
defaultValue = Cesium.defaultValue,
|
|
defined = Cesium.defined,
|
|
defineProperties = Object.defineProperties,
|
|
Event = Cesium.Event,
|
|
createPropertyDescriptor = Cesium.createPropertyDescriptor,
|
|
Property = Cesium.Property,
|
|
Material = Cesium.Material,
|
|
defaultColor = Color.WHITE,
|
|
currentTime = window.performance.now(),
|
|
MaterialType = options.MaterialType || 'wallType' + parseInt(Math.random() * 1000);
|
|
function PolylineCustomMaterialProperty(options) {
|
|
options = defaultValue(options, defaultValue.EMPTY_OBJECT);
|
|
this._definitionChanged = new Event();
|
|
this._color = undefined;
|
|
this._colorSubscription = undefined;
|
|
this.color = options.color || Cesium.Color.BLUE;
|
|
this.duration = options.duration || 1000;
|
|
this._time = currentTime;
|
|
}
|
|
defineProperties(PolylineCustomMaterialProperty.prototype, {
|
|
isvarant: {
|
|
get: function () {
|
|
return false;
|
|
}
|
|
},
|
|
definitionChanged: {
|
|
get: function () {
|
|
return this._definitionChanged;
|
|
}
|
|
},
|
|
color: createPropertyDescriptor('color')
|
|
});
|
|
PolylineCustomMaterialProperty.prototype.getType = function (time) {
|
|
return MaterialType;
|
|
};
|
|
PolylineCustomMaterialProperty.prototype.getValue = function (time, result) {
|
|
if (!defined(result)) {
|
|
result = {};
|
|
}
|
|
result.color = Property.getValueOrClonedDefault(this._color, time, defaultColor, result.color);
|
|
result.image = options.image;
|
|
result.time = ((window.performance.now() - this._time) % this.duration) / this.duration;
|
|
return result;
|
|
};
|
|
PolylineCustomMaterialProperty.prototype.equals = function (other) {
|
|
return this === other ||
|
|
(other instanceof PolylineCustomMaterialProperty &&
|
|
Property.equals(this._color, other._color));
|
|
};
|
|
Material._materialCache.addMaterial(MaterialType, {
|
|
fabric: {
|
|
type: MaterialType,
|
|
uniforms: {
|
|
color: options.color || new Cesium.Color(1.0, 0.0, 0.0, 0.5),
|
|
image: options.image,
|
|
time: 0
|
|
},
|
|
source: `czm_material czm_getMaterial(czm_materialInput materialInput)
|
|
{
|
|
czm_material material = czm_getDefaultMaterial(materialInput);
|
|
vec2 st = materialInput.st;
|
|
if(texture(image, vec2(0.0, 0.0)).a == 1.0){
|
|
discard;
|
|
}else{
|
|
material.alpha = texture(image, vec2(1.0 - fract(time - st.s), st.t)).a * color.a;
|
|
}
|
|
material.diffuse = max(color.rgb * material.alpha * 3.0, color.rgb);
|
|
return material;
|
|
}
|
|
`,
|
|
},
|
|
translucent: function (material) {
|
|
return true;
|
|
}
|
|
})
|
|
return new PolylineCustomMaterialProperty(options);
|
|
}
|
|
|
|
/**
|
|
* 初始化viewer
|
|
*/
|
|
const initViewer = () => {
|
|
viewer = new Cesium.Viewer('map', {
|
|
infoBox: false,
|
|
shouldAnimate: false,
|
|
vrButton: false,
|
|
geocoder: false,
|
|
homeButton: false,
|
|
sceneModePicker: false,
|
|
baseLayerPicker: false,
|
|
navigationHelpButton: false,
|
|
animation: false,
|
|
timeline: true,
|
|
fullscreenButton: false,
|
|
terrainProvider: Cesium.createWorldTerrain({
|
|
requestWaterMask: true,
|
|
requestVertexNormals: true,
|
|
}),
|
|
contextOptions: {
|
|
requestWebgl1: false,
|
|
allowTextureFilterAnisotropic: true,
|
|
webgl: {
|
|
alpha: false,
|
|
depth: true,
|
|
stencil: false,
|
|
antialias: true,
|
|
powerPreference: 'high-performance',
|
|
premultipliedAlpha: true,
|
|
preserveDrawingBuffer: false,
|
|
failIfMajorPerformanceCaveat: false
|
|
},
|
|
},
|
|
});
|
|
|
|
viewer._cesiumWidget._creditContainer.style.display = "none";
|
|
viewer.resolutionScale = 1.2;
|
|
viewer.scene.msaaSamples = 4;
|
|
viewer.postProcessStages.fxaa.enabled = true;
|
|
viewer.scene.globe.depthTestAgainstTerrain = true;
|
|
viewer.scene.debugShowFramesPerSecond = true;
|
|
viewer.scene.globe.shadows = Cesium.ShadowMode.ENABLED;
|
|
|
|
viewer.shadows = true;
|
|
viewer.shadowMap.size = 2048;
|
|
viewer.shadowMap.softShadows = false;
|
|
viewer.shadowMap.maximumDistance = 4000;
|
|
|
|
viewer.scene.globe.enableLighting = true
|
|
viewer.scene.fog.minimumBrightness = 0.5;
|
|
viewer.scene.fog.density = 2.0e-4 * 1.2;
|
|
viewer.scene.globe.atmosphereLightIntensity = 20;
|
|
viewer.scene.globe.atmosphereBrightnessShift = -0.01;
|
|
|
|
imagerLayer = viewer.imageryLayers.get(0);
|
|
|
|
viewer.scene.postProcessStages.bloom.enabled = false;
|
|
viewer.scene.postProcessStages.bloom.uniforms.contrast = 119;
|
|
viewer.scene.postProcessStages.bloom.uniforms.brightness = -0.4;
|
|
viewer.scene.postProcessStages.bloom.uniforms.glowOnly = false;
|
|
viewer.scene.postProcessStages.bloom.uniforms.delta = 0.9;
|
|
viewer.scene.postProcessStages.bloom.uniforms.sigma = 3.78;
|
|
viewer.scene.postProcessStages.bloom.uniforms.stepSize = 5;
|
|
viewer.scene.postProcessStages.bloom.uniforms.isSelected = false;
|
|
|
|
|
|
viewer.scene.postProcessStages.ambientOcclusion.enabled = false;
|
|
viewer.scene.postProcessStages.ambientOcclusion.uniforms.intensity = 1.5;
|
|
viewer.scene.postProcessStages.ambientOcclusion.uniforms.bias = 0.4;
|
|
viewer.scene.postProcessStages.ambientOcclusion.uniforms.lengthCap = 0.45;
|
|
viewer.scene.postProcessStages.ambientOcclusion.uniforms.stepSize = 1.8;
|
|
viewer.scene.postProcessStages.ambientOcclusion.uniforms.blurStepSize = 1.0;
|
|
|
|
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0;
|
|
// viewer.scene.screenSpaceCameraController.maximumZoomDistance = 30000;
|
|
}
|
|
|
|
|
|
/**
|
|
* 初始化场景
|
|
*/
|
|
const initScene = () => {
|
|
const initTiles = () => {
|
|
building = viewer.scene.primitives.add(
|
|
Cesium.createOsmBuildings({
|
|
customShader: new Cesium.CustomShader({
|
|
uniforms: {
|
|
u_envTexture: {
|
|
value: new Cesium.TextureUniform({
|
|
url: "./Static/images/sky.jpg"
|
|
}),
|
|
type: Cesium.UniformType.SAMPLER_2D
|
|
},
|
|
u_envTexture2: {
|
|
value: new Cesium.TextureUniform({
|
|
url: "./Static/images/pic.jpg"
|
|
}),
|
|
type: Cesium.UniformType.SAMPLER_2D
|
|
},
|
|
u_isDark: {
|
|
value: false,
|
|
type: Cesium.UniformType.BOOL
|
|
}
|
|
},
|
|
mode: Cesium.CustomShaderMode.REPLACE_MATERIAL,
|
|
lightingModel: Cesium.LightingModel.UNLIT,
|
|
fragmentShaderText: `
|
|
void fragmentMain(FragmentInput fsInput,inout czm_modelMaterial material) {
|
|
vec3 positionMC = fsInput.attributes.positionMC;
|
|
vec3 positionEC = fsInput.attributes.positionEC;
|
|
vec3 normalEC = fsInput.attributes.normalEC;
|
|
vec3 posToCamera = normalize(-positionEC);
|
|
vec3 coord = normalize(vec3(czm_inverseViewRotation * reflect(posToCamera, normalEC)));
|
|
float ambientCoefficient = 0.3;
|
|
float diffuseCoefficient = max(0.0, dot(normalEC, czm_sunDirectionEC) * 1.0);
|
|
if(u_isDark){
|
|
|
|
// dark
|
|
vec4 darkRefColor = texture(u_envTexture2, vec2(coord.x, (coord.z - coord.y) / 2.0));
|
|
material.diffuse = mix(mix(vec3(0.3), vec3(0.1,0.2,0.4),clamp(positionMC.z / 200., 0.0, 1.0)) , darkRefColor.rgb ,0.3);
|
|
material.diffuse *= 0.2;
|
|
// 注意shader中写浮点数是 一定要带小数点 否则会报错 比如0需要写成0.0 1要写成1.0
|
|
float _baseHeight = 0.0; // 物体的基础高度，需要修改成一个合适的建筑基础高度
|
|
float _heightRange = 20.0; // 高亮的范围(_baseHeight ~ _baseHeight + _heightRange)
|
|
float _glowRange = 300.0; // 光环的移动范围(高度)
|
|
// 建筑基础色
|
|
float czm_height = positionMC.z - _baseHeight;
|
|
float czm_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0;
|
|
float czm_a12 = czm_height / _heightRange + sin(czm_a11) * 0.1;
|
|
|
|
float times = czm_frameNumber / 60.0;
|
|
material.diffuse *= vec3(czm_a12);// 渐变
|
|
// 动态光环
|
|
float time = fract(czm_frameNumber / 360.0);
|
|
time = abs(time - 0.5) * 2.0;
|
|
float czm_h = clamp(czm_height / _glowRange, 0.0, 1.0);
|
|
float czm_diff = step(0.005, abs(czm_h - time));
|
|
material.diffuse += material.diffuse * (1.0 - czm_diff);
|
|
} else {
|
|
|
|
// day
|
|
vec4 dayRefColor = texture(u_envTexture, vec2(coord.x, (coord.z - coord.y) / 3.0));
|
|
material.diffuse = mix(mix(vec3(0.000), vec3(0.5),clamp(positionMC.z / 300., 0.0, 1.0)) , dayRefColor.rgb ,0.3);
|
|
material.diffuse *= min(diffuseCoefficient + ambientCoefficient, 1.0);
|
|
}
|
|
material.alpha = 1.0;
|
|
}
|
|
`
|
|
})
|
|
})
|
|
);
|
|
model0 = viewer.scene.primitives.add(
|
|
new Cesium.Model.fromGltf({
|
|
url: "./Static/data/shanghai_tower/scene.gltf",
|
|
imageBasedLighting: imageBasedLighting,
|
|
customShader: new Cesium.CustomShader({
|
|
uniforms: {
|
|
u_texture: {
|
|
value: new Cesium.TextureUniform({
|
|
url: "./Static/images/color.png"
|
|
}),
|
|
type: Cesium.UniformType.SAMPLER_2D
|
|
},
|
|
u_isDark: {
|
|
value: true,
|
|
type: Cesium.UniformType.BOOL
|
|
}
|
|
},
|
|
lightingModel: Cesium.LightingModel.PBR,
|
|
fragmentShaderText: `
|
|
void fragmentMain(FragmentInput fsInput,inout czm_modelMaterial material) {
|
|
if(u_isDark){
|
|
vec2 texCoord = fsInput.attributes.texCoord_0 * 0.3;
|
|
float times = czm_frameNumber / 120.0;
|
|
vec4 textureColor = texture(u_texture,vec2(fract(texCoord.s),float(texCoord.t) - times));
|
|
material.diffuse += textureColor.rgb * 0.8;
|
|
}
|
|
}
|
|
`
|
|
}),
|
|
modelMatrix: generateModelMatrix(
|
|
[121.49805570610201, 31.23266477688614, 400],
|
|
[0, 0, 45],
|
|
[3, 3, 2.5]),
|
|
})
|
|
);
|
|
|
|
model1 = viewer.scene.primitives.add(
|
|
Cesium.Model.fromGltf({
|
|
url: "./Static/data/building_-_beveled_corners_-_shiny/scene.gltf",
|
|
imageBasedLighting: imageBasedLighting,
|
|
customShader: new Cesium.CustomShader({
|
|
uniforms: {
|
|
u_texture: {
|
|
value: new Cesium.TextureUniform({
|
|
url: "./Static/images/pic.jpg"
|
|
}),
|
|
type: Cesium.UniformType.SAMPLER_2D
|
|
},
|
|
u_isDark: {
|
|
value: true,
|
|
type: Cesium.UniformType.BOOL
|
|
}
|
|
},
|
|
lightingModel: Cesium.LightingModel.PBR,
|
|
fragmentShaderText: `
|
|
void fragmentMain(FragmentInput fsInput,inout czm_modelMaterial material) {
|
|
if(u_isDark){
|
|
vec2 texCoord = fsInput.attributes.texCoord_0 * 0.3;
|
|
float times = czm_frameNumber / 120.0;
|
|
vec4 textureColor = texture(u_texture,vec2(fract(texCoord.s),float(texCoord.t) - times));
|
|
material.diffuse += textureColor.rgb * 1.5;
|
|
}
|
|
}
|
|
`
|
|
}),
|
|
modelMatrix: generateModelMatrix(
|
|
[121.50306517515779, 31.236594411927722, 0],
|
|
[0, 0, 0],
|
|
[3, 3, 4.4]),
|
|
})
|
|
);
|
|
|
|
model2 = viewer.scene.primitives.add(
|
|
Cesium.Model.fromGltf({
|
|
url: "./Static/data/building_-_octagonal_-_shiny/scene.gltf",
|
|
imageBasedLighting: imageBasedLighting,
|
|
customShader: new Cesium.CustomShader({
|
|
uniforms: {
|
|
u_texture: {
|
|
value: new Cesium.TextureUniform({
|
|
url: "./Static/images/color2.png"
|
|
}),
|
|
type: Cesium.UniformType.SAMPLER_2D
|
|
},
|
|
u_isDark: {
|
|
value: true,
|
|
type: Cesium.UniformType.BOOL
|
|
}
|
|
},
|
|
lightingModel: Cesium.LightingModel.PBR,
|
|
fragmentShaderText: `
|
|
void fragmentMain(FragmentInput fsInput,inout czm_modelMaterial material) {
|
|
if(u_isDark){
|
|
vec2 texCoord = fsInput.attributes.texCoord_0 * 0.5;
|
|
float times = czm_frameNumber / 120.0;
|
|
vec4 textureColor = texture(u_texture,vec2(float(texCoord.s) - times),fract(texCoord.t));
|
|
material.diffuse += textureColor.rgb * 1.5;
|
|
}
|
|
}
|
|
`
|
|
}),
|
|
modelMatrix: generateModelMatrix(
|
|
[121.50140479453857, 31.237266571858395, 0],
|
|
[0, 0, 0],
|
|
[2.5, 2.5, 3.0]),
|
|
})
|
|
);
|
|
|
|
model3 = viewer.scene.primitives.add(
|
|
Cesium.Model.fromGltf({
|
|
url: "./Static/data/oriental_pearl_shanghai. (1)/scene.gltf",
|
|
imageBasedLighting: imageBasedLighting,
|
|
customShader: new Cesium.CustomShader({
|
|
uniforms: {
|
|
u_texture: {
|
|
value: new Cesium.TextureUniform({
|
|
url: "./Static/images/color.png"
|
|
}),
|
|
type: Cesium.UniformType.SAMPLER_2D
|
|
},
|
|
u_isDark: {
|
|
value: true,
|
|
type: Cesium.UniformType.BOOL
|
|
}
|
|
},
|
|
lightingModel: Cesium.LightingModel.PBR,
|
|
fragmentShaderText: `
|
|
void fragmentMain(FragmentInput fsInput,inout czm_modelMaterial material) {
|
|
if(u_isDark){
|
|
vec2 texCoord = fsInput.attributes.texCoord_0 * 0.5;
|
|
float times = czm_frameNumber / 30.0;
|
|
vec4 textureColor = texture(u_texture,vec2(fract(texCoord.s),float(texCoord.t) - times));
|
|
material.diffuse += textureColor.rgb * 0.8;
|
|
}
|
|
}
|
|
`
|
|
}),
|
|
modelMatrix: generateModelMatrix(
|
|
[121.49697607088487, 31.241891679352257, 10],
|
|
[0, 0, 0],
|
|
[0.15, 0.15, 0.126])
|
|
})
|
|
);
|
|
|
|
}
|
|
|
|
const initWater = async () => {
|
|
const waterPlane = [];
|
|
const waterData = await Cesium.Resource.fetchJson({ url: "./Static/data/water.json" });
|
|
waterData.features.map(feature => {
|
|
feature.geometry.coordinates[0].map(coordinate => {
|
|
waterPlane.push(Cesium.Cartesian3.fromDegrees(...coordinate));
|
|
})
|
|
})
|
|
const polygon = new Cesium.PolygonGeometry({
|
|
polygonHierarchy: new Cesium.PolygonHierarchy(waterPlane),
|
|
});
|
|
const instance = new Cesium.GeometryInstance({
|
|
geometry: polygon
|
|
});
|
|
waterPrimitive = new Cesium.GroundPrimitive({
|
|
geometryInstances: instance,
|
|
appearance: new Cesium.MaterialAppearance({
|
|
material: new Cesium.Material({
|
|
fabric: {
|
|
type: Cesium.Material.WaterType,
|
|
uniforms: {
|
|
baseWaterColor: Cesium.Color.fromCssColorString("#62809b"),
|
|
blendColor: new Cesium.Color(0, 1, 0.699, 1),
|
|
// specularMap: Material.DefaultImageId,
|
|
normalMap: "https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Assets/Textures/waterNormals.jpg",
|
|
frequency: 1000,
|
|
animationSpeed: 0.01,
|
|
amplitude: 2,
|
|
specularIntensity: 1,
|
|
fadeFactor: 3
|
|
}
|
|
}
|
|
}),
|
|
translucent: false,
|
|
}),
|
|
asynchronous: false
|
|
})
|
|
viewer.scene.primitives.add(waterPrimitive);
|
|
|
|
|
|
// 创建材质线
|
|
let getCustomMaterialLine = (image, color) => {
|
|
return new CustomMaterialLine({
|
|
image: image,
|
|
color: color,
|
|
duration: 1000
|
|
})
|
|
}
|
|
const createRoad = (url) => {
|
|
let promise = Cesium.GeoJsonDataSource.load(url);
|
|
promise.then((dataSource) => {
|
|
viewer.dataSources.add(dataSource)
|
|
let entities = dataSource.entities.values;
|
|
for (let o = 0; o < entities.length; o++) {
|
|
entities[o].polyline.width = 3;
|
|
entities[o].polyline.clampToGround = true;
|
|
entities[o].polyline.material =
|
|
getCustomMaterialLine("./Static/images/line.png", Cesium.Color.fromRandom())
|
|
}
|
|
})
|
|
}
|
|
|
|
createRoad("./Static/data/road.json")
|
|
createRoad("./Static/data/road2.json")
|
|
}
|
|
|
|
|
|
|
|
initTiles();
|
|
|
|
initWater();
|
|
}
|
|
|
|
/**
|
|
* 初始化场景事件
|
|
*/
|
|
const initEvent = () => {
|
|
|
|
let _sn = 0;
|
|
const updateScene = () => {
|
|
const sd = Cesium.Cartesian3.normalize(viewer.scene.sun._boundingVolume.center, new Cesium.Cartesian3);
|
|
const vd = Cesium.Cartesian3.normalize(viewer.camera.position, new Cesium.Cartesian3);
|
|
const sn = parseFloat(Cesium.Cartesian3.dot(vd, sd).toFixed(3))
|
|
if (sn === _sn) return false;
|
|
viewer.postProcessStages.bloom.enabled = false;
|
|
viewer.scene.postProcessStages.ambientOcclusion.enabled = true;
|
|
building.customShader.uniforms.u_isDark.value = false;
|
|
model0.customShader.uniforms.u_isDark.value = false;
|
|
model1.customShader.uniforms.u_isDark.value = false;
|
|
model2.customShader.uniforms.u_isDark.value = false;
|
|
model3.customShader.uniforms.u_isDark.value = false;
|
|
const value = Cesium.Math.clamp(sn, 0, 1);
|
|
if (imagerLayer)
|
|
imagerLayer.brightness = value + 0.3;
|
|
if (waterPrimitive)
|
|
waterPrimitive.appearance.material.uniforms.baseWaterColor =
|
|
Cesium.Color.multiplyByScalar(Cesium.Color.fromCssColorString("#62809b"), value + 0.3, new Cesium.Color);
|
|
if (sn < 0) {
|
|
viewer.postProcessStages.bloom.enabled = true;
|
|
viewer.scene.postProcessStages.ambientOcclusion.enabled = false;
|
|
building.customShader.uniforms.u_isDark.value = true;
|
|
model0.customShader.uniforms.u_isDark.value = true;
|
|
model1.customShader.uniforms.u_isDark.value = true;
|
|
model2.customShader.uniforms.u_isDark.value = true;
|
|
model3.customShader.uniforms.u_isDark.value = true;
|
|
}
|
|
if (sn < -0.1 && waterPrimitive) {
|
|
let scale = parseFloat(Cesium.Math.clamp((sn - (-0.8)) / (-0.1 - (-0.8)), 1.0, 1.5));
|
|
waterPrimitive.appearance.material.uniforms.baseWaterColor =
|
|
Cesium.Color.multiplyByScalar(Cesium.Color.fromCssColorString("#62809b"), scale, new Cesium.Color);
|
|
}
|
|
_sn = sn;
|
|
}
|
|
viewer.scene.postRender.addEventListener(() => updateScene());
|
|
const onGlobeEvent = viewer.scene.globe.tileLoadProgressEvent.addEventListener((tileNum) => {
|
|
if (tileNum > 2) {
|
|
closeLoading(),
|
|
showUI(),
|
|
onGlobeEvent();
|
|
}
|
|
})
|
|
|
|
|
|
viewer.camera.setView({
|
|
destination: { x: -2850554.9246458095, y: 4656672.153306185, z: 3287574.727124352 },
|
|
orientation: {
|
|
heading: Cesium.Math.toRadians(48.72529042457395),
|
|
pitch: Cesium.Math.toRadians(-10.899276751527792),
|
|
roll: Cesium.Math.toRadians(0.0014027234956804583)
|
|
}
|
|
});
|
|
|
|
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2023-01-01T06:00:00Z");
|
|
}
|
|
|
|
const initGUI = () => { }
|
|
const L00 = new Cesium.Cartesian3(
|
|
1.234709620475769,
|
|
1.221461296081543,
|
|
1.273156881332397
|
|
);
|
|
const L1_1 = new Cesium.Cartesian3(
|
|
1.135921120643616,
|
|
1.171217799186707,
|
|
1.287644743919373
|
|
);
|
|
const L10 = new Cesium.Cartesian3(
|
|
1.245193719863892,
|
|
1.245591878890991,
|
|
1.282818794250488
|
|
);
|
|
const L11 = new Cesium.Cartesian3(
|
|
-1.106930732727051,
|
|
-1.112522482872009,
|
|
-1.153198838233948
|
|
);
|
|
const L2_2 = new Cesium.Cartesian3(
|
|
-1.086226940155029,
|
|
-1.079731941223145,
|
|
-1.101912498474121
|
|
);
|
|
const L2_1 = new Cesium.Cartesian3(
|
|
1.189834713935852,
|
|
1.185906887054443,
|
|
1.214385271072388
|
|
);
|
|
const L20 = new Cesium.Cartesian3(
|
|
0.01778045296669,
|
|
0.02013735473156,
|
|
0.025313569232821
|
|
);
|
|
const L21 = new Cesium.Cartesian3(
|
|
-1.086826920509338,
|
|
-1.084611177444458,
|
|
-1.111204028129578
|
|
);
|
|
const L22 = new Cesium.Cartesian3(
|
|
-0.05241484940052,
|
|
-0.048303380608559,
|
|
-0.041960217058659
|
|
);
|
|
const coefficients = [L00, L1_1, L10, L11, L2_2, L2_1, L20, L21, L22];
|
|
let imageBasedLighting = new Cesium.ImageBasedLighting({
|
|
specularEnvironmentMaps: './Static/images/kiara_6_afternoon_2k_ibl.ktx2',
|
|
sphericalHarmonicCoefficients: coefficients
|
|
})
|
|
|
|
/**
|
|
* 生成矩阵
|
|
* @param {*} position
|
|
* @param {*} rotation
|
|
* @param {*} scale
|
|
* @returns
|
|
*/
|
|
const generateModelMatrix = (position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1]) => {
|
|
const rotationX = Cesium.Matrix4.fromRotationTranslation(
|
|
Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rotation[0])));
|
|
|
|
const rotationY = Cesium.Matrix4.fromRotationTranslation(
|
|
Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(rotation[1])));
|
|
|
|
const rotationZ = Cesium.Matrix4.fromRotationTranslation(
|
|
Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(rotation[2])));
|
|
if (!(position instanceof Cesium.Cartesian3)) {
|
|
position = Cesium.Cartesian3.fromDegrees(...position)
|
|
}
|
|
const enuMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
|
|
Cesium.Matrix4.multiply(enuMatrix, rotationX, enuMatrix);
|
|
Cesium.Matrix4.multiply(enuMatrix, rotationY, enuMatrix);
|
|
Cesium.Matrix4.multiply(enuMatrix, rotationZ, enuMatrix);
|
|
const scaleMatrix = Cesium.Matrix4.fromScale(new Cesium.Cartesian3(...scale));
|
|
const modelMatrix = Cesium.Matrix4.multiply(enuMatrix, scaleMatrix, new Cesium.Matrix4());
|
|
|
|
return modelMatrix;
|
|
}
|
|
|
|
const main = () => {
|
|
initViewer();
|
|
initScene();
|
|
initEvent();
|
|
initGUI();
|
|
};
|
|
|
|
|
|
new window.WOW().init();
|
|
function showUI() {
|
|
$("body").append(`
|
|
<div id="uiContainer">
|
|
<div id="topUI" class="wow bounceInDown" data-wow-duration="1.2s"></div>
|
|
<div id="leftUI" class="wow bounceInLeft" data-wow-duration="1.2s"></div>
|
|
<div id="roghtUI" class="wow bounceInRight" data-wow-duration="1.2s"></div>
|
|
</div>`);
|
|
}
|
|
function closeLoading() {
|
|
$("#loadingIndicator").hide();
|
|
$("#loadingIndicator2").hide();
|
|
}
|
|
|
|
function showLoading() {
|
|
$("#loadingIndicator").show();
|
|
$("#loadingIndicator2").show();
|
|
}
|
|
|
|
window.onload = main; |