添加场景（模型）到三维空间

最新推荐文章于 2025-06-08 17:31:08 发布

原创

最新推荐文章于 2025-06-08 17:31:08 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#三维 #webgl #Cesium

本文介绍了如何将3D模型添加到三维空间中，主要聚焦于glTF格式和Cesium库的应用。glTF是一种高效的3D资产传输格式，包含模型的结构、数据、着色器和纹理信息。在Cesium中，通过定义Viewer、视角位置和模型信息，可以将模型插入场景。Cesium提供了Entity和Primitive两种方式加载glTF模型，分别适用于不同的场景需求。

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

基本思想

将模型添加到三维空间中，即确定其在三维空间中的位置和姿态，我们只需要确定其在世界坐标系中的位置（position）和其在三维空间中的姿态（orientation即可）

一些基本概念可以参考我上一篇博客
三维空间中视角位置和物体取向的确定

gltf

glTF的全称是GL传输格式，是一种针对GL(WebGL，OpenGL ES以及OpenGL)接口的运行时资产(asset)。在3D内容的传输和加载中，glTF通过提供一种高效，易扩展，可协作的格式，填补了3D建模工具和现代GL应用之间的空白。

上图是glTF的一个大概结构，分为四大块，最上面的json是一个表述，描述该模型的节点层级，材质，相机，动画等相关逻辑结构，bin则对应这些对象的具体数据信息，glsl是对该模型渲染的着色器，针对该模型的数据信息，给出渲染“配方”，当然还有纹理内容。大块内容可以以Base64的编码内迁到文件中，方便拷贝和加载，也可以以URI的外链方式，侧重重用性。

Cesium代码

我们首先来定义一些后面所需要的基本信息：

定义Viewer

 var viewer = new Cesium.Viewer("cesiumContainer", {
            baseLayerPicker: false,
            fullscreenButton: false,//全屏按钮
            animation: false,//旋转动画按钮
            homeButton: false,//回到起始位置
            timeline: false,//时间轴
            infoBox: false,//
            sceneModePicker: false,//二维三维切换窗口
            navigationHelpButton: false,//操作说明按钮
            geocoder: false,//搜索按钮