Dynamicly drawing polygon with CallbackProperty when terrain is added to map throws error

CesiumJS
1

1. A concise explanation of the problem you're experiencing.
I want to draw polygon dynamicly, The code below works fine when i don`t add terrain. But when terrain is added, it sometimes throws error:

DeveloperError: normalized result is not a number
Error
    at new DeveloperError (/Cesium/Source/Core/DeveloperError.js:43:19)
    at Function.Cartesian3.normalize (/Cesium/Source/Core/Cartesian3.js:420:19)
    at computeAttributes (/Cesium/Source/Core/PolygonGeometry.js:218:53)
    at Function.PolygonGeometry.createGeometry (/Cesium/Source/Core/PolygonGeometry.js:856:37)
    at loadSynchronous (/Cesium/Source/Scene/Primitive.js:1203:56)
    at Primitive.update (/Cesium/Source/Scene/Primitive.js:1771:17)
    at ClassificationPrimitive.update (/Cesium/Source/Scene/ClassificationPrimitive.js:935:25)
    at GroundPrimitive.update (/Cesium/Source/Scene/GroundPrimitive.js:789:25)
    at PrimitiveCollection.update (/Cesium/Source/Scene/PrimitiveCollection.js:365:27)
    at PrimitiveCollection.update (/Cesium/Source/Scene/PrimitiveCollection.js:365:27)

I found that the error occurs when I clicked the map on the same location twice sequencely, the error occurs. And one strange thing is that if i don`t assign callbackproperty to the polygon`s position but a cartesian3 array which the array`s element is the same to the callbackproperty`s dynamic array element, it work fines.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});

var PolygonCreator = function (viewer) {
    this.viewer = viewer;

    this.drawingVertexes = ;
    this.drawingPolygonCreated = false;
    this.callbackProperty = undefined;

    this.onLeftClickHandler = this.onLeftClickHandler.bind(this);
    this.onRightClickHandler = this.onRightClickHandler.bind(this);
    this.onMouseMoveHandler = this.onMouseMoveHandler.bind(this);

    this.bindEvent();
}

PolygonCreator.prototype = {
    constructor: PolygonCreator,
    bindEvent() {
        this.eventHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
        this.eventHandler.setInputAction(this.onLeftClickHandler, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        this.eventHandler.setInputAction(this.onRightClickHandler, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        this.eventHandler.setInputAction(this.onMouseMoveHandler, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },

    onLeftClickHandler(event) {
        var point = this.getEarthPoint(event.position, this.mode);

        this.drawingVertexes.push(point);

        if (this.drawingVertexes.length == 2 && !this.drawingPolygonCreated) {
            this.callbackProperty = new Cesium.CallbackProperty(function () {
                return this.drawingVertexes;
            }.bind(this), false);

            this.addPolygon(this.callbackProperty)
            this.drawingPolygonCreated = true;
        }

        this.addVertex(point);
    },

    onRightClickHandler(event) {
        var point = this.getEarthPoint(event.position, this.mode);
        this.drawingVertexes.push(point);
        this.addVertex(point);
        this.drawingPolygonCreated = false;
    },
    onMouseMoveHandler(event) {
        var point = this.getEarthPoint(event.endPosition, this.mode);
        var drawingVertexes = this.drawingVertexes;
        if (drawingVertexes.length == 2) {
            drawingVertexes.push(point);
        } else if (drawingVertexes.length > 2) {
            drawingVertexes.pop();
            point.y += (1 + Math.random());
            point.x += (1 + Math.random());
            point.z += (1 + Math.random());
            drawingVertexes.push(point);
        }
    },
    getEarthPoint(position, mode) {
        var point = null;
        var ray = this.viewer.camera.getPickRay(position);
        point = this.viewer.scene.globe.pick(ray, this.viewer.scene);
        return point;
    },
    addVertex(point) {
        var entity = new Cesium.Entity({
            position: point,
            point: {
                color: Cesium.Color.WHITE,
                pixelSize: 10,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 1,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            }
        });

        this.viewer.entities.add(entity);
    },
    addPolygon(position) {
        var entity = new Cesium.Entity({
            polygon: {
                hierarchy: position,
                outline: true,
                material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7)),
            }
        });

        this.viewer.entities.add(entity);
    }

}

new PolygonCreator(viewer);

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I want to draw polygon dynamic. When mouse move ,the polygon is drawing dynamicly.

4. The Cesium version you're using, your operating system and browser.

Cesium1.43, windows 10, Chrome

2

The problem I’m seeing is if you don’t pick a point on the earth’s surface (for example, you mouse over the sky or atmosphere). In that case, in the following line:

var point = this.getEarthPoint(event.endPosition, this.mode);

``

point will be undefined, so check with Cesium.defined before continuing.

Thanks,

Gabby

3

Error still happens when I click on the same location twice. For example, you first click on map and move it to somewhere else, then you click twice on map, error occurs. But if the second the third point is not very close to each other, there is no error. Do you have any idea why ?

4

I can duplicate, I opened Issue #6565 to track.

Thanks,

Gabby