cesiumjs

How to clamp a primitive to the ground


I need to draw a LOT of arrows and need they to be primitives because it is the only way to draw arrows on Cesium.

But I need depthTestAgainstTerrain to be setted as true too.

This will make my arrows to "disapear" above the ground even with clampToGround.

enter image description here

This is what I've done (Sory.. you'll need to fly to there ):

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;
// Create sample polyline primitive.
var polylines = scene.primitives.add(new Cesium.PolylineCollection());

var centerLon = -42.25;
var centerLat = -22.25;
var angle = 47;
var distance = 50000;
var nPos = project( centerLat, centerLon, distance, angle );

console.log( JSON.stringify( nPos ) );

var polyline = polylines.add({
    positions : Cesium.Cartesian3.fromDegreesArray([centerLon, centerLat, nPos.lon, nPos.lat]),
    material: Cesium.Material.fromType('PolylineArrow', {
      color: new Cesium.Color.fromBytes(255, 255, 0, 185)
    }),  
    width : 15.0,
    clampToGround : true
});

function project( lat, lon, distance, angle ){
  var radian = Cesium.Math.toRadians(angle);
  var ellipsoid = Cesium.Ellipsoid.WGS84;
  var firstPos = Cesium.Cartesian3.fromDegrees(lon,lat, 0);
  var ENU = Cesium.Transforms.eastNorthUpToFixedFrame(firstPos, ellipsoid);
  var offsetX = distance * Math.sin(radian);
  var offsetY = distance * Math.cos(radian);
  var offset = new Cesium.Cartesian3(offsetX, offsetY, 0);
  var thePosition = Cesium.Matrix4.multiplyByPoint(ENU, offset, new Cesium.Cartesian3());
  const cartographic = Cesium.Cartographic.fromCartesian( thePosition );
  const longitude = Cesium.Math.toDegrees(cartographic.longitude);
  const latitude = Cesium.Math.toDegrees(cartographic.latitude);  
  return { lat: latitude, lon: longitude }; 
} 

enter image description here

How can I use "clampToGround" and yet using primitives ?

SOLUTION FROM ZhefengJin ANSWER:

enter image description here


Solution

  • You can use GroundPolylinePrimitive.
    This is the Sandcastle link
    Source code is here