Cesium16-Cesium三维模型高度调整

最新推荐文章于 2025-04-14 16:54:43 发布

Giser_轩

最新推荐文章于 2025-04-14 16:54:43 发布

阅读量1.9k

点赞数 9

文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_56492004/article/details/136831265

版权

本文介绍了如何使用Cesium.js处理3DTileset模型中的高度问题，通过计算外包围球中心点的偏移和坐标差异，实现模型高度的调整，提供了相关代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：基本概念

原始数据如果存在高程数据，生产的3DTileset模型数据也会存在高程数据，不过可能由于原始高程数据不准确，造成模型浮空，这时我们就需要对模型进行高度调整。

二：实际操作

1、计算3DTileset外包围球的中心点原始坐标 && 获取偏移一定高度后的外包围球的中心点坐标

2、计算原始坐标和偏移后坐标的笛卡尔坐标分量

3：计算前后偏移的坐标差异变换矩阵，并赋值给dyt.modelMatrix

三：完整代码和效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1.3DTiles模型高度调整</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="../Build/Cesium/Widgets/widgets.css">
</head>
<style>
    * {
        margin: 0px;
        padding: 0;
        box-sizing: border-box;
    }

    #cesiumContainer {
        width: 100vw;
        height: 100vh;

    }

    .cesium-viewer-bottom {
        display: none;
    }

    .heightAdjustDiv {
        position: absolute;
        top: 10px;
        left: 20px;
        background-color: rgba(0, 0, 0, 0.6);
    }
</style>

<body>
    <div id="cesiumContainer"></div>
    <div class="heightAdjustDiv">
        <label style="color:white">高度</label> <br />
        <input type="range" min="-100" max="100" step="1" oninput="change()" id="R" value="0">
        <input type="text" style="width: 70px;" id="heightValue" value="0" onchange="change2()">
    </div>
    <script>
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzZjY5M2UwNi1kODhmLTQzZTItYjc4Ni0yMzlmNTBlYmIxYjgiLCJpZCI6MTU3NTE3LCJpYXQiOjE2OTQ1MDMyOTl9.PSElCoyLF_ecNszBWrrOmB9JH7yPxrSLo-Tx4DIm1LU"
        /* 加载地形 */
        var viewer = new Cesium.Viewer("cesiumContainer", {
            geocoder: false,
            homeButton: false,   //是否显示首页位置工具
            sceneModePicker: false,  //是否显示视角模式切换工具 
            baseLayerPicker: false,  //是否显示默认图层选择工具
            navigationHelpButton: false,  //是否显示导航帮助工具
            animation: false, //是否显示动画工具
            timeline: false, //是否显示时间轴工具
            fullscreenButton: false,//是否显示全屏按钮工具

        })
        /* 开启地形深度检测 */
        viewer.scene.globe.depthTestAgainstTerrain = true
        async function addWorldTerrainAsync() {
            try {
                let terrainProvider = await Cesium.createWorldTerrainAsync();
                viewer.terrainProvider = terrainProvider
            } catch (error) {
                console.log(`this is a ${error}`);
            }
        }


        /* 加载3DTileset数据 */
        let dyt
        async function add3DTileset() {
            dyt = await Cesium.Cesium3DTileset.fromUrl(
                '../Assets/dayanta/tileset.json'
            )
            viewer.scene.primitives.add(dyt)
            viewer.flyTo(dyt)
        }

        /* 1s后进行操作 */
        setTimeout(() => {
            addWorldTerrainAsync()
            add3DTileset()
        }, 1000)

        const R = document.getElementById("R")
        function change() {
            var height = Number(R.value)
            heightValue.value = height
            if (isNaN(height)) {
                return
            }
            //将3DTileset模型的外包围球中心点从笛卡尔空间直角坐标转换为弧度表示
            const cartographic = Cesium.Cartographic.fromCartesian(
                dyt.boundingSphere.center //3DTileset外包围球中心点
            )

            //3DTileset模型的外包围球中心点的原始坐标
            const surface = Cesium.Cartesian3.fromRadians(
                cartographic.longitude,
                cartographic.latitude
            )

            //3DTileset模型的外包围球中心点坐标偏移
            const offset = Cesium.Cartesian3.fromRadians(
                cartographic.longitude,
                cartographic.latitude,
                height
            )

            //计算两个笛卡尔分量的差异
            const translation = Cesium.Cartesian3.subtract(
                offset,
                surface,
                new Cesium.Cartesian3()
            )

            //创建一个表示转换的Matrix4
            dyt.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
        }

        function change2() {
            var height = Number(heightValue.value);
            R.value = height;
            change()
        }
    </script>
</body>


</html>