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

**URL:** <https://community.cesium.com/t/drawing-a-point-or-line-or-polygon-on-3d-tile-is-hiding-the-drawn-element/12968>\
**Category:** CesiumJS\
**Created:** [April 5, 2021, 6:52am UTC](https://community.cesium.com/t/drawing-a-point-or-line-or-polygon-on-3d-tile-is-hiding-the-drawn-element/12968 "2021-04-05T06:52:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![psaibharadwaj](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/psaibharadwaj/32/3458_2.png) [@psaibharadwaj](https://community.cesium.com/u/psaibharadwaj)\
**Post date:** [April 5, 2021, 6:52am UTC](https://community.cesium.com/t/drawing-a-point-or-line-or-polygon-on-3d-tile-is-hiding-the-drawn-element/12968/1 "2021-04-05T06:52:55Z")

</div>

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](https://sandcastle.cesium.com/#c=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!)[cesium\_help|436x274

This is the screen shot of the problem I am having  
 ![cesium_help](https://global.discourse-cdn.com/cesium/original/2X/7/7b5078e3bed9ada9eb4a90fc3022bb6b4d391a1b.jpeg)

---

<div class="post-metadata">

**Author:** ![dzung](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dzung/32/2996_2.png) [@dzung](https://community.cesium.com/u/dzung)\
**Post date:** [April 7, 2021, 7:36pm UTC](https://community.cesium.com/t/drawing-a-point-or-line-or-polygon-on-3d-tile-is-hiding-the-drawn-element/12968/2 "2021-04-07T19:36:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![psaibharadwaj](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/psaibharadwaj/32/3458_2.png) [@psaibharadwaj](https://community.cesium.com/u/psaibharadwaj)\
**Post date:** [April 8, 2021, 5:11am UTC](https://community.cesium.com/t/drawing-a-point-or-line-or-polygon-on-3d-tile-is-hiding-the-drawn-element/12968/3 "2021-04-08T05:11:05Z")

</div>

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);
```

---

<div class="post-metadata">

**Author:** ![psaibharadwaj](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/psaibharadwaj/32/3458_2.png) [@psaibharadwaj](https://community.cesium.com/u/psaibharadwaj)\
**Post date:** [December 15, 2021, 4:46am UTC](https://community.cesium.com/t/drawing-a-point-or-line-or-polygon-on-3d-tile-is-hiding-the-drawn-element/12968/4 "2021-12-15T04:46:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ammu](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ammu/32/14000_2.png) [@Ammu](https://community.cesium.com/u/Ammu)\
**Post date:** [February 26, 2024, 12:08pm UTC](https://community.cesium.com/t/drawing-a-point-or-line-or-polygon-on-3d-tile-is-hiding-the-drawn-element/12968/5 "2024-02-26T12:08:56Z")

</div>

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