188 lines
7.6 KiB
HTML
188 lines
7.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<!-- Use correct character set. -->
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<!-- Tell IE to use the latest, best version. -->
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|||
|
|
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
|
|||
|
|
<meta
|
|||
|
|
name="viewport"
|
|||
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
|||
|
|
/>
|
|||
|
|
<title>Learning Cesium!</title>
|
|||
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|||
|
|
<style>
|
|||
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|||
|
|
html,
|
|||
|
|
body,
|
|||
|
|
#cesiumContainer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="cesiumContainer"></div>
|
|||
|
|
<script>
|
|||
|
|
Cesium.Ion.defaultAccessToken =
|
|||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
|
|||
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|||
|
|
geocoder: false, //位置查找
|
|||
|
|
homeButton: false, //视图返回初始位置
|
|||
|
|
sceneModePicker: false, //视角选择器
|
|||
|
|
baseLayerPicker: false, //底图选择器
|
|||
|
|
navigationHelpButton: false, //导航帮助按钮
|
|||
|
|
animation: false, //动画控制器
|
|||
|
|
creditContainer: document.createElement("div"), //版权显示
|
|||
|
|
timeline: false, //时间线
|
|||
|
|
fullscreenButton: false, //全屏控件
|
|||
|
|
vrButton: false,
|
|||
|
|
infoBox: false,
|
|||
|
|
selectionIndicator: false,
|
|||
|
|
});
|
|||
|
|
var scene = viewer.scene;
|
|||
|
|
var rectangle ;
|
|||
|
|
createPrimitives(scene);
|
|||
|
|
|
|||
|
|
function createPrimitives(scene) {
|
|||
|
|
rectangle = scene.primitives.add(
|
|||
|
|
new Cesium.Primitive({
|
|||
|
|
geometryInstances: new Cesium.GeometryInstance({
|
|||
|
|
geometry: new Cesium.RectangleGeometry({
|
|||
|
|
rectangle: Cesium.Rectangle.fromDegrees(116, 39, 117, 39.7),
|
|||
|
|
|
|||
|
|
// EllipsoidSurfaceAppearance.VERTEX_FORMAT = Cesium.VertexFormat.POSITION_AND_ST;
|
|||
|
|
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
|
|||
|
|
})
|
|||
|
|
}),
|
|||
|
|
appearance: new Cesium.EllipsoidSurfaceAppearance({
|
|||
|
|
aboveGround: false
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
rectangle.appearance.material = new Cesium.Material({
|
|||
|
|
fabric: {
|
|||
|
|
uniforms: {
|
|||
|
|
image: './images/53bg.png',
|
|||
|
|
alpha: 1.0,
|
|||
|
|
},
|
|||
|
|
// source: /* glsl
|
|||
|
|
// texture2D函数是webgl内置函数，传入两个参数，一个是图片，一个是纹理坐标。
|
|||
|
|
// material.diffuse=texture2D(image,materialInput.st).rgb,获取图片纹素颜色，然后把颜色值给材质的漫反射分量，漫反射代表了材质的颜色，类型是vec3。
|
|||
|
|
// 图片是在uniforms中定义的变量【uniforms.image: './images/53bg.png'】。
|
|||
|
|
// 纹理坐标是二维的平面坐标，s轴和t轴垂直大小在0到1之间，（0，0）在左下角。
|
|||
|
|
// */ `
|
|||
|
|
// czm_material czm_getMaterial(czm_materialInput materialInput){
|
|||
|
|
// czm_material material=czm_getDefaultMaterial(materialInput);
|
|||
|
|
// material.diffuse=texture2D(image,materialInput.st).rgb;
|
|||
|
|
// return material;
|
|||
|
|
// }
|
|||
|
|
// `
|
|||
|
|
source: /* glsl */ `
|
|||
|
|
czm_material czm_getMaterial(czm_materialInput materialInput){
|
|||
|
|
czm_material material=czm_getDefaultMaterial(materialInput);
|
|||
|
|
material.diffuse=texture2D(image,materialInput.st).rgb;
|
|||
|
|
material.alpha=alpha;
|
|||
|
|
vec2 center=vec2(0.5,0.5);
|
|||
|
|
float dis=distance(center,materialInput.st);
|
|||
|
|
if(dis>0.25){
|
|||
|
|
material.diffuse=vec3(0.0);
|
|||
|
|
}
|
|||
|
|
if(dis<0.1){
|
|||
|
|
material.diffuse=vec3(1.0);
|
|||
|
|
}
|
|||
|
|
return material;
|
|||
|
|
}
|
|||
|
|
`
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// material 材质，fabric（面料）是Cesium自己定义的一种写材质的一种语法，是一个JSON。
|
|||
|
|
// GLSL，最灵活的一种定义材质的方式是写GLSL，为Fabric指定source属性，在Cesium源码中会读取source并加工合并到最终的着色器中进行图形绘制。
|
|||
|
|
/**
|
|||
|
|
* 在 source 中我们可以使用 webgl 的内置函数,比如step，fract等等，也可直接使用cesium内置函数、变量、结构体等，比如czm_xxxx等。
|
|||
|
|
* struct czm_materialInput
|
|||
|
|
{
|
|||
|
|
float s;
|
|||
|
|
vec2 st;
|
|||
|
|
vec3 str;
|
|||
|
|
mat3 tangentToEyeMatrix;
|
|||
|
|
vec3 positionToEyeEC;
|
|||
|
|
vec3 normalEC;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
struct czm_material
|
|||
|
|
{
|
|||
|
|
vec3 diffuse;
|
|||
|
|
float specular;
|
|||
|
|
float shininess;
|
|||
|
|
vec3 normal;
|
|||
|
|
vec3 emission;
|
|||
|
|
float alpha;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
czm_material czm_getMaterial(czm_materialInput materialInput);//返回默认的材质属性
|
|||
|
|
|
|||
|
|
最简单的定义如下，这是直接返回默认的材质属性，
|
|||
|
|
这也是我们写shader的切入点，可以传入uniforms变量，可以从纹理中获取原色，也结合时间变化来动态修改材质等等。
|
|||
|
|
*/
|
|||
|
|
const wallGeometry = new Cesium.WallGeometry({
|
|||
|
|
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
|
|||
|
|
112, 20.0, 40000.0, 114, 30.0, 40000.0, 115.0, 20.0, 40000.0, 116.0,
|
|||
|
|
30.0, 40000.0, 117.0, 20.0, 40000.0,
|
|||
|
|
]),
|
|||
|
|
});
|
|||
|
|
const geometry = Cesium.WallGeometry.createGeometry(wallGeometry);
|
|||
|
|
var wall = new Cesium.Primitive({
|
|||
|
|
geometryInstances: [
|
|||
|
|
wallGeometry,
|
|||
|
|
],
|
|||
|
|
appearance: new Cesium.MaterialAppearance({
|
|||
|
|
material: Cesium.Material.fromType('Color'),
|
|||
|
|
faceForward: true
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
wall.appearance.material = new Cesium.Material({
|
|||
|
|
fabric: {
|
|||
|
|
uniforms: {
|
|||
|
|
color: "vec3(1.0,1.0,0.0)",
|
|||
|
|
alpha: 1.0,
|
|||
|
|
image: "/images/colors1.png",
|
|||
|
|
image2: "/images/colors2.png",
|
|||
|
|
t: 0.0,
|
|||
|
|
},
|
|||
|
|
source: /* glsl */ `
|
|||
|
|
czm_material czm_getMaterial(czm_materialInput materialInput){
|
|||
|
|
czm_material material=czm_getDefaultMaterial(materialInput);
|
|||
|
|
material.diffuse=vec3(1.0,1.0,0.0);
|
|||
|
|
// material.alpha=fract(1.0-materialInput.st.s+t);
|
|||
|
|
material.alpha=mod(1.0-materialInput.st.s+t,1.0);
|
|||
|
|
return material;
|
|||
|
|
}
|
|||
|
|
`,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
var position = Cesium.Cartesian3.fromDegrees(
|
|||
|
|
116.331875,
|
|||
|
|
39.110038,
|
|||
|
|
600000
|
|||
|
|
);
|
|||
|
|
viewer.camera.setView({
|
|||
|
|
destination: position,
|
|||
|
|
orientation: {
|
|||
|
|
heading: Cesium.Math.toRadians(0.0), //使用弧度的形式
|
|||
|
|
pitch: Cesium.Math.toRadians(-90.0),
|
|||
|
|
roll: 0.0,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|