VectorGraphics direction to center of Earth

Cesium ion
1

I am trying to place a vector with my satellite entity that points directly to the center of the Earth. I tried:

entity.vector = new VectorGraphics({
color: Color.RED,
direction: new Cartesian3(0, 0, 0),
minimumLengthInPixels: 30,
length: 100,
show: true,
});

I believe Cartesian(0,0,0) is the center of the Earth, anything except 0,0,0 works for me. I get error:

DeveloperError: normalized result is not a number

2

Hi,

You are correct that 0,0,0 is the center of the earth.

direction is not a fixed location, but normalized vector that indicates the direction of travel. For example 0,1,0 is the +Y direction. 0,0,0 is not valid for direction since it does not have a magnitude of 1.

If you want the vector to point from the satellite to the center of earth, the origin would be position of the satellite. The direction would point towards 0,0,0.

const result = new Cartesian3();
const direction = Cartesian3.normalize(
  Cartesian3.negate(position, result), 
  result
);
entity.vector = new VectorGraphics({
  position,
  direction
});

You can review the VectorGraphics API documentation for information about the parameters.

3

Thanks for your help! So I left out the position, it is on the entity itself. The position are SampledPositionProperty so the entity will move. Would I also need some kind of sampled direction?

4

It seems to be working with the following (general idea, some code removed):

const sampledProperty = new SampledProperty(Cartesian3);
sampledProperty.setInterpolationOptions({
  interpolationAlgorithm: LagrangePolynomialApproximation,
  interpolationDegree: 5,
});

// Coordinates are [Julian, Cartesian3]
for (const c of coordinates) {
  const result = new Cartesian3();
  const direction = Cartesian3.normalize(
    Cartesian3.negate(c[1], result),
    result
  );
  sampledProperty.addSample(c[0], direction);
}

And then set this as the direction in the VectorGraphics.

5

@mdc9001 I’m now trying to place xyz vector axis, similar to DebugModelMatrixPrimitive. However, I cannot get the vectors correct. Am I misunderstanding the Cartesian direction?

const zAxis = new Entity({
    position: // Cartesian3 coordinates,
    vector: new VectorGraphics({
      color: Color.BLUE,
      direction: new Cartesian3(0, 0, 1),
      minimumLengthInPixels: 30,
      length: 100,
    }),
  });

You can see below that the blue arrow does not match DebugModelMatrixPrimitive blue line.
Screenshot 2024-01-30 at 4.42.46 PM

6

The orientation of the DebugModelMatrixPrimitive depends on the value of the matrix that was provided to the constructor. It is possible that the matrix represents a coordinate system with different axes that the global coordinate system.

Are you able to provide a full code snippet that can run a sandcastle? That will help give additional context.

7

Yes, here is the Sandcastle

I couldn’t get the vectors in there, is there a sandcastle that can use ion features?

8

You can run a version of sandcastle locally with the Cesium ion SDK. If you use npm run build and npm run start. That sandcastle will include the additional ion SDK features. If you have not seen it already there is also a example that shows using vectors.

The vector and the entity are using in different reference frames for their coordinates. This is why the +Z vector appears to point in different directions.

The entity defaults to using the NorthEastUp reference frame if orientation is not provided. This is what the DebugModelMAtrixPrimitive is showing.

The vector always uses WGS84 coordinate reference frame (per the notes in the API documentation). I can see how this can be a little confusing since other items in the entity use the entity reference frame.