Hello there,
Currently I am building and React app along with Cesium Js. My app allows users to draw polygons on scene and than place models on top of them. While my models were entities (glb files) everything was perfect, but because of performance issues when loading huge files I needed to convert them to 3DTilesets (programmatically using Cesium Ion API) and add them as primitives. Issue that I encounter is that now Polygon is “covering” asset even though asset is positioned above and polygon is “grounded”.
Assets are added much after polygons, but I get the same result, there is a house on green polygon but visible only at this angle because polygon’s color hides it.
instantiating cesium viewer:
const terrainProvider = await createWorldTerrainAsync();
const newViewer = new Viewer(cesiumContainerRef.current, {
animation: false,
timeline: false,
homeButton: false,
vrButton: false,
navigationHelpButton: false,
sceneModePicker: false,
baseLayerPicker: false,
requestRenderMode: true,
terrainProvider,
orderIndependentTranslucency: false,
});
newViewer.scene.globe.depthTestAgainstTerrain = true;
setViewer(newViewer);
loading polygons in viewer:
const drawPolygon = (viewer, id, coordinates, color, alpha) => {
const cesiumCoordinates = coordinates.map(([latitude, longitude]) =>
cesiumCartesian3.fromDegrees(longitude, latitude)
);
viewer.scene.groundPrimitives.add(
new GroundPolylinePrimitive({
geometryInstances: new GeometryInstance({
geometry: new GroundPolylineGeometry({
positions: cesiumCoordinates,
width: 4,
}),
attributes: {
color: ColorGeometryInstanceAttribute.fromColor(
cesiumColor.fromCssColorString("#F7BB3E").withAlpha(1)
),
},
}),
appearance: new PolylineColorAppearance(),
})
);
viewer.scene.groundPrimitives.add(
new GroundPrimitive({
geometryInstances: new GeometryInstance({
geometry: new PolygonGeometry({
polygonHierarchy: new PolygonHierarchy(cesiumCoordinates),
perPositionHeight: true,
}),
attributes: {
color: ColorGeometryInstanceAttribute.fromColor(
cesiumColor.fromCssColorString(color).withAlpha(alpha)
),
},
id,
}),
})
);
cesiumCoordinates.forEach((coordinate) => {
viewer.entities.add(
new cesiumEntity({
position: coordinate,
point: new cesiumPointGraphics({
color: cesiumColor.WHITE,
pixelSize: 2,
heightReference: HeightReference.CLAMP_TO_GROUND,
}),
})
);
});
};
loading assets in viewer :
// Calculate terrain height
const cartographicPosition = Cartographic.fromDegrees(
asset.position[1],
asset.position[0]
);
const positions = [cartographicPosition];
await sampleTerrainMostDetailed(terrainProvider, positions);
const terrainHeight = positions[0].height;
// Adjust height based on terrain and asset height
const adjustedHeight = terrainHeight + asset.height;
const adjustedPosition = Cartesian3.fromDegrees(
asset.position[1],
asset.position[0],
adjustedHeight
);
const heading = cesiumMath.toRadians(asset.rotation);
const pitch = cesiumMath.toRadians(0);
const roll = cesiumMath.toRadians(0);
const hpr = new HeadingPitchRoll(heading, pitch, roll);
const orientation = Transforms.headingPitchRollQuaternion(
adjustedPosition,
hpr
);
const modelMatrix = Matrix4.fromTranslationQuaternionRotationScale(
adjustedPosition,
orientation,
new Cartesian3(5, 5, 5)
);
try {
const resource = await IonResource.fromAssetId(asset.assetTileId);
const tileset = await Cesium3DTileset.fromUrl(resource, {
skipLevelOfDetail: true,
baseScreenSpaceError: 1024,
skipScreenSpaceErrorFactor: 16,
skipLevels: 1,
immediatelyLoadDesiredLevelOfDetail: false,
loadSiblings: false,
cullWithChildrenBounds: true,
modelMatrix,
dynamicScreenSpaceError: true,
dynamicScreenSpaceErrorDensity: 0.00278,
dynamicScreenSpaceErrorFactor: 4.0,
dynamicScreenSpaceErrorHeightFalloff: 0.25,
});
tileset.id = `asset-${asset.id}`;
const assetPrimitive = {
id: `asset-${asset.id}`,
primitive: tileset,
};
assetPrimitives.add(assetPrimitive);
viewer.scene.primitives.add(tileset);
} catch (error) {
console.error(`Error creating tileset: ${error}`);
}
Asset is positioned well on polygon but it is not clickable(I am very aware of drillPick but that only solves clicking problem) and it is the same color as polygon area, which looks like some kind of problem with z-index. Thanks in advance
Best regards