Drawing a point or line or polygon on 3D tile is hiding the drawn element

CesiumJS
1

Hi, I want to pick a point or draw a line/polygon on one my 3Dtileset. When I draw, the drawing is hiding behind the tileset. The line drawn is also hiding in some parts.
Please help me how to show the point/line or drawing on the 3dtileset with out hiding
I created the sandcastle to demonstrate this.
Cesium Sandcastle[cesium_help|436x274

This is the screen shot of the problem I am having
cesium_help

2

Hi! I can’t see the code in the Sandcastle example you shared. Do you mind resharing it?

3

Thank you reply. Sorry about the sandcastle. I thought the sandcastle would have saved. Anyway I am sharing the code I currently using. Please try it on one of the vertical antennas.

Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlM2FmMDlkMS01M2IxLTQ3YTgtOTA5OS1hZDk0OWNhNjdmN2EiLCJpZCI6NDIxNDIsImlhdCI6MTYxMTA0NDE5OH0.0AVb7rKx3ZklO-o9CFhJkKi9tqNVP1X9USNxVfqs0PE";

var viewer = new Cesium.Viewer("cesiumContainer", {  
  selectionIndicator: false,
  infoBox: false,
});

viewer.animation.container.style.visibility = 'hidden';
viewer.timeline.container.style.visibility = 'hidden';

viewer.scene.globe.depthTestAgainstTerrain = false;
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);


var tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(373492),
    })
);

tileset.readyPromise.then(function (tileset) {
    //viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -0.5, 0));
  viewer.zoomTo(tileset);
});

// Home button override to zoom to tileset
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
    e.cancel = true;
    viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -0.5, 0));
});


function createPoint(clickPosition) {
    var point = viewer.entities.add({
        position: clickPosition,
        point: {
            show: true,
            color: Cesium.Color.Yellow,
            pixelSize: 7,
            heightReference: Cesium.HeightReference.NONE,
        },
    });
    return point;
}


// Drawing mode. Initially only line is supported
var drawingMode = "line";
function drawShape(positionData) {
  var shape;
  shape = viewer.entities.add({
	  polyline: {
		positions: positionData,
		material: new Cesium.ColorMaterialProperty(
			Cesium.Color.YELLOW.withAlpha(0.7)),
		clampToGround: false,
		width: 3,
      }
    });
  return shape;
}
  
var activeShapePoints = [];
var activeShape;
var floatingPoint;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {

    var position = viewer.scene.pickPosition(event.position);

    if (Cesium.defined(position)) {
        if (activeShapePoints.length === 0) {
            floatingPoint = createPoint(position);
            activeShapePoints.push(position);
            var dynamicPositions = new Cesium.CallbackProperty(function () {
                return activeShapePoints;
            }, false);
            activeShape = drawShape(dynamicPositions);
        }
        activeShapePoints.push(position);
        createPoint(position);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);


handler.setInputAction(function (event) {
    if (Cesium.defined(floatingPoint)) {
        var newPosition = viewer.scene.pickPosition(event.endPosition);
        if (Cesium.defined(newPosition)) {
            floatingPoint.position.setValue(newPosition);
            activeShapePoints.pop();
            activeShapePoints.push(newPosition);
            
        }
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


function terminateShape() {
    activeShapePoints.pop();
    drawShape(activeShapePoints);
    viewer.entities.remove(floatingPoint);
    viewer.entities.remove(activeShape);
    floatingPoint = undefined;
    activeShape = undefined;
    activeShapePoints = [];
}
handler.setInputAction(function (event) {
    terminateShape();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
4

Hi Dzung. can you provide any Idea how to solve this problem

5

I want to draw square polygon on click and drag on the map. Could you please help on the same