# 3dTiles model clipplans()

**URL:** <https://community.cesium.com/t/3dtiles-model-clipplans/39695>\
**Category:** CesiumJS\
**Created:** [April 1, 2025, 6:30am UTC](https://community.cesium.com/t/3dtiles-model-clipplans/39695 "2025-04-01T06:30:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![11167](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/11167/32/3821_2.png) [@11167](https://community.cesium.com/u/11167)\
**Post date:** [April 1, 2025, 6:30am UTC](https://community.cesium.com/t/3dtiles-model-clipplans/39695/1 "2025-04-01T06:30:05Z")

</div>

When using clipplans(), the model is not clipped at the exact location.

Is there a reason for this?

Here is the source.  
////////////////////////////////////////////////////////////

// Grant CesiumJS access to your ion assets  
Cesium.Ion.defaultAccessToken = “eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhNzY3MThhZC0zZWJhLTQzMzYtODJkZi03MjBmNjE0ZGE2MDEiLCJpZCI6NzgyNSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MDU2MjM3Mn0.vnn3m0r4Tbfm9u-5eZFyiOyIF\_u4linX24QqgKjufxA”;  
const viewer = new Cesium.Viewer(“cesiumContainer”);

try {  
const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(3267717);  
viewer.scene.primitives.add(tileset);  
await viewer.zoomTo(tileset);

// Apply the default style if it exists  
/_const extras = tileset.asset.extras;  
if (  
Cesium.defined(extras) &&  
Cesium.defined(extras.ion) &&  
Cesium.defined(extras.ion.defaultStyle)  
) {  
tileset.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle);  
}_/

const viewModel = {  
debugBoundingVolumesEnabled: false,  
edgeStylingEnabled: true,  
//exampleTypes: clipObjects,  
//currentExampleType: clipObjects[0],  
};

let targetY = 0.0;  
let planeEntities = ;  
let selectedPlane;  
let clippingPlanes;

var toolbar = document.getElementById(‘toolbar’);  
Cesium.knockout.track(viewModel);  
Cesium.knockout.applyBindings(viewModel, toolbar);  
const modelUrl = “../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb”;  
const position = Cesium.Cartesian3.fromDegrees(  
105.870230592,  
20.999783747199999,  
0  
);  
var dig\_point = ;  
var hole\_pts = ;  
var point;  
let shape;

//var points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());  
function createPoint(worldPosition) {  
viewer.entities.remove(point);  
point = viewer.entities.add({  
position: worldPosition,  
point: {  
color: Cesium.Color.WHITE,  
pixelSize: 5,  
heightReference: Cesium.HeightReference.CLAMP\_TO\_GROUND,  
},  
});  
return point;  
}

function drawShape(positionData) {

viewer.entities.remove(shape);  
shape = viewer.entities.add({  
polygon: {  
hierarchy: positionData,  
material: new Cesium.ColorMaterialProperty(  
Cesium.Color.WHITE.withAlpha(0.7)  
),  
},  
});

return shape;  
}  
function terminateShape() {  
activeShapePoints.pop();  
drawShape(activeShapePoints);  
viewer.entities.remove(floatingPoint);  
viewer.entities.remove(activeShape);  
floatingPoint = undefined;  
activeShape = undefined;  
activeShapePoints = ;  
}  
let activeShapePoints = ;  
let activeShape;  
let floatingPoint;  
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);  
handler.setInputAction(function(event) {

```
	var earthPosition = viewer.camera.pickEllipsoid(event.position);
	var longitudeString = Cesium.Cartographic.fromCartesian(earthPosition).longitude*Cesium.Math.DEGREES_PER_RADIAN;
	var latitudeString = Cesium.Cartographic.fromCartesian(earthPosition).latitude*Cesium.Math.DEGREES_PER_RADIAN;
    

dig_point.push(new Cesium.Cartesian3.fromDegrees(longitudeString,latitudeString));

```

console.log(“setDisplayMode2Dto3D–longitudeString ,latitudeString -==================—” + longitudeString +" " + latitudeString);

// `earthPosition` will be undefined if our mouse is not over the globe.  
if (Cesium.defined(earthPosition)) {  
if (activeShapePoints.length === 0) {  
floatingPoint = createPoint(earthPosition);  
activeShapePoints.push(earthPosition);  
const dynamicPositions = new Cesium.CallbackProperty(function () {  
{  
return new Cesium.PolygonHierarchy(activeShapePoints);  
}  
return activeShapePoints;  
}, false);  
activeShape = drawShape(dynamicPositions);  
}  
activeShapePoints.push(earthPosition);  
createPoint(earthPosition);

}

}, Cesium.ScreenSpaceEventType.LEFT\_CLICK);

handler.setInputAction(function(event) {  
hole\_pts = Array.from(dig\_point);  
clipplanes();  
dig\_point = ;

```
    terminateShape();

```

}, Cesium.ScreenSpaceEventType.RIGHT\_CLICK);  
handler.setInputAction(function (event) {  
if (Cesium.defined(floatingPoint)) {  
const newPosition = viewer.camera.pickEllipsoid(event.endPosition);  
if (Cesium.defined(newPosition)) {  
floatingPoint.position.setValue(newPosition);  
activeShapePoints.pop();  
activeShapePoints.push(newPosition);  
}  
}  
}, Cesium.ScreenSpaceEventType.MOUSE\_MOVE);  
function clipplanes(){  
var pointsLength = hole\_pts.length;  
var clippingPlanes = ;  
for (var i = 0; i \< pointsLength; ++i) {  
var nextIndex = (i + 1) % pointsLength;  
console.log(“setDisplayMode2Dto3D–hole\_pts -==================—” + hole\_pts[i]);  
var midpoint = Cesium.Cartesian3.add(hole\_pts[i], hole\_pts[nextIndex], new Cesium.Cartesian3());  
midpoint = Cesium.Cartesian3.multiplyByScalar(midpoint, 0.5, midpoint);  
var up = Cesium.Cartesian3.normalize(midpoint, new Cesium.Cartesian3());  
var right = Cesium.Cartesian3.subtract(hole\_pts[nextIndex], midpoint, new Cesium.Cartesian3());  
right = Cesium.Cartesian3.normalize(right, right);  
var normal = Cesium.Cartesian3.cross(right, up, new Cesium.Cartesian3());  
normal = Cesium.Cartesian3.normalize(normal, normal);  
if (!false){normal = Cesium.Cartesian3.multiplyByScalar(normal, -1 ,normal);}  
var plane = new Cesium.Plane.fromPointNormal(midpoint, normal);  
var clippingPlane = new Cesium.ClippingPlane.fromPlane(plane);  
clippingPlanes.push(clippingPlane);

```
}

```

console.log(clippingPlanes,“clippingPlanes”);

```
tileset.clippingPlanes = new Cesium.ClippingPlaneCollection({
	planes : clippingPlanes,
	edgeColor: Cesium.Color.WHITE,
    edgeWidth : 1.0,
    //unionClippingRegions: viewModel.trou,
   // enabled: viewModel.decoup,
    modelMatrix: Cesium.Matrix4.inverse(
      Cesium.Transforms.eastNorthUpToFixedFrame(tileset.boundingSphere.center),
      new Cesium.Matrix4()
    )
});

```

[//console.log](https://console.log)(tileset.clippingPlanes,“tileset.clippingPlanes”);  
}

} catch (error) {  
console.log(error);  
}

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [April 3, 2025, 4:18pm UTC](https://community.cesium.com/t/3dtiles-model-clipplans/39695/2 "2025-04-03T16:18:59Z")

</div>

Hi there,

To help troubleshoot, would you be able to share you example out as a Sandcastle example with [https://sandcastle.cesium.com/](https://sandcastle.cesium.com/)?

Thanks!  
Gabby