3DTiles Clipping Planes例子，可以很容易實現對BIM、Point Cloud、Instanced、Model的任意剖切，其中Instanced是到底是一個什么對象，是怎么來的還不清楚。3DTiles Clipping Planes，對于BIM說來應用場景是有的，比如，需要查看一個建筑內部，應用從上到下的剖分，可以查看內部的結構。但對于點云和model有什么用呢？反正到現在我還沒想出來。但從學習的角度去看，還是可以的。先從簡單的模型剖切開始。

一、創建clippingPlanes并綁定到模型

直接使用?new Cesium.ClippingPlaneCollection創建clippingPlanes。從里面的參數可以看到創建多個剖切面，設置切面與模型相交線的線寬，如果不需要切面邊線，可設置為0；設置剖切面的顏色等。創建ClippingPlane時傳入的有一個new?Cesium.Cartesian3參數，它定義了剖切面的任意性，傳入不同參數，得到不同喑切面。如下圖是一個（1.0,1.0,-1.0）剖切面：

clippingPlanes綁定到模型只需要在創建模型entity時，把clippingPlanes作為可選參數即可。代碼如下：

function loadModel (url) {clippingPlanes = new Cesium.ClippingPlaneCollection({planes: [//切面new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, -1.0),0.0),],edgeWidth: 2.0,// 切面與模型相交線的線寬，如果不需要切面邊線，可設置為0edgeColor: planeColor //切面顏色});var position = Cesium.Cartesian3.fromDegrees(116.43299999999988, 39.915999999999954, 300.0);var heading = Cesium.Math.toRadians(135.0);var pitch = 0.0;var roll = 0.0;var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);var orientation = Cesium.Transforms.headingPitchRollQuaternion(position,hpr);var entity = viewer.entities.add({name: url,position: position,orientation: orientation,model: {uri: url,scale: 8,minimumPixelSize: 100.0,clippingPlanes: clippingPlanes,//設置模型切面},});viewer.flyTo(entity)//加載切面到場景中for (var i = 0; i < clippingPlanes.length; ++i) {var plane = clippingPlanes.get(i);viewer.entities.add({position: position,orientation: orientation,plane: {dimensions: new Cesium.Cartesian2(50.0, 50.0),material: planeColor.withAlpha(0.1),plane: new Cesium.CallbackProperty(createPlaneUpdateFunction(plane), false),outline: true,outlineColor: planeColor,},});} } function createPlaneUpdateFunction (plane) {return function () {plane.distance = targetY;return plane;}; }

代碼中創建?一個垂直于z軸的剖切面，并在創建模型時綁定到模型上，至此，剖切面已經起作用。要注意的是源碼中有一個問題，模型的方向矩陣沒有應用到剖切面上，即：模型使用了??orientation:?orientation,但剖切面沒有使用?：orientation:?orientation。如果模型有平移、旋轉操作時剖切面與被切面不一致。模型旋轉了135度，但剖切面沒有旋轉，如下圖：

正常代碼繪制結果，如下圖：

從正常繪制結果圖來看，剖切面的大小并不影響剖切完整性，即剖切面小于模型也能完整切割，其它繪制剖切面也只是顯示效果和鼠標的交互操作，并沒有別的作用。

二、鼠標交互

鼠標交互就是在加載剖切面時為plane設置一個屬性回調函數，用回調函數實時更新plane的distance屬性，從而得到不同的剖切面。關鍵代碼：??plane:?new?Cesium.CallbackProperty(createPlaneUpdateFunction(plane),?false)。整個鼠標交互代碼如下：

function addListener () {let scene = viewer.scenevar handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(function (down) {var pickedObject = scene.pick(down.position);if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id) && Cesium.defined(pickedObject.id.plane)) {selectedPlane = pickedObject.id.plane;selectedPlane.material = planeColor.withAlpha(0.05);selectedPlane.outlineColor = planeColor;scene.screenSpaceCameraController.enableInputs = false;}}, Cesium.ScreenSpaceEventType.LEFT_DOWN);handler.setInputAction(function () {if (Cesium.defined(selectedPlane)) {selectedPlane.material = planeColor.withAlpha(0.1);selectedPlane.outlineColor = planeColor;selectedPlane = undefined;}scene.screenSpaceCameraController.enableInputs = true;}, Cesium.ScreenSpaceEventType.LEFT_UP);handler.setInputAction(function (movement) {if (Cesium.defined(selectedPlane)) {console.log('movement.endPosition=', movement.endPosition)var deltaY = movement.startPosition.y - movement.endPosition.y;console.log('deltaY=', deltaY)var deltaX = movement.startPosition.x - movement.endPosition.x;console.log('deltaX=', deltaX)targetY += deltaY;}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE); }

三、問題

從交互代碼中可以看到，是利用鼠標在屏幕上的坐標來直接設置，在鼠標拖動函數中

var?deltaY?=?movement.startPosition.y?-?movement.endPosition.y;targetY?+=?deltaY;

在屬性回調函數中：

?plane.distance?=?targetY;

但問題是，雖然鼠標y值能反應出物體在地表的上下關系，但數值并不是一致的。也就是plane.distance與屏幕坐標的數值不是一回事。plane.distance單位應該是米，而屏幕坐標是px。所以直接加就會出現問題，鼠標與剖切面不在一起。因為鼠標向上移動1px，而剖切面向上移動1米。如下圖：

但是現在也沒有更好的解決方案。問題先放著吧。

總結

以上是生活随笔為你收集整理的CESIUM例子学习（十一）——3DTiles Clipping Planes（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。