Cesium 加载3dtiles模型数据

本文介绍了使用Cesium加载3DTiles模型数据的基本方法。首先通过nginx服务发布3DTiles数据，然后提供了HTML代码示例，展示如何创建Cesium Viewer并加载tileset.json模型文件，通过web服务发布即可查看效果，文章提供了示例数据下载链接和效果展示图片。

勇闯天涯528

1591人浏览 · 2025-09-29 15:50:02

勇闯天涯528 · 2025-09-29 15:50:02 发布

Cesium 加载3dtiles模型数据

每日一学，学无止境。

cesium之3DTiles模型数据的加载方式，打开cesium官网文档中搜索Cesium3DTileset即可查看使用方法，如Cesium3DTileset官方文档。

1、数据服务发布

首先我们将3dtiles模型数据通过nginx服务的方式发布出来，在浏览器输入tileset.json文件的url地址确保可正常访问。

备注：nginx需要将跨域配置一下，以免访问时出现跨域问题。

2、创建代码

新建一个html文件，将以下代码复制到文件中。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test_demo</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.116/Apps/Sandcastle/Sandcastle-header.js"></script>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.116/Build/CesiumUnminified/Cesium.js"></script>
    <style>
        @import url(https://cesium.com/downloads/cesiumjs/releases/1.116/Build/CesiumUnminified/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar"></div>
    <script>
        const viewer = new Cesium.Viewer('cesiumContainer');

        async function loadCesium() {
            try {
                let tileset;
                try {
                    tileset = await Cesium.Cesium3DTileset.fromUrl(
                        "http://127.0.0.1:8080/tileset.json"
                    );
                    viewer.scene.primitives.add(tileset);
                } catch (error) {
                    console.log(`Error loading tileset: ${error}`);
                };

                viewer.scene.primitives.add(tileset);
                viewer.scene.globe.depthTestAgainstTerrain = true;
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(151.210, -33.852, 550),
                    orientation: {
                        heading: Cesium.Math.toRadians(-180.0),
                        pitch: Cesium.Math.toRadians(-35.0),
                        roll: 0.0
                    }
                });

            } catch (error) {
                console.error('Error loading TMS imagery:', error);
            }
        };
        loadCesium();
    </script>
</body>

</html>

以上代码中需要修改两处地方：

tileset.json对应的url地址，“http://127.0.0.1:8080/tileset.json”
相机飞往的经纬度坐标和高度，destination: Cesium.Cartesian3.fromDegrees(151.210, -33.852, 550)

3、访问网站

将文件通过web服务的方式发布（可以使用vscode插件、Windows下的IIS服务、Nginx服务），打开浏览器访问当前html文件即可查看。

以上只是一个基础入门操作，更多参数操作可以查看官方文档，最后附上示例及效果展示。

效果展示
示例效果

示例数据

魔珐星云具身智能3D数字人开放平台已上线！

电影级数字人，免显卡端渲染SDK，十行代码即可调用，工业级demo免费开源下载！

更多推荐

深耕TOB产业落地，开放全栈开发能力——视程空间产品为何更适配二次开发与商业化定制

视程空间全系AI算力产品，始终坚守TOB产业服务定位，以开放硬件架构、开源软件生态、全梯度算力适配、深度定制能力、完善技术支撑五大核心优势，精准适配所有具备二次开发能力的企业用户。不做固化成品，只做开放平台，把创新权、定制权、迭代权完全交给客户，助力机器人企业、工业集成商、AI科技公司依托标准化底层硬件，深耕行业场景、打磨自研算法、打造差异化产品、实现规模化商业落地，持续赋能边缘AI与具身智能产业