Cesium專欄-裁剪效果（基於3dtiles模型，附源碼下載）

Cesium

---

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模型，並指定裁剪平面

更多詳情見小專欄：GIS之家cesium小專欄

文章提供源碼，對本專欄感興趣的話，可以關注一波