Use it as a texture map When pasted on a plane without a normal vector, its display effect is correct
But when pasted on a plane with a normal vector, the effect is as shown in the following figure. So, how to ensure that the texture map saves the top left red and top right green
Please try with this code in sandcastle.
const viewer = new Cesium.Viewer("cesiumContainer");
// Create a small textile texture
function createTextileTexture() {
const canvas = document.createElement("canvas");
canvas.width = 256;
canvas.height = 256;
const ctx = canvas.getContext("2d");
// Upper left: Red
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 128, 128);
// Upper right: Green
ctx.fillStyle = "green";
ctx.fillRect(128, 0, 128, 128);
// Lower left: Blue
ctx.fillStyle = "blue";
ctx.fillRect(0, 128, 128, 128);
// Lower right: White
ctx.fillStyle = "white";
ctx.fillRect(128, 128, 128, 128);
return canvas;
}
const textileCanvas = createTextileTexture();
const textileTexture = new Cesium.ImageMaterialProperty({
image: textileCanvas,
transparent: true,
});
const clippingPlanes = [
new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, 50),
new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_Y, 50),
new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_X, -50),
new Cesium.ClippingPlane(Cesium.Cartesian3.UNIT_Y, -50),
];
clippingPlanes.forEach((plane, index) => {
viewer.entities.add({
name: `Clipping Plane ${index + 1}`,
position: Cesium.Cartesian3.fromDegrees(-100.0, 20, 0),
plane: {
dimensions: new Cesium.Cartesian2(100.0, 100.0),
material: textileTexture,
plane: plane,
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
});
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-100.0, 20.0, 200.0),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-45.0),
roll: 0.0,
},
});