接到一位知識星友的邀請，實現他需要3Dtiles三維模型的簡單高度調整需求，適合學習Cesium與前端框架結合開發3D可視化項目。

demo源碼運行環境以及配置

運行環境：依賴Node安裝環境，demo本地Node版本:推薦v18+。

運行工具：vscode或者其他工具。

配置方式：下載demo源碼，vscode打開，然后順序執行以下命令： （1）下載demo環境依賴包命令：npm install
（2）啟動demo命令：npm run dev （3）打包demo命令： npm run build

技術棧

Vue 3.5.13

Vite 6.2.0

Cesium 1.128.0

示例效果

核心源碼

<template><div id="cesiumContainer" class="cesium-container"><!-- 模型調整控制面板 --><div class="control-panel"><div class="panel-header"><h3>3D模型調整</h3></div><div class="panel-body"><!-- 高度調整 --><div class="control-group"><label>高度調整:</label><input type="range" min="-100" max="100" step="1" v-model="heightOffset" @input="updateHeight" /><span>{{ heightOffset }}米</span></div><!-- 重置按鈕 --><div class="control-group"><button @click="resetModel">重置模型</button></div></div></div></div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import * as Cesium from 'cesium';
// 定義模型調整參數
const heightOffset = ref(0);
// 保存原始模型矩陣
let originalModelMatrix = null;
// Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M';
// 設置cesium靜態資源路徑
// window.CESIUM_BASE_URL = "/";
// 聲明Cesium Viewer實例
let viewer, tileset = null;
let handler = null;
// 組件掛載后初始化Cesium
onMounted(async () => {// 初始化Cesium Viewerviewer = new Cesium.Viewer('cesiumContainer', {// 基礎配置animation: false, // 動畫小部件baseLayerPicker: false, // 底圖選擇器fullscreenButton: false, // 全屏按鈕vrButton: false, // VR按鈕geocoder: false, // 地理編碼搜索框homeButton: false, // 主頁按鈕infoBox: false, // 信息框 - 禁用點擊彈窗sceneModePicker: false, // 場景模式選擇器selectionIndicator: false, // 選擇指示器timeline: false, // 時間軸navigationHelpButton: false, // 導航幫助按鈕navigationInstructionsInitiallyVisible: false, // 導航說明初始可見性scene3DOnly: false, // 僅3D場景});// 隱藏logoviewer.cesiumWidget.creditContainer.style.display = "none";viewer.scene.globe.enableLighting = true;// 取消天空盒顯示// viewer.scene.skyBox.show = false;// 禁用大氣層和太陽viewer.scene.skyAtmosphere.show = false;// viewer.scene.sun.show = false;// viewer.scene.moon.show = false;// 設置背景為黑色// viewer.scene.backgroundColor = Cesium.Color.BLACK;//前提先把場景上的圖層全部移除或者隱藏 // viewer.scene.globe.baseColor = Cesium.Color.BLACK; //修改地圖藍色背景viewer.scene.globe.baseColor = new Cesium.Color(0.0, 0.1, 0.2, 1.0); //修改地圖為暗藍色背景// 設置抗鋸齒viewer.scene.postProcessStages.fxaa.enabled = true;// 清除默認底圖viewer.imageryLayers.remove(viewer.imageryLayers.get(0));// 加載底圖 - 使用更暗的地圖服務// const imageryProvider = await Cesium.ArcGisMapServerImageryProvider.fromUrl("https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");const imageryProvider = await Cesium.ArcGisMapServerImageryProvider.fromUrl("https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer");const layer = viewer.imageryLayers.addImageryProvider(imageryProvider);// 調整圖層亮度和對比度，使其更暗layer.brightness = 0.8; // 降低亮度layer.contrast = 1.8; // 調整對比度// 設置默認視圖位置 - 默認顯示全球視圖viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(104.0, 30.0, 10000000.0), // 中國中部上空orientation: {heading: 0.0,pitch: -Cesium.Math.PI_OVER_TWO,roll: 0.0}});// 啟用地形深度測試，確保地形正確渲染viewer.scene.globe.depthTestAgainstTerrain = true;// // 清除默認地形// viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider({});const terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(3956);viewer.terrainProvider = terrainProvider;// 開啟幀率viewer.scene.debugShowFramesPerSecond = true;// 使用異步方式加載3D Tiles數據集try {tileset = await Cesium.Cesium3DTileset.fromUrl("./public/data/tileset.json");// 設置3DTiles的樣式，確保每個要素都有一個唯一的IDtileset.style = new Cesium.Cesium3DTileStyle({// 使用默認樣式，但確保每個要素都可以被單獨選擇color: "color('white')"});// 保存原始模型矩陣，用于重置originalModelMatrix = Cesium.Matrix4.clone(tileset.modelMatrix);// 設置模型貼地// 啟用貼地屬性tileset.clampToGround = true;viewer.scene.primitives.add(tileset);viewer.zoomTo(tileset);} catch (error) {console.error("加載3D Tiles數據集失敗:", error);}
});
// 更新模型高度
const updateHeight = () => {if (!tileset) return;// 創建一個新的矩陣，用于調整高度const heightMatrix = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(0, 0, Number(heightOffset.value)));……
};
……
</script>