项目地址

https://github.com/zhengjie9510/webgis-demo

实现效果

实现方法

1、建立 Geometry 对象

      // Create a cube//    v6----- v5//   /|      /|//  v1------v0|//  | |     | |//  | |v7---|-|v4//  |/      |///  v2------v3var vertices = new Float32Array([// Vertex coordinates1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, // v0-v1-v2-v3 front1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, // v0-v3-v4-v5 right1.0, 1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up-1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, // v1-v6-v7-v2 left-1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0, // v7-v4-v3-v2 down1.0, -1.0, -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, // v4-v7-v6-v5 back])var colors = new Float32Array([// Colors0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, // v0-v1-v2-v3 front(blue)0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, // v0-v3-v4-v5 right(green)1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, 1.0, 0.4, 0.4, // v0-v5-v6-v1 up(red)1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, // v1-v6-v7-v2 left1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, // v7-v4-v3-v2 down0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, 0.4, 1.0, 1.0, // v4-v7-v6-v5 back])var attributes = new GeometryAttributes({position: new GeometryAttribute({componentDatatype: ComponentDatatype.DOUBLE,componentsPerAttribute: 3,values: vertices,}),color: new GeometryAttribute({componentDatatype: ComponentDatatype.FLOAT,componentsPerAttribute: 3,values: colors,}),})var indices = new Uint8Array([// Indices of the vertices0, 1, 2, 0, 2, 3, // front4, 5, 6, 4, 6, 7, // right8, 9, 10, 8, 10, 11, // up12, 13, 14, 12, 14, 15, // left16, 17, 18, 16, 18, 19, // down20, 21, 22, 20, 22, 23, // back])//包围球var boundingSphere = new BoundingSphere(new Cartesian3(0.0, 0.0, 0.0),2.0)var geometry = new Geometry({attributes: attributes,indices: indices,primitiveType: PrimitiveType.TRIANGLES,boundingSphere: boundingSphere,})

2、建立 Appearance 对象

      function v_shader() {return `attribute vec3 position3DHigh;attribute vec3 position3DLow;attribute float batchId;attribute vec4 color;varying vec4 v_color;void main() {vec4 position = czm_modelViewProjectionRelativeToEye *czm_computePosition();v_color = color;gl_Position = position;}`}function f_shader() {return `varying vec4 v_color;void main() {vec4 color = czm_gammaCorrect(v_color);gl_FragColor = color;}`}let appearance = new Appearance({translucent: false, //显示不为半透明closed: true,renderState: {blending: BlendingState.PRE_MULTIPLIED_ALPHA_BLEND, //使用Alpha混合功能启用混合depthTest: { enabled: true }, //深度检测depthMask: true, //将深度值写入深度缓冲区},fragmentShaderSource: f_shader(), //片段着色器vertexShaderSource: v_shader(), //顶点着色器})

Cesium自定义几何体相关推荐

Cesium自定义天空盒子图片
Cesium自定义天空盒子图片效果图改造SkyBox代码 const {BoxGeometry,Cartesian3,defaultValue,defined,destroyObject,Deve ...
Cesium自定义天空盒
Cesium自定义天空盒前言 Cesium自带有天空盒满足大多数场景,但是在一下特殊场景可能自带的天空盒不太适用. 实现效果实现思路 Cesium远景天空盒可以使用Cesium.SkyBox类实现 ...
Cesium 自定义箭头坐标轴圆坐标轴（一）
Cesium 自定义箭头坐标轴圆坐标轴(一) 箭头坐标轴和圆坐标轴实现思路绘制箭头坐标绘制圆坐标总结箭头坐标轴和圆坐标轴为了实现Cesium 对模型的拖拽平移和旋转,需要以模型为中心建立 ...
Cesium自定义编辑多边形
参考geojson.io网站用cesium实现自定义编辑多边形功能绘制多边形在cesium官方所给的实例中,Drawing on Terrain中可以做到自定义绘制多边形,但无法做到修改编辑,因此 ...
cesium 自定义百度底图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...
Cesium自定义Primitive
一般情况下我们使用实体类时,会直接用Entity,但是动态更新实时渲染的不闪烁的话,得使用CallbackProperty回调函数,比较麻烦.可以通过自定义Primitive达到实时渲染效果. fun ...
Cesium 自定义弹窗聚合
拓展了cesium的聚合,自定义聚合的样式.非聚合状态下,弹窗自动显示,聚合状态下,弹窗消失. 非聚合状态: 部分聚合状态下: 全部聚合状态下: 说之下大致思路: 其中聚合后的效果是通过canvas绘 ...
Cesium自定义shader材质实现逼真水面，支持uniforms属性实时修改
水的shader代码参考的是Shader - Shadertoy BETA 本文主要解决在cesium的shader中如何实时修改时间变量iTime,从而实现材质的动态变化. MaterialAppe ...
Cesium 自定义Material 系列（十五）
对于绿地纹理我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialGrass{ grassColor?: any, dirtCol ...

Cesium自定义几何体

目录

项目地址

实现效果

实现方法

Cesium自定义几何体相关推荐

最新文章

热门文章