渐变色墙体 ·Gradient Wall· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么Canvas 动态纹理贴图Cesium Entity 高层实体 API效果说明本案例演示渐变色墙体效果创建垂直渐变色带图像用 Canvas 2D 绘制内容并实时映射为 Three.js 纹理核心用到 Canvas、Cesium。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Viewer聚合 Scene、Camera、Clock 与渲染循环是 Cesium 应用入口。CanvasTexture每帧或按需把 2D Canvas 内容上传 GPU适合动态文字、图表、视频帧贴图。Entity面向点线面/模型/标签的高层 API与 Primitive 相比更适合交互与属性驱动。实现步骤创建 Viewer配置地形/影像若案例需要并设置初始相机在requestAnimationFrame循环中更新状态并 renderCesium 为viewer.render或自动渲染代码要点import * as Cesium from cesium// 获取Cesium容器元素用于初始化Viewer const box document.getElementById(box)// 初始化Cesium Viewer配置相关选项 const viewer new Cesium.Viewer(box, { // 禁用动画控件左下角仪表 animation: false, // 禁用图层选择器右上角图层选择按钮 baseLayerPicker: false, // 设置基础影像图层为ArcGIS影像服务 baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl(https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer)), // 禁用全屏按钮右下角全屏选择按钮 fullscreenButton: false, // 禁用时间轴控件 timeline: false, // 禁用信息框 infoBox: false, })// 启用地形深度检测使墙体能够贴合地形 viewer.scene.globe.depthTestAgainstTerrain true // 隐藏Cesium Logo版权信息 viewer._cesiumWidget._creditContainer.style.display none;// 定义围墙的经纬度坐标和高度数据 // 格式为 [经度, 纬度, 高度...]这里定义了一个矩形围墙 const positions [ 115.6434, 28.76762, 10, // 第一个点东经115.6434度北纬28.76762度高度10米 115.6432, 28.76762, 10, // 第二个点东经115.6432度北纬28.76762度高度10米 115.6432, 28.76756, 10, // 第三个点东经115.6432度北纬28.76756度高度10米 115.6434, 28.76756, 10, // 第四个点东经115.6434度北纬28.76756度高度10米 115.6434, 28.76762, 10, // 第五个点闭合点回到第一个点位置 ]// 定义墙体的基本颜色 const color Cesium.Color.YELLOW;// 添加墙体实体到场景中 let wall viewer.entities.add({ wall: { // 设置墙体的位置使用Cesium.Cartesian3.fromDegreesArrayHeights将经纬度高度数组转换为笛卡尔坐标 positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions), // 设置墙体材质使用图像材质属性创建渐变效果 material: new Cesium.ImageMaterialProperty({ transparent: true, // 启用透明度 // 使用自定义函数生成渐变色带图像 image: getColorRamp({ 0.0: color.withAlpha(1.0).toCssColorString(), // 底部不透明黄色 0.2: color.withAlpha(0.8).toCssColorString(), // 20%高度处80%透明度 0.4: color.withAlpha(0.6).toCssColorString(), // 40%高度处60%透明度 0.6: color.withAlpha(0.4).toCssColorString(), // 60%高度处40%透明度 0.8: color.withAlpha(0.2).toCssColorString(), // 80%高度处20%透明度 1.0: color.withAlpha(0.0).toCssColorString(), // 顶部完全透明 }) }), } });// 缩放视角以完整显示创建的墙体 viewer.zoomTo(wall);/**创建垂直渐变色带图像param {Object} val - 颜色值对象键为位置比例(0.0-1.0)值为CSS颜色字符串returns {HTMLCanvasElement} 包含垂直渐变的canvas元素*/ function getColorRamp(val) { // 创建canvas元素用于绘制渐变色带 const ramp document.createElement(canvas); ramp.width 1; // 宽度为 1 像素只需要垂直方向的渐变 ramp.height 100; // 高度为 100 像素 // 获取2D绘图上下文 const ctx ramp.getContext(2d); // 创建垂直线性渐变从顶部(0,0)到底部(0,100) const grd ctx.createLinearGradient(0, 0, 0, 100); // 添加颜色断点到渐变中 for (let key in val) { // 反转颜色位置因为Canvas坐标系与我们期望的渐变方向相反 grd.addColorStop(1 - Number(key), val[key]); } // 应用渐变填充整个canvas ctx.fillStyle grd; ctx.fillRect(0, 0, 1, 100); // 返回生成的渐变图像 return ramp; }完整源码GitHub小结本文提供渐变色墙体完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库
Cesium 渐变色墙体教程
渐变色墙体 ·Gradient Wall· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么Canvas 动态纹理贴图Cesium Entity 高层实体 API效果说明本案例演示渐变色墙体效果创建垂直渐变色带图像用 Canvas 2D 绘制内容并实时映射为 Three.js 纹理核心用到 Canvas、Cesium。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Viewer聚合 Scene、Camera、Clock 与渲染循环是 Cesium 应用入口。CanvasTexture每帧或按需把 2D Canvas 内容上传 GPU适合动态文字、图表、视频帧贴图。Entity面向点线面/模型/标签的高层 API与 Primitive 相比更适合交互与属性驱动。实现步骤创建 Viewer配置地形/影像若案例需要并设置初始相机在requestAnimationFrame循环中更新状态并 renderCesium 为viewer.render或自动渲染代码要点import * as Cesium from cesium// 获取Cesium容器元素用于初始化Viewer const box document.getElementById(box)// 初始化Cesium Viewer配置相关选项 const viewer new Cesium.Viewer(box, { // 禁用动画控件左下角仪表 animation: false, // 禁用图层选择器右上角图层选择按钮 baseLayerPicker: false, // 设置基础影像图层为ArcGIS影像服务 baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl(https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer)), // 禁用全屏按钮右下角全屏选择按钮 fullscreenButton: false, // 禁用时间轴控件 timeline: false, // 禁用信息框 infoBox: false, })// 启用地形深度检测使墙体能够贴合地形 viewer.scene.globe.depthTestAgainstTerrain true // 隐藏Cesium Logo版权信息 viewer._cesiumWidget._creditContainer.style.display none;// 定义围墙的经纬度坐标和高度数据 // 格式为 [经度, 纬度, 高度...]这里定义了一个矩形围墙 const positions [ 115.6434, 28.76762, 10, // 第一个点东经115.6434度北纬28.76762度高度10米 115.6432, 28.76762, 10, // 第二个点东经115.6432度北纬28.76762度高度10米 115.6432, 28.76756, 10, // 第三个点东经115.6432度北纬28.76756度高度10米 115.6434, 28.76756, 10, // 第四个点东经115.6434度北纬28.76756度高度10米 115.6434, 28.76762, 10, // 第五个点闭合点回到第一个点位置 ]// 定义墙体的基本颜色 const color Cesium.Color.YELLOW;// 添加墙体实体到场景中 let wall viewer.entities.add({ wall: { // 设置墙体的位置使用Cesium.Cartesian3.fromDegreesArrayHeights将经纬度高度数组转换为笛卡尔坐标 positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions), // 设置墙体材质使用图像材质属性创建渐变效果 material: new Cesium.ImageMaterialProperty({ transparent: true, // 启用透明度 // 使用自定义函数生成渐变色带图像 image: getColorRamp({ 0.0: color.withAlpha(1.0).toCssColorString(), // 底部不透明黄色 0.2: color.withAlpha(0.8).toCssColorString(), // 20%高度处80%透明度 0.4: color.withAlpha(0.6).toCssColorString(), // 40%高度处60%透明度 0.6: color.withAlpha(0.4).toCssColorString(), // 60%高度处40%透明度 0.8: color.withAlpha(0.2).toCssColorString(), // 80%高度处20%透明度 1.0: color.withAlpha(0.0).toCssColorString(), // 顶部完全透明 }) }), } });// 缩放视角以完整显示创建的墙体 viewer.zoomTo(wall);/**创建垂直渐变色带图像param {Object} val - 颜色值对象键为位置比例(0.0-1.0)值为CSS颜色字符串returns {HTMLCanvasElement} 包含垂直渐变的canvas元素*/ function getColorRamp(val) { // 创建canvas元素用于绘制渐变色带 const ramp document.createElement(canvas); ramp.width 1; // 宽度为 1 像素只需要垂直方向的渐变 ramp.height 100; // 高度为 100 像素 // 获取2D绘图上下文 const ctx ramp.getContext(2d); // 创建垂直线性渐变从顶部(0,0)到底部(0,100) const grd ctx.createLinearGradient(0, 0, 0, 100); // 添加颜色断点到渐变中 for (let key in val) { // 反转颜色位置因为Canvas坐标系与我们期望的渐变方向相反 grd.addColorStop(1 - Number(key), val[key]); } // 应用渐变填充整个canvas ctx.fillStyle grd; ctx.fillRect(0, 0, 1, 100); // 返回生成的渐变图像 return ramp; }完整源码GitHub小结本文提供渐变色墙体完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库
