从Three.js转战Cesium？这份模型平移、旋转、缩放的交互实现方案请收好
从Three.js到Cesium：三维模型交互的坐标系思维转换实战指南
当习惯了Three.js中简洁的笛卡尔坐标系后，第一次在Cesium中看到模型随着地球曲率"飘"起来时，那种认知冲击至今难忘。去年在为某智慧城市项目搭建可视化平台时，我们团队就经历了这样的技术阵痛——原本在Three.js中只需几行代码实现的模型拖拽功能，在Cesium里却要处理复杂的椭球面投影计算。本文将分享我们沉淀下来的坐标系转换方法论，帮助WebGL开发者跨越这两个生态的思维鸿沟。
图：Three.js的局部直角坐标系（左）与Cesium的全局椭球坐标系（右）
1. 坐标系本质差异：从局部舞台到全球剧场
Three.js的坐标系就像剧院里的一个方形舞台，所有物体都在这个固定的直角坐标系中表演。而Cesium构建的是整个地球剧场，每个模型都要遵循WGS84椭球面的规则。
1.1 Three.js的"玩具箱"模型
在Three.js中操作模型时，我们实际上是在操作局部坐标系：
// Three.js典型的模型变换 model.position.set(0, 2, 0); // 沿Y轴移动2个单位 model.rotation.y = Math.PI/4; // 绕Y轴旋转45度 model.scale.set(2, 2, 2); // 等比放大2倍这种操作直观得像在摆弄积木，因为坐标系满足：
- 直角坐标系，三个轴完全正交
- 单位长度全局一致
- 旋转中心默认为模型本地原点
1.2 Cesium的"地球仪"挑战
切换到Cesium后，同样的操作需要考虑：
// Cesium中需要处理坐标转换 const position = Cesium.Cartesian3.fromDegrees(116.4, 39.9, 100); // 北京坐标 const modelMatrix = Cesium.Matrix4.fromTranslation(position); entity.modelMatrix = modelMatrix;关键差异点：
| 特性 | Three.js | Cesium |
|---|---|---|
| 坐标系类型 | 局部直角坐标系 | 全局椭球坐标系 |
| 单位含义 | 抽象单位 | 真实米制单位 |
| 旋转基准 | 模型本地原点 | 地球法线方向 |
| 位置表示 | 相对坐标 | 经纬度高程 |
提示：Cesium的
Entity.modelMatrix相当于Three.js中模型的本地变换矩阵，但需要预先转换为世界坐标
2. 平移交互：从直接赋值到坐标转换
在Three.js中拖动模型只需更新position属性，但在Cesium中需要处理地理坐标与场景坐标的双向转换。
2.1 屏幕坐标到地理坐标的转换链
实现拖拽的核心是建立这个转换流程：
屏幕像素坐标 → 场景笛卡尔坐标 → 地表射线交点 → 椭球面法向量 → 新地理坐标具体实现代码：
// 鼠标移动事件处理 handler.setInputAction((movement) => { const ray = viewer.camera.getPickRay(movement.endPosition); const position = viewer.scene.globe.pick(ray, viewer.scene); if (position) { const cartographic = Cesium.Cartographic.fromCartesian(position); entity.position = Cesium.Cartesian3.fromRadians( cartographic.longitude, cartographic.latitude, cartographic.height ); } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);2.2 保持高度一致的平面拖拽
当地图缩放级别较高时，直接使用上述方法会导致模型高度波动。解决方案是锁定初始高度：
let startHeight; handler.setInputAction((click) => { const ray = viewer.camera.getPickRay(click.position); const position = viewer.scene.globe.pick(ray, viewer.scene); startHeight = Cesium.Cartographic.fromCartesian(entity.position).height; }, Cesium.ScreenSpaceEventType.LEFT_DOWN); // 在移动事件中使用固定高度 entity.position = Cesium.Cartesian3.fromRadians( cartographic.longitude, cartographic.latitude, startHeight // 保持初始高度 );3. 旋转控制：从欧拉角到四元数
Three.js常用的rotation.y方式在Cesium中会导致模型在地球表面"打滑"，需要转换旋转思维。
3.1 基于法线的自动朝向
Cesium提供了自动对齐模型到地表法线的功能：
entity.orientation = Cesium.Quaternion.fromHeadingPitchRoll( new Cesium.HeadingPitchRoll( Cesium.Math.toRadians(90), // 朝向东方 0, 0 ) );3.2 实现Three.js风格的轨道旋转
要模拟Three.js的OrbitControls效果，需要组合多个变换：
const rotateHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); rotateHandler.setInputAction((movement) => { const startPos = movement.startPosition; const endPos = movement.endPosition; // 计算屏幕移动量对应的旋转角度 const deltaX = endPos.x - startPos.x; const heading = deltaX * 0.01; // 获取当前模型位置 const position = entity.position.getValue(viewer.clock.currentTime); // 构建旋转矩阵 const rotation = Cesium.Matrix3.fromRotationZ(-heading); const newPosition = Cesium.Matrix3.multiplyByVector( rotation, position, new Cesium.Cartesian3() ); entity.position = newPosition; }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);4. 缩放操作：从局部变换到视觉比例
Three.js中的scale属性在Cesium中需要转换为视觉尺寸调整，同时考虑距离对视觉效果的影响。
4.1 基于距离的动态缩放
实现类似Three.js的均匀缩放效果：
const zoomHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); let startDistance; zoomHandler.setInputAction((wheel) => { const camera = viewer.camera; const position = entity.position.getValue(viewer.clock.currentTime); const distance = Cesium.Cartesian3.distance(camera.position, position); if (!startDistance) startDistance = distance; const delta = wheel * 0.01; // 缩放灵敏度 const scaleFactor = 1 + delta; // 更新模型矩阵 const scale = Cesium.Matrix4.fromUniformScale(scaleFactor); entity.modelMatrix = Cesium.Matrix4.multiply( entity.modelMatrix, scale, new Cesium.Matrix4() ); }, Cesium.ScreenSpaceEventType.WHEEL);4.2 保持视觉一致性的技巧
在球面坐标系中，直接缩放会导致近大远小效应加剧。解决方案是结合相机距离调整：
const baseSize = 100; // 模型基准尺寸 const distanceFactor = Cesium.Cartesian3.distance( camera.position, entity.position ) / 1000; entity.model.scale = new Cesium.Cartesian3( baseSize * distanceFactor, baseSize * distanceFactor, baseSize * distanceFactor );5. 高级技巧：混合控制模式实战
在实际项目中，我们开发了这套混合控制方案，结合了两者的优势：
平面模式：在小范围操作时使用局部直角坐标系
const localTransform = Cesium.Matrix4.fromTranslation( new Cesium.Cartesian3(x, y, z) );球面模式：大范围移动时自动切换为地理坐标
const geoTransform = Cesium.Matrix4.fromTranslation( Cesium.Cartesian3.fromDegrees(lng, lat, alt) );过渡动画：在模式切换时添加插值动画
Cesium.Tween.start({ destination: targetPosition, duration: 0.5, easingFunction: Cesium.EasingFunction.QUADRATIC_OUT });
实现这套系统后，我们的智慧城市可视化平台终于获得了既精确又流畅的操作体验。记得在初次部署时，有个模型因为坐标转换错误出现在了澳大利亚附近——这提醒我们永远要检查坐标系的参考基准。现在团队已经养成了在每次模型导入时，先确认原始坐标系的习惯，这个小小的预防措施帮我们节省了大量调试时间。