Cesium2s文档

Appearance

3DTiles模型加载 ​

cesium2s支持两种格式的模型，gltf和3dtiles

3dtiles模型适合作为倾斜摄影、建筑白膜等数据量较大的模型加载方案，gltf则更适合体积较小的模型加载方案；

1.加载3dtiles ​

加载倾斜摄影 ​

下面的代码以西安大雁塔的倾斜摄影模型为例，将其加载到三维场景中:

ts
fair
  .loadCesium3DTiles({
    id: "大雁塔",
    tilesetUrl: "/nginxSource/models/3dtiles/dayanta/tileset.json", //3dtiles资源路径
    offset: -25, //垂直高度向下偏移25米以更好地贴地
    fly:true //加载完成后是否飞行到模型位置
  })

结果展示：

image-20251023161249725

加载建筑白膜 ​

加载建筑白膜的方式与加载倾斜摄影的方式相同，因为他们都是3dtiles资源：

ts
fair
  .loadCesium3DTiles({
    id: "建筑白膜",
    tilesetUrl: "/nginxSource/models/3dtiles/xian/tileset.json",
    offset: 390,
    fly:true
  })

3dtiles样式设置 ​

对于建筑白膜，如果需要修改其样式，可以通过设置其style属性来设置

ts
fair
  .loadCesium3DTiles({
    id: "建筑白膜",
    tilesetUrl: "/nginxSource/models/3dtiles/xian/tileset.json",
    offset: 390,
    fly:true
  })
  .then((tileset) => {
    //设置模型整体样式
    tileset.setStyle({
      color: "rgba(0, 120, 50, 0.5)",
      show: true,
    })
    //清除样式
    // tileset.style = undefined;
  })

结果展示：

image-20251023161249725

支持设置条件样式：

ts
//设置模型整体样式
tileset.setStyle({
  defines: {
    district: "${feature['Floor']}",
  },
  color: {
    conditions: [
      ["${Floor} <=5 ", 'color("green", 0.7)'],
      ["${Floor} <=10 ", 'color("yellow", 0.7)'],
      ["${Floor} >10 ", 'color("red", 0.7)'],
    ],
  }
})

渲染结果：

image-20251023161249725

💡 提示

更多关于样式配置的内容请查阅官方文档：https://github.com/CesiumGS/3d-tiles/tree/main/specification/Styling