cesium融合three ·CesiumThree· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么requestAnimationFrame渲染循环与resize自适应效果说明本案例演示cesium融合three效果基于 WebGL 实现「cesium融合three」可视化效果附完整可运行源码。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Viewer封装地球、相机、图层可关闭 animation/timeline 等 UI 精简界面。ImageryLayer叠加 XYZ/WMTS/ArcGIS 等底图imageryLayers.add/remove管理。实现步骤初始化Cesium.Viewer与底图图层添加 Entity / Primitive / DataSource 等业务对象按需camera.flyTo定位视角代码要点import * as Cesium from cesiumimport * as THREE from threeconst cesiumBox document.getElementById(box)const threeBox document.createElement(div)Object.assign(threeBox.style, {position: absolute,pointerEvents: none,zIndex: 1,width: 100%,height: 100%})cesiumBox.appendChild(threeBox)const minWGS84 [115.23, 39.55] // 最小经纬度const maxWGS84 [116.23, 41.55] // 最大经纬度initThree(threeBox,initCesium(cesiumBox))// 初始化Cesium function initCesium() {const viewer new Cesium.Viewer(cesiumBox, { baseLayerPicker: false, imageryProvider: false, // 替换 baseLayer: false infoBox: false })viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: https://t0.tianditu.gov.cn/img_w/wmts?tkc4e3a9d54b4a79e885fff9da0fca712a, layer: img, style: default, format: tiles, tileMatrixSetID: w}))viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees((minWGS84[0] maxWGS84[0]) / 2, (minWGS84[1] maxWGS84[1]) / 2 - 1, 200000),orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-60), roll: Cesium.Math.toRadians(0) }})return viewer}function initThree(threeBox, viewer) {const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(45, threeBox.clientHeight / threeBox.clientHeight, 1, 100000000)const renderer new THREE.WebGLRenderer({ alpha: true })renderer.setSize(threeBox.clientWidth, threeBox.clientHeight)threeBox.appendChild(renderer.domElement)const group new THREE.Group()const box new THREE.Mesh(new THREE.BoxGeometry(4, 4, 4), new THREE.MeshNormalMaterial())group.add(box)const box2 new THREE.Mesh(new THREE.BoxGeometry(2, 2, 8), new THREE.MeshBasicMaterial({ color: 0xff0000 }))box2.position.x 6group.add(box2)group.cesium { minWGS84, maxWGS84 }scene.add(group)group.scale.set(15000, 15000, 15000)function render() {syncCesiumThree(group, camera, viewer)renderer.render(scene, camera)requestAnimationFrame(render)}window.onresize () {renderer.setSize(threeBox.clientWidth, threeBox.clientHeight)camera.aspect threeBox.clientWidth / threeBox.clientHeightcamera.updateProjectionMatrix() }render()}/相机同步/ function syncCesiumThree(group, camera, viewer) {// 更新相机位置 camera.fov Cesium.Math.toDegrees(viewer.camera.frustum.fovy)// 笛卡尔坐标转换 const cartToVec cart new THREE.Vector3(cart.x, cart.y, cart.z)// 获取经纬度范围 const { minWGS84, maxWGS84 } group.cesium// 转换为笛卡尔坐标 const center Cesium.Cartesian3.fromDegrees((minWGS84[0] maxWGS84[0]) / 2, (minWGS84[1] maxWGS84[1]) / 2)// 获取定向模型的前进方向 const centerHigh Cesium.Cartesian3.fromDegrees((minWGS84[0] maxWGS84[0]) / 2, (minWGS84[1] maxWGS84[1]) / 2, 1)// 左下坐标 const bottomLeft cartToVec(Cesium.Cartesian3.fromDegrees(minWGS84[0], minWGS84[1]))// 左上坐标 const topLeft cartToVec(Cesium.Cartesian3.fromDegrees(minWGS84[0], maxWGS84[1]))// 方向向量 const latDir new THREE.Vector3().subVectors(bottomLeft, topLeft).normalize()// 设置位置 group.position.copy(center)// 看向中心 group.lookAt(centerHigh.x, centerHigh.y, centerHigh.z)// 设置方向 group.up.copy(latDir)// 更新相机 camera.matrixAutoUpdate false// 相机视图矩阵 const cvm viewer.camera.viewMatrix// 相机逆视图矩阵 const civm viewer.camera.inverseViewMatrixcamera.matrixWorld.set( civm[0], civm[4], civm[8], civm[12], civm[1], civm[5], civm[9], civm[13], civm[2], civm[6], civm[10], civm[14], civm[3], civm[7], civm[11], civm[15] )camera.matrixWorldInverse.set( cvm[0], cvm[4], cvm[8], cvm[12], cvm[1], cvm[5], cvm[9], cvm[13], cvm[2], cvm[6], cvm[10], cvm[14], cvm[3], cvm[7], cvm[11], cvm[15] )camera.updateProjectionMatrix()}完整源码GitHub小结本文提供cesium融合three完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库