cesium 绘制渐变圆锥

### 创建渐变颜色的圆锥几何图形 为了在 Cesium 中创建带有渐变效果的圆锥几何图形，需要理解并组合使用 `Cesium.Geometry` 和外观（Appearance）的相关功能。具体来说： #### 定义几何形状 通过继承或扩展 `Cesium.Geometry` 类来定义新的几何类型[^1]。对于圆锥形而言，虽然 Cesium 并未直接提供现成的圆锥几何构造器，但可以根据顶点位置构建三角面片集合模拟圆锥形态。 ```javascript function createConeGeometry(options) { const radius = options.radius; const height = options.height; let positions = []; let indices = []; // 底部圆形边缘上的点数 const segments = 32; for (let i = 0; i <= segments; ++i) { var angle = Math.PI * 2 / segments * i; positions.push( Math.cos(angle) * radius, -height / 2, Math.sin(angle) * radius); if(i > 0){ indices.push(0, i % segments || segments, (i - 1) % segments || segments); } } return new Cesium.Geometry({ attributes : { position : new Cesium.GeometryAttribute({ componentDatatype : Cesium.ComponentDatatype.DOUBLE, componentsPerAttribute : 3, values : new Float64Array(positions) }) }, indices : new Uint16Array(indices), primitiveType : Cesium.PrimitiveType.TRIANGLES }); } ``` #### 设置渐变着色 要实现渐变效果，则需利用自定义材质（Material），并通过片段着色器控制不同区域的颜色变化。这里假设希望沿高度方向形成线性渐变。 ```javascript const material = new Cesium.Material({ fabric : { type : 'Gradient', uniforms : { colorTop : new Cesium.Color(1.0, 0.0, 0.0, 1.0), // 上方红色 colorBottom : new Cesium.Color(0.0, 0.0, 1.0, 1.0)// 下方蓝色 }, source : ` czm_material czm_getMaterial(czm_materialInput materialInput){ czm_material material = czm_getDefaultMaterial(materialInput); float h = clamp((materialInput.st.s + 1.) / 2., 0., 1.); vec4 c = mix(colorBottom, colorTop, h); material.diffuse = c.rgb; material.alpha = c.a; return material; }` } }); ``` #### 构建Primitive对象 最后一步是将上述定义好的几何体与指定材料一起封装到 `Cesium.Primitive` 对象中，并将其添加至场景视图内显示出来。 ```javascript // 假设已存在viewer实例 var coneInstance = new Cesium.GeometryInstance({ geometry : createConeGeometry({radius: 5e5, height: 1e6}) }); var appearance = new Cesium.PerInstanceColorAppearance({ flat : true, translucent : false, closed : true, materialSupport : Cesium.MaterialAppearance.MATERIAL_SUPPORT.ALL, faceForward : true, renderState : undefined, vertexFormat : Cesium.VertexFormat.POSITION_ONLY }); appearance.material = material; var conePrimitive = new Cesium.Primitive({ geometryInstances : coneInstance, appearance : appearance }); viewer.scene.primitives.add(conePrimitive); ``` 以上代码展示了如何基于给定参数创建一个简单的圆锥几何模型，并应用了一个从底部向顶部过渡的RGB色彩渐变方案[^3]。