3dTiles model clipplans()

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(tileset.clippingPlanes,“tileset.clippingPlanes”);
}

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

Hi there,

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

Thanks!
Gabby