Simple custom geometry

CesiumJS
1

Hi All

May be a studif question but I new to Cesium and didnt find an answer searching the forum....

I try to create a custom geometry, actually just draw a line but not using entities.add but using a geometry. I try following simple code in Sandcastle:

var viewer = new Cesium.Viewer('cesiumContainer');

var scene = viewer.scene;

var polyline = new Cesium.PolylineGeometry({
  positions : Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
  width : 10.0,
  color : [Cesium.Color.RED],
});

var instance = new Cesium.GeometryInstance({geometry : polyline});

scene.primitives.add(new Cesium.Primitive({
    geometryInstances : [instance]
}));

viewer.zoomTo(viewer.entities);

From what I studied from documentation and tutorials, this should work. But its not (line is not showing).....

What am I doing wrong?

Windows 7, Chrome

2

Hi there,

  1. You need to set the primitive appearance to use that color:

appearance : new Cesium.PolylineMaterialAppearance({

   material : Cesium.Material.fromType('Color')

})

``

  1. Since there are no entities added to the scene, you can’t have the viewer zoom to them. You’ll have to set the camera position based on your positions:

Enter code here…viewer.camera.setView({

``
destination : Cesium.Cartesian3.fromDegrees(-100, 35, 10000000.0)

});

Here’s a full working example:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var scene = viewer.scene;
var positions = Cesium.Cartesian3.fromDegreesArray([
-75, 35,
-125, 35
]);

var polyline = new Cesium.PolylineGeometry({
positions : positions,
width : 10.0,
color : [Cesium.Color.RED],
});

var instance = new Cesium.GeometryInstance({geometry : polyline});

scene.primitives.add(new Cesium.Primitive({
geometryInstances : [instance],
appearance : new Cesium.PolylineMaterialAppearance({
material : Cesium.Material.fromType(‘Color’)
})
}));

viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(-100, 35, 10000000.0)
});

``

Thanks!

Gabby

3

Hi Gaby

Thanks for the answer.

It works, but when I change color (for example to Cesium.Color.BLUE), the line is still red. Looks like "colors" geometry attribute is ignored (btw, it should be colors, not color, right?).

4

My mistake!

Here’s a working geometry:

var polyline = new Cesium.PolylineGeometry({

positions : positions,

width : 10.0,

vertexFormat : Cesium.PolylineColorAppearance.VERTEX_FORMAT

});

var instance = new Cesium.GeometryInstance({

geometry : polyline,

attributes : {

color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.CYAN)

}

});

scene.primitives.add(new Cesium.Primitive({

geometryInstances : [instance],

appearance : new Cesium.PolylineColorAppearance({

translucent : false

})

}));

``