Cesium Three切换 ·Cesium Switch· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么Cesium Viewer 初始化与场景配置相机交互控制器外部模型 / 3D Tiles 加载Cesium Entity / DataSource 高层 APICesium 屏幕空间拾取交互Cesium 相机定位与跟随效果说明本案例演示Cesium Three切换效果基于 WebGL 实现「Cesium Three切换」可视化效果附完整可运行源码核心用到 OrbitControls、glTF/Draco、Cesium。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Viewer聚合 Scene、Camera、Clock 与渲染循环是 Cesium 应用入口。OrbitControls提供轨道旋转/缩放开启enableDamping后需在 animate 中controls.update()。Entity面向点线面/模型/标签的高层 API与 Primitive 相比更适合交互与属性驱动。实现步骤创建 Viewer配置地形/影像若案例需要并设置初始相机异步加载模型 / 3D Tiles / GeoJSON 等资源并加入 scene 或 entities创建 OrbitControls及 Raycaster 等交互控件若源码包含在定时器或 GSAP 时间轴中更新 uniform / 变换驱动特效播放在requestAnimationFrame循环中更新状态并 renderCesium 为viewer.render或自动渲染代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js import * as Cesium from cesium import * as dat from dat.gui import gsap from gsapconst box document.getElementById(box)/------Cesium 操作--------/ const cesiumBox document.createElement(div) Object.assign(cesiumBox.style, { height: 100%, width: 100%, }) box.appendChild(cesiumBox)const viewer new Cesium.Viewer(cesiumBox, { animation: false,//是否创建动画小器件左下角仪表 baseLayerPicker: false,//是否显示图层选择器右上角图层选择按钮 baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl(https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer)), fullscreenButton: false,//是否显示全屏按钮右下角全屏选择按钮 timeline: false,//是否显示时间轴 infoBox: false,//是否显示信息框 })const entity viewer.entities.add({ name: 房子, position: Cesium.Cartesian3.fromDegrees(116.3975, 39.9085, 0), // 北京的经纬度和高度 model: { uri: FILE_HOST models/glb/build2.glb, minimumPixelSize: 100, // 最小像素大小 maximumScale: 20000, // 最大缩放比例 } }) viewer.zoomTo(entity, new Cesium.HeadingPitchRange(0, -Math.PI / 4, 200)) // 设置相机位置和角度viewer.screenSpaceEventHandler.setInputAction(async (movement) { const pickedObject viewer.scene.pick(movement.position); if (Cesium.defined(pickedObject) pickedObject.id entity) { if (pickedObject.id.name 房子) { viewer.flyTo(entity) setTimeout(() { threeBox.style.display block cesiumBox.style.display none const oldPosition camera.position.clone() camera.position.set(0, 40, 40) // 设置新的相机位置 gsap.to(camera.position, { ...oldPosition, duration: 2 }) }, 1800) } } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); /------Cesium 操作--------//---------Three 操作---------/ const threeBox document.createElement(div) threeBox.style.height 100% threeBox.style.width 100% threeBox.style.position absolute threeBox.style.top 0 threeBox.style.left 0 box.appendChild(threeBox)const scene new THREE.Scene() const camera new THREE.PerspectiveCamera(75, threeBox.clientWidth / threeBox.clientHeight, 0.1, 1000000) camera.position.set(0, 1, 3) const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true }) renderer.setSize(threeBox.clientWidth, threeBox.clientHeight) threeBox.appendChild(renderer.domElement) scene.add(new THREE.AmbientLight(0xffffff, 3), new THREE.AxesHelper(1000)) renderer.setAnimationLoop(() renderer.render(scene, camera)) new OrbitControls(camera, renderer.domElement) new GLTFLoader().load(FILE_HOST models/glb/build2.glb, (gltf) { scene.add(gltf.scene) gltf.scene.position.set(-5, 0, 5) }) threeBox.style.display none // 默认隐藏 Three.js 视图 /---------Three 操作---------/const gui new dat.GUI() const options { cesium: true, three: false }gui.add(options, cesium).name(Cesium).onChange((value) cesiumBox.style.display value ? block : none) gui.add(options, three).name(Three.js).onChange((value) threeBox.style.display value ? block : none)gui.add({ switch: () { gsap.to(camera.position, { x: 0, y: 40, z: 40, duration: 1.5, onComplete: () { threeBox.style.display none cesiumBox.style.display block viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(116.3975, 39.9085, 200), // 北京的经纬度和高度 duration: 1.5, }) }})} }, switch).name(切换回Cesium)GLOBAL_CONFIG.ElMessage(点击模型切换到 Three.js场景)完整源码GitHub小结本文提供Cesium Three切换完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库