mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-11-04 01:04:17 +00:00
129 lines
4.3 KiB
HTML
129 lines
4.3 KiB
HTML
|
<!--********************************************************************
|
||
|
|
* by jiawanlong
|
||
|
|
*********************************************************************-->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<link rel="stylesheet" href="./../../libs/cesium/Cesium1.98/Widgets/widgets.css">
|
||
|
|
<script type="text/javascript" src="./../../libs/cesium/Cesium1.98/Cesium.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
|
||
|
|
<div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.viewer = new Cesium.Viewer('map', {
|
||
|
|
imageryProvider: false,
|
||
|
|
baseLayerPicker: false,
|
||
|
|
});
|
||
|
|
var xyz = new Cesium.UrlTemplateImageryProvider({
|
||
|
|
"credit": "安徽",
|
||
|
|
"url": '///data.mars3d.cn/tile/img/{z}/{x}/{y}.jpg'
|
||
|
|
})
|
||
|
|
viewer.imageryLayers.addImageryProvider(xyz)
|
||
|
|
|
||
|
|
|
||
|
|
const modelCenter = Cesium.Cartesian3.fromDegrees(112, 23, 0)
|
||
|
|
const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(modelCenter)
|
||
|
|
|
||
|
|
// 4. 创建着色器程序
|
||
|
|
const vertexShaderText = `
|
||
|
|
in vec3 position;
|
||
|
|
void main() {
|
||
|
|
gl_Position = czm_projection * czm_modelView * vec4(position, 1.0);
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
const fragmentShaderText = `
|
||
|
|
out vec4 fragColor;
|
||
|
|
void main() {
|
||
|
|
fragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
const createCommand = (frameState, matrix) => {
|
||
|
|
const attributeLocations = {
|
||
|
|
"position": 0,
|
||
|
|
}
|
||
|
|
const uniformMap = {
|
||
|
|
u_color() {
|
||
|
|
return Cesium.Color.HONEYDEW
|
||
|
|
},
|
||
|
|
}
|
||
|
|
const positionBuffer = Cesium.Buffer.createVertexBuffer({
|
||
|
|
usage: Cesium.BufferUsage.STATIC_DRAW,
|
||
|
|
typedArray: new Float32Array([
|
||
|
|
0.0, 0.0, 0.0,
|
||
|
|
1000.0, 0.0, 0.0,
|
||
|
|
0.0, 1000.0, 0.0,
|
||
|
|
|
||
|
|
0.0, 0.0, 0.0,
|
||
|
|
1000.0, 0.0, 0.0,
|
||
|
|
0.0, 0, 1000.0
|
||
|
|
]),
|
||
|
|
context: frameState.context,
|
||
|
|
})
|
||
|
|
const vertexArray = new Cesium.VertexArray({
|
||
|
|
context: frameState.context,
|
||
|
|
attributes: [{
|
||
|
|
indices: new Uint16Array([0, 1, 2, 3, 4, 5, 0, 5, 2]),
|
||
|
|
vertexBuffer: positionBuffer,
|
||
|
|
componentsPerAttribute: 3,
|
||
|
|
componentDatatype: Cesium.ComponentDatatype.FLOAT
|
||
|
|
}]
|
||
|
|
})
|
||
|
|
const program = Cesium.ShaderProgram.fromCache({
|
||
|
|
context: frameState.context,
|
||
|
|
vertexShaderSource: vertexShaderText,
|
||
|
|
fragmentShaderSource: fragmentShaderText,
|
||
|
|
attributeLocations: attributeLocations,
|
||
|
|
})
|
||
|
|
const renderState = Cesium.RenderState.fromCache({
|
||
|
|
depthTest: {
|
||
|
|
enabled: true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return new Cesium.DrawCommand({
|
||
|
|
modelMatrix: matrix,
|
||
|
|
vertexArray: vertexArray,
|
||
|
|
shaderProgram: program,
|
||
|
|
uniformMap: uniformMap,
|
||
|
|
renderState: renderState,
|
||
|
|
pass: Cesium.Pass.OPAQUE,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ----- See Here ↓ ------ */
|
||
|
|
|
||
|
|
class StaticTrianglePrimitive {
|
||
|
|
/**
|
||
|
|
* @param {Matrix4} modelMatrix matrix to WorldCoordinateSystem
|
||
|
|
*/
|
||
|
|
constructor(modelMatrix) {
|
||
|
|
this._modelMatrix = modelMatrix
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @param {FrameState} frameState
|
||
|
|
*/
|
||
|
|
update(frameState) {
|
||
|
|
const command = createCommand(frameState, this._modelMatrix)
|
||
|
|
frameState.commandList.push(command)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
viewer.scene.globe.depthTestAgainstTerrain = true
|
||
|
|
viewer.scene.primitives.add(new StaticTrianglePrimitive(modelMatrix))
|
||
|
|
|
||
|
|
// 设置相机位置以查看三角形
|
||
|
|
viewer.camera.setView({
|
||
|
|
destination: Cesium.Cartesian3.fromDegrees(112, 23, 5000.0)
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|