Cesium 融合three教程

原创于 2026-06-22 09:11:34 发布 · 163 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#Cesium.js #cesium融合three #WebGL #源码 #教程

cesium融合three · Cesium+Three · ▶ 在线运行案例

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

你将学到什么

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 'cesium'
import * as THREE from 'three'

const 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?tk=c4e3a9d54b4a79e885fff9da0fca712a",
            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 += 6

group.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.clientHeight

camera.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.inverseViewMatrix

camera.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()

}