Cesium Three切换教程-北京尧图网络

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 开源仓库

Cesium Three切换教程

相关推荐

锂离子电池过压保护方案：BQ29200与PIC18F2455协同设计

掌握mlx-vlm：使用mlx-community/Qwopus3.6-35B-A3B-Coder-8bit进行多模态推理的终极技巧

iOS开发者必看：GMStepper的自动重复功能实现原理与优化技巧

更多资讯

LKY_OfficeTools：重装系统后，下载、安装、激活 Office 一气呵成

AI SDK 如何在 TanStack Start 项目中初始化并运行第一个聊天 Agent

光伏储能双层优化配置配电网选址定容的Matlab实现

RAP开发实战：CDS + Fiori Elements实现主明细显示

警惕GPT-6等虚假AI模型热词：识别技术谣言与信息陷阱

C++ OpenCV工业级工程实战：VS2022配置与cv::Mat内存管理

今日更新

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？