93a0f45cfab6c4c064cb3129650e2209
Cesium专栏-裁剪分析(基于3dtiles模型,附源码下载)

Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证。

关于裁剪


裁剪在PS下大概都很熟悉,框出一个矩形选择自己想要的部分就是裁剪功能了,那么,在三维里,在Cesium中,可以模拟这种动态裁剪模型效果,查看浏览模型在某一个剖面内部的细节。本文侧重于基于3dtiles模型的裁剪效果。

效果图

还未裁剪

已经裁剪

需要提前预习的接口


  • ClippingPlaneCollection
  • ClippingPlane
  • Plane
  • Cesium3DTileset
  • CallbackProperty

具体操作

1、初始化地球,并开启深度测试

Cesium.Ion.defaultAccessToken = 'xxxx';
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
    })
});
var scene = viewer.scene;
viewer.scene.globe.depthTestAgainstTerrain = true;

2、创建切面平面对象

// 创建切面平面集合
var clippingPlanes = new Cesium.ClippingPlaneCollection({
    planes: [
        new Cesium.ClippingPlane(new Cesium.Cartesian3(0, 0, -1), 0) // 平面的方向 以及 平面到原点的距离
    ],
    edgeColor: Cesium.Color.WHITE, // 平面切割时模型的边缘颜色
    edgeWidth: 0 // 平面切割时模型的边缘宽度
});

3、加载3dtiles模型,并指定裁剪平面

// 加载大雁塔模型
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: "http://localhost:90/dayanta/tileset.json",
    clippingPlanes: clippingPlanes
}));

4、创建切面的可视化对象
```
tileset.readyPromise.then(function () {
// 当模型加载完成后,改变高度,3dtile模型一般都会飘在空中

top Created with Sketch.