Three.js与Cesium如何融合?具体怎么实现?

作者： GIS研习社更新时间：2025-12-03 05:00:03 分类：GIS基础理论

为什么你总想把Three.js塞进Cesium？——一个老GISer的踩坑实录

去年帮某智慧城市项目做三维可视化时，客户指着屏幕问我：“能不能让楼宇模型像游戏里那样‘炸开’展示内部结构？”——Cesium原生不支持复杂粒子动画，而Three.js偏偏是这方面的“特效大师”。那一刻我意识到：单打独斗的时代结束了，融合才是王道。

别再纠结“选谁”，就像你不会只用锅或铲炒菜——Three.js是你的“特效铲”，Cesium是那口“地理坐标锅”，合起来才能炒出惊艳的三维大餐。

底层逻辑揭秘：它们根本不是“竞争对手”

很多人误以为两者功能重叠，其实它们像“剥橘子皮”和“榨果汁机”的关系：

Cesium：专精地球曲率、WGS84坐标、海量地形瓦片——它负责把数据“摆对地方”。
Three.js：擅长局部精细渲染、粒子系统、自定义Shader——它负责让某个区域“美到发光”。

我在国土空间规划项目中验证过：用Cesium加载全省地形，再用Three.js在重点开发区叠加动态热力图，帧率稳定在55fps以上——关键就在于“各司其职”。

实战四步法：手把手教你缝合“双引擎”

第一步：创建共享画布（Shared Canvas）

不要傻乎乎地开两个div！必须让Three.js渲染器挂载到Cesium的canvas上：

// 获取Cesium的底层canvas
const cesiumCanvas = viewer.scene.canvas;

// 创建Three.js渲染器并绑定
const threeRenderer = new THREE.WebGLRenderer({
  canvas: cesiumCanvas,
  context: viewer.scene.context._gl, // 共享WebGL上下文
  alpha: true // 保持透明背景
});

第二步：坐标系暴力转换（亲测最稳方案）

Three.js默认右手坐标系，Cesium是左手系+地球椭球体——直接转换会让人疯掉。我的偷懒方案：

// 将Three.js对象先放在(0,0,0)，再通过Cesium.Entity定位
const modelEntity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
  model: {
    uri: '你的.glb文件',
    scale: 1.0
  }
});

// 获取实体实际世界坐标
viewer.trackedEntity = modelEntity;
viewer.clock.onTick.addEventListener(() => {
  const pos = viewer.scene.globe.ellipsoid.cartesianToCartographic(
    modelEntity.position.getValue(viewer.clock.currentTime)
  );
  // 此时可将经纬高传给Three.js控制的特效对象
});

第三步：深度冲突解决方案（Z-fighting克星）

当Three.js粒子穿过Cesium地形时出现闪烁？这是深度缓冲打架了！在初始化时加这两行：

viewer.scene.globe.depthTestAgainstTerrain = false; // 关闭地形深度测试
threeRenderer.setClearAlpha(0); // Three.js不清除背景

第四步：事件穿透处理（点击不打架）

用户点楼宇时，要同时触发Cesium属性弹窗和Three.js动画？用事件冒泡机制：

cesiumCanvas.addEventListener('click', (event) => {
  // 先让Cesium处理拾取
  const picked = viewer.scene.pick(event);
  if(picked) {
    // 再通知Three.js对应物体播放动画
    triggerThreeJSAnimation(picked.id);
  }
}, false);

性能优化黄金法则（来自血泪教训）

问题现象	错误做法	正确方案
帧率暴跌	每帧重建Three.js场景	复用Geometry/Texture，用Object3D.visible控制显隐
内存泄漏	忘记dispose() Three.js对象	监听Cesium.camera.moveEnd事件，在视野外销毁对象