企业官网建设流程全解析

渐变色墙体 ·Gradient Wall· ▶ 在线运行案例

• 案例合集：三维可视化功能案例（threehub.cn）
• 开源仓库github地址：https://github.com/z2586300277/three-cesium-examples
• 400个案例代码:网盘链接

你将学到什么

• Canvas 动态纹理贴图
• Cesium Entity 高层实体 API

效果说明

本案例演示渐变色墙体效果：创建垂直渐变色带图像，用 Canvas 2D 绘制内容并实时映射为 Three.js 纹理；核心用到 Canvas、Cesium。建议先打开文首在线案例查看动态画面，再对照下方源码逐步理解。

核心概念

• Viewer聚合 Scene、Camera、Clock 与渲染循环，是 Cesium 应用入口。
• CanvasTexture每帧或按需把 2D Canvas 内容上传 GPU，适合动态文字、图表、视频帧贴图。
• Entity面向点线面/模型/标签的高层 API；与 Primitive 相比更适合交互与属性驱动。

实现步骤

• 创建 Viewer，配置地形/影像（若案例需要）并设置初始相机
• 在requestAnimationFrame循环中更新状态并 render（Cesium 为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 开源仓库